前端下载文件方法、后台接口返回二进制文件流、前端通过blob对象并使用fetch/axios实现下载

在项目中实现文件下载的方法:

一、接口返回url或者get请求访问接口直接下载。

window.location.href = xxxurl
使用a标签下载

const alink= document.createElement('a')alink.style = 'display: none;'alink.href = srcalink.click()

file-saver 等等插件

二、有时项目会要求在发送请求的时候加上token验证或者请求头，会返回文件流

axios

设 content 为后端返回文件流const blob = new Blob([content], {type: 'application/octet-stream',  //type 根据具体情况填写 下面是type对应表}) // 通过返回的流数据 手动构建blob 流const url = URL.createObjectURL(blob) // 这里是将文件流转化为一个文件地址const alink = document.createElement('a')alink.href = urlalink.download = 'xx文件名'alink.style.display = 'none'alink.click()URL.revokeObjectURL(alink.href) // 释放URL 对象

fetch

fetch(`${ServerConfig.getServerUrl()}/studio-thirdparty-dix/console-api/diconsole/downloaddip`,{headers: header,method: 'POST',body: JSON.stringify(self.params),}).then((r) => {if (r.status === 200) {return r.blob()}return false}).then((r) => {if (r === false) {self.$Message.error('下载失败，请稍后重试！')} else {const a = document.createElement('a')a.download="xxx文件名"a.href = URL.createObjectURL(r)a.style.display = 'none'a.click()URL.revokeObjectURL(alink.href) // 释放URL 对象}}).catch((err) => {console.log(err)})

文件type对应表

后缀名  文件类型                        类型（type）
.xls    Microsoft Excel                    application/vnd.ms-excel
.xlsx   Microsoft Excel (OpenXML)   application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.csv    CSV text/csv
.doc    Microsoft Word              application/msword
.docx   Microsoft Word (OpenXML)    application/vnd.openxmlformats-officedocument.wordprocessingml.document
.pdf    PDF application/pdf
.ppt    Microsoft PowerPoint          application/vnd.ms-powerpoint
.pptx   Microsoft PowerPoint (OpenXML)      application/vnd.openxmlformats-officedocument.presentationml.presentation
.png    便携式网络图形（PNG）              image/png
.gif    GIF image/gif
.jpeg   JPEG 图片         image/jpeg
.jpg    JPEG 图片 image/jpeg
.mp3    MP3 音频  audio/mpeg
.aac    AAC 音频  audio/aac
.html   超文本标记语言 (HTML)  text/html
.css    CSS text/css
.js JavaScript  text/javascript
.json   JSON 格式 application/json
.abw    AbiWord 文档  application/x-abiword
.arc    存档文档(多个文件嵌入)    application/x-freearc
.avi    AVI: 音频视频交错 video/x-msvideo
.azw    亚马逊Kindle电子书格式  application/vnd.amazon.ebook
.bin    任何类型的二进制数据  application/octet-stream
.bmp    Windows OS/2位图图形    image/bmp
.bz BZip 存档 application/x-bzip
.bz2    BZip2 存档    application/x-bzip2
.csh    C-Shell 脚本  application/x-csh
.eot    MS嵌入式OpenType字体 application/vnd.ms-fontobject
.epub   电子出版物(EPUB) application/epub+zip
.htm    超文本标记语言 (HTML)  text/html
.ico    Icon 格式 image/vnd.microsoft.icon
.ics    iCalendar 格式    text/calendar
.jar    Java Archive (JAR)  application/java-archive
.jsonld JSON-LD 格式  application/ld+json
.mid    乐器数字接口(MIDI)    audio/midi audio/x-midi
.midi   乐器数字接口(MIDI)    audio/midi audio/x-midi
.mjs    JavaScript 模块   text/javascript
.mpeg   MPEG 视频 video/mpeg
.mpkg   苹果安装程序包 application/vnd.apple.installer+xml
.odp    OpenDocument演示文档    application/vnd.oasis.opendocument.presentation
.ods    OpenDocument 电子表格文件 application/vnd.oasis.opendocument.spreadsheet
.odt    OpenDocument 文本文档   application/vnd.oasis.opendocument.text
.oga    OGG 音频  audio/ogg
.ogv    OGG 视频  video/ogg
.ogx    OGG application/ogg
.otf    OpenType 字体 font/otf
.rar    RAR 存档  application/x-rar-compressed
.rtf    富文本格式 (RTF) application/rtf
.sh Bourne shell 脚本 application/x-sh
.svg    可缩放矢量图形 (SVG)   image/svg+xml
.swf    小型web格式 (SWF) or Adobe Flash document   application/x-shockwave-flash
.tar    Tape 归档(TAR)    application/x-tar
.tif    标记图像文件格式 (TIFF) image/tiff
.tiff   Tagged Image File Format (TIFF) image/tiff
.ttf    TrueType 字体 font/ttf
.txt    Text    text/plain
.vsd    Microsoft Visio application/vnd.visio
.wav    波形音频格式  audio/wav
.weba   WEBM 音频 audio/webm
.webm   WEBM 视频 video/webm
.webp   WEBP 图片 image/webp
.woff   网页开放字体格式 (WOFF) font/woff
.woff2  网页开放字体格式 (WOFF) font/woff2
.xhtml  XHTML   application/xhtml+xml
.xml    XML application/xml（普通用户不可读）、text/xml（普通用户可读）
.xul    XUL application/vnd.mozilla.xul+xml
.zip    ZIP application/zip
.3gp    3GPP audio/video 容器 video/3gpp、audio/3gpp（不含视频）
.3g2    3GPP2 audio/video 容器    video/3gpp2、audio/3gpp2（不含视频）
.7z 7-zip   application/x-7z-compressed

前端下载文件方法、后台接口返回二进制文件流、前端通过blob对象并使用fetch/axios实现下载相关推荐

前端接收二进制文件流（使用blob对象）
前端在做管理系统开发时经常遇到的需求:下载文件入Excel,World,zip 处理方式有两种: 1.后端生成下载地址,前端调用 2.后端返回二进制文件流,前端转换后下载本文主要介绍第二种在向后端 ...
调用后台接口返回报错前端隐藏提示_前端异常监控解决方案研究（转）
前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如 ...
调用后台接口返回报错前端隐藏提示_从零开始的Android新项目9 - 前端用后台接口设计...
这回来讲讲后台接口的设计. 可能有同学会觉得后台的接口和我们大前端开发有什么关系?试想一下,在碰到一些不合理的接口设计的时候,你们开发是否觉得很别扭--需要为了坑爹的接口写很多脏代码引坑?甚至,这么开 ...
后端返回二进制文件流前端处理并下载jpg格式图片
后端返回数据格式: 实现效果: 应用 axios+vue //下载二维码onDownloadQR() {let data = {code: this.downloadQr,};downqrcode(d ...
调用后台接口返回报错前端隐藏提示_腾讯社交联盟广告
开发者帮助中心优量汇服务体系升级了,除查阅本页常见问题外,还可以通过以下渠道解决您遇到的问题 1. 实时智能客服入口:优量汇官网.开发者平台.优量汇服务号时间:7*24即时问答服务内容:涵盖 ...
Vue项目：js模拟点击a标签下载文件并重命名，URL文件地址下载方法、请求接口下载文件方法总结。
URL文件地址下载方法一.正常情况下,我们都如此下载文件并修改文件名,在a标签上面添加download属性 //文件下载downFile() {if ('download' in document. ...
百度云下载文件方法：PC 和群晖 Docker
百度云下载文件方法:PC 和群晖 Docker 目录 - 百度云下载文件方法:PC 和群晖 Docker     - 1.PC端其它软件         - 1.1.百度云客户端的替代软件    ...
js下载文件方法记录
js下载文件方法记录 downLoadExcel() { this.downloading = true axios.get(/xxxx, { responseType: 'blob', params ...
天翼云盘突破限制无需客户端下载文件方法
天翼云盘突破限制无需客户端下载文件方法在线网盘的市场当中,百度网盘一直处于"主导"地位. 这么肥的一块蛋糕,其他厂商自然不想丢掉,所以他们也一直在做自己的网盘,只是影响力太小.大 ...

前端下载文件方法、后台接口返回二进制文件流、前端通过blob对象并使用fetch/axios实现下载

一、接口返回url或者get请求访问接口直接下载。

二、有时项目会要求在发送请求的时候加上token验证或者请求头，会返回文件流

axios

fetch

前端下载文件方法、后台接口返回二进制文件流、前端通过blob对象并使用fetch/axios实现下载相关推荐

最新文章

热门文章

前端下载文件方法、 后台接口返回二进制文件流、前端通过blob对象并使用fetch/axios实现下载

一、接口返回url或者get请求访问接口直接下载。

二、有时项目会要求在发送请求的时候加上token验证或者请求头，会返回文件流

axios

fetch

前端下载文件方法、 后台接口返回二进制文件流、前端通过blob对象并使用fetch/axios实现下载相关推荐

最新文章

热门文章

前端下载文件方法、后台接口返回二进制文件流、前端通过blob对象并使用fetch/axios实现下载

前端下载文件方法、后台接口返回二进制文件流、前端通过blob对象并使用fetch/axios实现下载相关推荐