vue接入下载文件接口

后端接口返回字节数组或者文件流返回下载的文件时，前端使用vue接入下载文件的方法如下：

前端部分

1.前端下载文件方法

// obj：后端返回的的字节数组或者文件流；name:文件名；suffix:文件后缀
downloadFile(obj, name, suffix) {const url = window.URL.createObjectURL(new Blob([obj]))const link = document.createElement('a')link.style.display = 'none'link.href = urlconst fileName = parseTime(new Date()) + '-' + name + '.' + suffixlink.setAttribute('download', fileName)document.body.appendChild(link)link.click()document.body.removeChild(link)
}

2.ajax

// 特别的responseType的类型为blob
export function download(url, params) {return request({url: url + '?' + qs.stringify(params, { indices: false }),method: 'get',responseType: 'blob'})
}

后端部分

方法一：返回ResponseEntity对象

// downFile: 下载的文件，FileUtil.readBytes(downFile)得到文件的字节数组HttpHeaders headers = new HttpHeaders();// 返回的文件名String fileName = System.currentTimeMillis() + type;headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);headers.setContentDispositionFormData("attachment", fileName);
//  headers.add("Content-Disposition", "attachment;filename=" + fileName); 等同上一行return new ResponseEntity<>(FileUtil.readBytes(downFile), headers, HttpStatus.CREATED);

方法二：将文件流写入HttpServletResponse的输出流中

