Vue+axios下载二进制文件

1. 下载接口

axios({
                        method: "get",
                        url: fileUrl,
                        headers: {
                            "content-type": "application/json; charset=utf-8",
                        },
                        responseType: "blob",       //设置响应类型为blob,否则二进制流直接转换会出错
                    })

2. 下载代码

/** 二维码 */
    downQRCode(row) {
      console.log(row)
      console.log("row",row.id)
      console.log("rowdrug",row.drug)

      let urlQRCode = "http://192.168.5.25:8080" + '/#/?drugName='+ row.drug
      console.log("urlQRCode",urlQRCode)
      getQRCode(urlQRCode).then(response => {
        let blob = new Blob([response], { type: 'image/png' }) // type是 MIME类型
        let url = window.URL.createObjectURL(blob) //生成下载链接
        const link = document.createElement('a') //创建超链接a用于文件下载
        link.href = url //赋值下载路径
        link.target = '_blank' //打开新窗口下载,不设置则为在本窗口下载
        link.download = `${ row.drug }.png` //下载的文件名称(不设置就会随机生成)
        link.click() //点击超链接触发下载
        URL.revokeObjectURL(url) //释放URL
        this.$message.success('下载完成')
        console.log(response)
      })
        .catch(error => this.$message.error('下载失败'))
    },
后缀名文件类型类型(type)
.xlsMicrosoft Excelapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.csvCSVtext/csv
.docMicrosoft Wordapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.pdfPDFapplication/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.pptxMicrosoft PowerPoint (OpenXML)application/vnd.openxmlformats-officedocument.presentationml.presentation
.png便携式网络图形(PNG)image/png
.gifGIFimage/gif
.jpegJPEG 图片image/jpeg
.jpgJPEG 图片image/jpeg
.mp3MP3 音频audio/mpeg
.aacAAC 音频audio/aac
.html超文本标记语言 (HTML)text/html
.cssCSStext/css
.jsJavaScripttext/javascript
.jsonJSON 格式application/json
.abwAbiWord 文档application/x-abiword
.arc存档文档(多个文件嵌入)application/x-freearc
.aviAVI: 音频视频交错video/x-msvideo
.azw亚马逊Kindle电子书格式application/vnd.amazon.ebook
.bin任何类型的二进制数据application/octet-stream
.bmpWindows OS/2位图图形image/bmp
.bzBZip 存档application/x-bzip
.bz2BZip2 存档application/x-bzip2
.cshC-Shell 脚本application/x-csh
.eotMS嵌入式OpenType字体application/vnd.ms-fontobject
.epub电子出版物(EPUB)application/epub+zip
.htm超文本标记语言 (HTML)text/html
.icoIcon 格式image/vnd.microsoft.icon
.icsiCalendar 格式text/calendar
.jarJava Archive (JAR)application/java-archive
.jsonldJSON-LD 格式application/ld+json
.mid乐器数字接口(MIDI)audio/midi audio/x-midi
.midi乐器数字接口(MIDI)audio/midi audio/x-midi
.mjsJavaScript 模块text/javascript
.mpegMPEG 视频video/mpeg
.mpkg苹果安装程序包application/vnd.apple.installer+xml
.odpOpenDocument演示文档application/vnd.oasis.opendocument.presentation
.odsOpenDocument 电子表格文件application/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument 文本文档application/vnd.oasis.opendocument.text
.ogaOGG 音频audio/ogg
.ogvOGG 视频video/ogg
.ogxOGGapplication/ogg
.otfOpenType 字体font/otf
.rarRAR 存档application/x-rar-compressed
.rtf富文本格式 (RTF)application/rtf
.shBourne shell 脚本application/x-sh
.svg可缩放矢量图形 (SVG)image/svg+xml
.swf小型web格式 (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape 归档(TAR)application/x-tar
.tif标记图像文件格式 (TIFF)image/tiff
.tiffTagged Image File Format (TIFF)image/tiff
.ttfrueType 字体font/ttf
.txtTexttext/plain
.vsdMicrosoft Visioapplication/vnd.visio
.wav波形音频格式audio/wav
.webaWEBM 音频audio/webm
.webmEBM 视频video/webm
.webpWEBP 图片image/webp
.woff网页开放字体格式 (WOFF)font/woff
.woff2网页开放字体格式 (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xmlXMLapplication/xml(普通用户不可读)、text/xml(普通用户可读)
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIPapplication/zip
.3gp3GPP audio/video 容器video/3gpp、audio/3gpp(不含视频)
.3g23GPP2 audio/video 容器video/3gpp2、audio/3gpp2(不含视频)
.7z7-zipapplication/x-7z-compressed
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值