我有一个后端API,它在我们调用它时基本上会下载一个模板。我在html页面上提供了href,因此,每当有人单击该href时,它就会调用后端API,并且应该下载该文件。
但是该文件未下载。
我正在使用React。如果我只是从浏览器访问后端,则文件将被下载,但是如果我从react调用,则不会。
有线索吗?
反应代码:
const config = require('config'); var aws4 = require('aws4'); const Promise = require('axios'); const requestHelper = { appendHeaders(request){ request.headers = request.headers || {}; if(request.headers["Content-Type"]){ return } request.headers["Content-Type"] = "application/json"; }, externalApi(request, serverResult){ if(!request.method){ request.method='POST'; } request.path = request.url this.appendHeaders(request) console.log('request',request) return Promise(request) .then((apiResponse) => { if (apiResponse.data.errors) { var error = apiResponse.data.errors; console.log('api error response: ', error); serverResult.status(400).json({ error }) } else { console.log('api response: ', apiResponse.data); serverResult.status(200).json(apiResponse.data); } }).catch((error) => { console.log('api error response: ', error); serverResult.status(400).json({ error }); }); }, getDownloadResponse(request, serverResult){ debugger; request.path = request.url this.appendHeaders(request) console.log(request); return Promise(request) .then((apiResponse) => { if (apiResponse.data.errors) { var error = apiResponse.data.errors; console.log('api error response: ', error); serverResult.status(400).json({ error }) } else { serverResult.status(200); console.log('api response status: '+200); } }).catch((error) => { console.log('api error response: ', error); serverResult.status(400).json({ error }); }); } }; module.exports = requestHelper;
后端API代码:
@RequestMapping(value = GlobalConstants.DOWNLOAD_FILE, method = RequestMethod.GET) public void downloadTemplate(HttpServletRequest hRequest, HttpServletResponse response) throws Exception { InputStream in = null; OutputStream out = null; try { if (!StringUtils.isEmpty(sampleFile)) { File file = new File(sampleFile); in = finderService.downloadFile(sampleFile); if (in != null) { MimetypesFileTypeMap mimetypesFileTypeMap = new MimetypesFileTypeMap(); response.setContentType(mimetypesFileTypeMap.getContentType(file)); String headerKey = "Content-Disposition"; String headerValue = String.format("attachment; filename=\"%s\"", file.getName()); response.setHeader(headerKey, headerValue); out = response.getOutputStream(); byte[] buffer = new byte[4096]; int length; while ((length = in.read(buffer)) > 0) { out.write(buffer, 0, length); } } } else { response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); } logger.error("Internal Server error"); //Add logs for server error here also } catch (Throwable th) { response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); logger.error(th); return; } finally { if (in != null) { in.close(); } if (out != null) { out.flush(); } } }
GETJS中的请求与访问浏览器中的URL不同。您需要通过指定URL直接在客户端上调用下载,例如:
GET
download() { // fake server request, getting the file url as response setTimeout(() => { const response = { file: 'http://releases.ubuntu.com/12.04.5/ubuntu-12.04.5-alternate-amd64.iso', }; // server sent the url to the file! // now, let's download: window.open(response.file); // you could also do: // window.location.href = response.file; }, 100); }
这是JSBin上的工作示例。
请注意 ,如果要下载浏览器可以显示的文件(例如JSON,图像,视频),它们将显示在新选项卡中。如果要直接下载这些类型的文件,则需要使用一些解决方法,例如使用blob。
blob