HttpServletResponse response........
response.setHeader("Content-Disposition", "attachment;filename=file.xlsx");
ServletOutputStream out = response.getOutputStream();
out.write(FileUtil.readBytes(downFile));
out.close();

 /*** 文件下载接口* @param filePath  文件上传时，返回的相对路径* @param response* @param isOnLine  传入true，表示打开，但是打开的是浏览器能识别的文件，比如图片、pdf，word等无法打开*                  传入false,只是下载，如果不传入这个参数默认为false* @throws Exception*/@RequestMapping(value = "/downloadFile",method = RequestMethod.GET)public void downLoad(String filePath, HttpServletResponse response, boolean isOnLine) throws Exception {File f = new File(realPath+filePath);if (!f.exists()) {response.sendError(404, "File not found!");return;}String fileName = f.getName();fileName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");BufferedInputStream br = new BufferedInputStream(new FileInputStream(f));byte[] buf = new byte[1024];int len = 0;response.reset(); // 非常重要if (isOnLine) { // 在线打开方式URL u = new URL("file:///" + realPath+filePath);response.setContentType(u.openConnection().getContentType());response.setHeader("Content-Disposition", "inline; filename=" + fileName);// 文件名应该编码成UTF-8} else { // 纯下载方式response.setContentType("application/octet-stream");response.setHeader("Content-Disposition", "attachment; filename=" + fileName);}OutputStream out = response.getOutputStream();while ((len = br.read(buf)) > 0)out.write(buf, 0, len);br.close();out.close();}

response.setContentType()的String参数及对应类型

文件扩展名 Content-Type(Mime-Type) 文件扩展名 Content-Type(Mime-Type)
.*（ 二进制流，不知道下载文件类型） application/octet-stream .tif image/tiff
.001 application/x-001 .301 application/x-301
.323 text/h323 .906 application/x-906
.907 drawing/907 .a11 application/x-a11
.acp audio/x-mei-aac .ai application/postscript
.aif audio/aiff .aifc audio/aiff
.aiff audio/aiff .anv application/x-anv
.asa text/asa .asf video/x-ms-asf
.asp text/asp .asx video/x-ms-asf
.au audio/basic .avi video/avi
.awf application/vnd.adobe.workflow .biz text/xml
.bmp application/x-bmp .bot application/x-bot
.c4t application/x-c4t .c90 application/x-c90
.cal application/x-cals .cat application/vnd.ms-pki.seccat
.cdf application/x-netcdf .cdr application/x-cdr
.cel application/x-cel .cer application/x-x509-ca-cert
.cg4 application/x-g4 .cgm application/x-cgm
.cit application/x-cit .class java/*
.cml text/xml .cmp application/x-cmp
.cmx application/x-cmx .cot application/x-cot
.crl application/pkix-crl .crt application/x-x509-ca-cert
.csi application/x-csi .css text/css
.cut application/x-cut .dbf application/x-dbf
.dbm application/x-dbm .dbx application/x-dbx
.dcd text/xml .dcx application/x-dcx
.der application/x-x509-ca-cert .dgn application/x-dgn
.dib application/x-dib .dll application/x-msdownload
.doc application/msword .dot application/msword
.drw application/x-drw .dtd text/xml
.dwf Model/vnd.dwf .dwf application/x-dwf
.dwg application/x-dwg .dxb application/x-dxb
.dxf application/x-dxf .edn application/vnd.adobe.edn
.emf application/x-emf .eml message/rfc822
.ent text/xml .epi application/x-epi
.eps application/x-ps .eps application/postscript
.etd application/x-ebx .exe application/x-msdownload
.fax image/fax .fdf application/vnd.fdf
.fif application/fractals .fo text/xml
.frm application/x-frm .g4 application/x-g4
.gbr application/x-gbr . application/x-
.gif image/gif .gl2 application/x-gl2
.gp4 application/x-gp4 .hgl application/x-hgl
.hmr application/x-hmr .hpg application/x-hpgl
.hpl application/x-hpl .hqx application/mac-binhex40
.hrf application/x-hrf .hta application/hta
.htc text/x-component .htm text/html
.html text/html .htt text/webviewhtml
.htx text/html .icb application/x-icb
.ico image/x-icon .ico application/x-ico
.iff application/x-iff .ig4 application/x-g4
.igs application/x-igs .iii application/x-iphone
.img application/x-img .ins application/x-internet-signup
.isp application/x-internet-signup .IVF video/x-ivf
.java java/* .jfif image/jpeg
.jpe image/jpeg .jpe application/x-jpe
.jpeg image/jpeg .jpg image/jpeg
.jpg application/x-jpg .js application/x-javascript
.jsp text/html .la1 audio/x-liquid-file
.lar application/x-laplayer-reg .latex application/x-latex
.lavs audio/x-liquid-secure .lbm application/x-lbm
.lmsff audio/x-la-lms .ls application/x-javascript
.ltr application/x-ltr .m1v video/x-mpeg
.m2v video/x-mpeg .m3u audio/mpegurl
.m4e video/mpeg4 .mac application/x-mac
.man application/x-troff-man .math text/xml
.mdb application/msaccess .mdb application/x-mdb
.mfp application/x-shockwave-flash .mht message/rfc822
.mhtml message/rfc822 .mi application/x-mi
.mid audio/mid .midi audio/mid
.mil application/x-mil .mml text/xml
.mnd audio/x-musicnet-download .mns audio/x-musicnet-stream
.mocha application/x-javascript .movie video/x-sgi-movie
.mp1 audio/mp1 .mp2 audio/mp2
.mp2v video/mpeg .mp3 audio/mp3
.mp4 video/mpeg4 .mpa video/x-mpg
.mpd application/vnd.ms-project .mpe video/x-mpeg
.mpeg video/mpg .mpg video/mpg
.mpga audio/rn-mpeg .mpp application/vnd.ms-project
.mps video/x-mpeg .mpt application/vnd.ms-project
.mpv video/mpg .mpv2 video/mpeg
.mpw application/vnd.ms-project .mpx application/vnd.ms-project
.mtx text/xml .mxp application/x-mmxp
.net image/pnetvue .nrf application/x-nrf
.nws message/rfc822 .odc text/x-ms-odc
.out application/x-out .p10 application/pkcs10
.p12 application/x-pkcs12 .p7b application/x-pkcs7-certificates
.p7c application/pkcs7-mime .p7m application/pkcs7-mime
.p7r application/x-pkcs7-certreqresp .p7s application/pkcs7-signature
.pc5 application/x-pc5 .pci application/x-pci
.pcl application/x-pcl .pcx application/x-pcx
.pdf application/pdf .pdf application/pdf
.pdx application/vnd.adobe.pdx .pfx application/x-pkcs12
.pgl application/x-pgl .pic application/x-pic
.pko application/vnd.ms-pki.pko .pl application/x-perl
.plg text/html .pls audio/scpls
.plt application/x-plt .png image/png
.png application/x-png .pot application/vnd.ms-powerpoint
.ppa application/vnd.ms-powerpoint .ppm application/x-ppm
.pps application/vnd.ms-powerpoint .ppt application/vnd.ms-powerpoint
.ppt application/x-ppt .pr application/x-pr
.prf application/pics-rules .prn application/x-prn
.prt application/x-prt .ps application/x-ps
.ps application/postscript .ptn application/x-ptn
.pwz application/vnd.ms-powerpoint .r3t text/vnd.rn-realtext3d
.ra audio/vnd.rn-realaudio .ram audio/x-pn-realaudio
.ras application/x-ras .rat application/rat-file
.rdf text/xml .rec application/vnd.rn-recording
.red application/x-red .rgb application/x-rgb
.rjs application/vnd.rn-realsystem-rjs .rjt application/vnd.rn-realsystem-rjt
.rlc application/x-rlc .rle application/x-rle
.rm application/vnd.rn-realmedia .rmf application/vnd.adobe.rmf
.rmi audio/mid .rmj application/vnd.rn-realsystem-rmj
.rmm audio/x-pn-realaudio .rmp application/vnd.rn-rn_music_package
.rms application/vnd.rn-realmedia-secure .rmvb application/vnd.rn-realmedia-vbr
.rmx application/vnd.rn-realsystem-rmx .rnx application/vnd.rn-realplayer
.rp image/vnd.rn-realpix .rpm audio/x-pn-realaudio-plugin
.rsml application/vnd.rn-rsml .rt text/vnd.rn-realtext
.rtf application/msword .rtf application/x-rtf
.rv video/vnd.rn-realvideo .sam application/x-sam
.sat application/x-sat .sdp application/sdp
.sdw application/x-sdw .sit application/x-stuffit
.slb application/x-slb .sld application/x-sld
.slk drawing/x-slk .smi application/smil
.smil application/smil .smk application/x-smk
.snd audio/basic .sol text/plain
.sor text/plain .spc application/x-pkcs7-certificates
.spl application/futuresplash .spp text/xml
.ssm application/streamingmedia .sst application/vnd.ms-pki.certstore
.stl application/vnd.ms-pki.stl .stm text/html
.sty application/x-sty .svg text/xml
.swf application/x-shockwave-flash .tdf application/x-tdf
.tg4 application/x-tg4 .tga application/x-tga
.tif image/tiff .tif application/x-tif
.tiff image/tiff .tld text/xml
.top drawing/x-top .torrent application/x-bittorrent
.tsd text/xml .txt text/plain
.uin application/x-icq .uls text/iuls
.vcf text/x-vcard .vda application/x-vda
.vdx application/vnd.visio .vml text/xml
.vpg application/x-vpeg005 .vsd application/vnd.visio
.vsd application/x-vsd .vss application/vnd.visio
.vst application/vnd.visio .vst application/x-vst
.vsw application/vnd.visio .vsx application/vnd.visio
.vtx application/vnd.visio .vxml text/xml
.wav audio/wav .wax audio/x-ms-wax
.wb1 application/x-wb1 .wb2 application/x-wb2
.wb3 application/x-wb3 .wbmp image/vnd.wap.wbmp
.wiz application/msword .wk3 application/x-wk3
.wk4 application/x-wk4 .wkq application/x-wkq
.wks application/x-wks .wm video/x-ms-wm
.wma audio/x-ms-wma .wmd application/x-ms-wmd
.wmf application/x-wmf .wml text/vnd.wap.wml
.wmv video/x-ms-wmv .wmx video/x-ms-wmx
.wmz application/x-ms-wmz .wp6 application/x-wp6
.wpd application/x-wpd .wpg application/x-wpg
.wpl application/vnd.ms-wpl .wq1 application/x-wq1
.wr1 application/x-wr1 .wri application/x-wri
.wrk application/x-wrk .ws application/x-ws
.ws2 application/x-ws .wsc text/scriptlet
.wsdl text/xml .wvx video/x-ms-wvx
.xdp application/vnd.adobe.xdp .xdr text/xml
.xfd application/vnd.adobe.xfd .xfdf application/vnd.adobe.xfdf
.xhtml text/html .xls application/vnd.ms-excel
.xls application/x-xls .xlw application/x-xlw
.xml text/xml .xpl audio/scpls
.xq text/xml .xql text/xml
.xquery text/xml .xsd text/xml
.xsl text/xml .xslt text/xml
.xwd application/x-xwd .x_b application/x-x_b
.sis application/vnd.symbian.install .sisx application/vnd.symbian.install
.x_t application/x-x_t .ipa application/vnd.iphone
.apk application/vnd.android.package-archive .xap application/x-silverlight-app

vue接入下载文件接口相关推荐

  1. vue中下载文件导出保存到本地

    vue中下载文件导出保存到本地 先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地 看看返回数据 res.config.url 中是下载链接地 ...

  2. vue中下载文件使用file-saver，文件错误excel无法打开

    最近使用到了file-saver下载文件,通过axios调接口拿文件数据,再通过file-saver下载文件 但就在我成功下载文件并打开时,提示这个信息: 主要的原因就是没有设置响应的文件流类型为&q ...

  3. VUE实现下载文件，避免浏览器默认直接打开文件

    文件下载时浏览器遇到txt,jpg,png,pdf,mp4等文件会直接预览而不是直接下载. 踩坑1  window.open() Window 接口的 open() 方法,是用指定的名称将指定的资源加 ...

  4. Vue 项目下载文件最佳解决方案

    大厂技术  高级前端  Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 原文链接: https://juejin.cn/post/70628885824651919 ...

  5. 前端(vue/js)下载文件(xlsx、ts等格式)

    // 下载文件// obj是调用接口拿到的数据,name是文件名,suffix是格式后缀 export function downloadFile(obj, name, suffix) {const ...

  6. 【vue】vue中下载文件的方法

    文章目录 1. 下载后端返回文件 1.1 后端为post请求返回二进制流文件 URL.createObjectURL FileReader 1.2 后端直接返回get请求文件 2. 下载本地文件 1. ...

  7. 下载---当前端调用下载文件接口，接口通了，浏览器却没有下载文件（不一定好使）

    1.下载文件封装 import request from './request' export function download(url, params,filename) {     reques ...

  8. vue本地下载文件，解决ie浏览器本地下载文件无反应（已解决）；vue-cli2本地下载文件，vue-cli3本地下载文件

    1.vue-cli2+vue 注意:vue-cli2本地文件需要放在静态文件static下 <a href="javascript:void(0);" @click=&quo ...

  9. vue前端下载文件的2种方式

    以下两种方式下载适用于后端返回了文件的url下载地址 var x = new XMLHttpRequest();x.open("GET", url, true);//url为文件的 ...

最新文章

  1. 探讨.NET Core中实现AES加密和解密以及.NET Core为我们提供了什么方便！
  2. 韩顺平循序渐进学java 第10.11讲 继承.重载.覆盖
  3. 探索 Linux 内存模型--转
  4. PHP代码审计笔记--变量覆盖漏洞
  5. 一句话证明你是产品经理
  6. GFW Rule list
  7. idhttp返回乱码_node.js http.get请求返回的中文乱码， iconv zlib模块都不好使，求解决！！！...
  8. excel 2016 英文界面 更换 中文界面
  9. 在vc中实现获取汉字拼音的首字母
  10. english 后缀
  11. nginx修改主目录、主页
  12. pandas 第二章 pandas基础
  13. 三相MMC并网逆变器/模块化多电平变换器/相间环流抑制/子模块电容电压均衡/载波移相调制
  14. 车载监控需求日益上升， 浅析车载远程视频监控解决方案
  15. About云公益4月名额抽取
  16. 通用能力-数量关系专项练习（2）
  17. 无人机动力测试台-自动化测试系统拉力、扭矩、电压、电流、转速和效率
  18. anchor free 目标检测_【目标检测】anchor-free—CenterNet总结
  19. 全球及中国纳米石墨烯材料行业市场现状分析及投资风险预测报告2022-2027年
  20. ue4 联机烘焙出现问题和解决方式

热门文章

  1. HDOJ 6608 Fansblog
  2. 计算机关系差 并 交,计算机三个关系投影 交 并 差是什么意思
  3. 惠普1005打印机自检页_hp1005打印机自检报告.docx
  4. kubeadm部署kubernetes集群
  5. 变位词算法C语言,第二章 啊哈！算法（变位词）
  6. 【图形学】计算机图形学-练习题5
  7. matlab如何导入大量的图片_本期介绍:如何在论文中插入高清的图片
  8. 苹果ipa 安卓apk 和APPX 安全扫码和分析平台
  9. `MD`语法技巧Typora
  10. js正则表达式检测邮箱地址是否正确