vue 如何下载文件（包含txt jpg pdf word）

闲聊：

问题：项目中的一个bug,使用a标签的href download 的下载功能，但是对于图片 .txt文件，浏览器能解析的文件，会直接展示出来。

征程：看了各种博客，什么乱七八糟的都有（a标签啦，window.open() 等等），最后东拼西凑，终于把图片下载拿下了。

上代码---->

本次项目用的是axios。

具体知识点：

1.手写一个get请求。

2.请求头设置：let header = {'Content-Type': 'multipart/form-data;charset=UTF-8'};//设置content-type

3.设置请求的返回数据类型 responseType: "arraybuffer"。//此处不设置的话，也能下载，但是图片的数据有问题。

4.请求成功之后，把数据放在blob。 let blob = new Blob([res.data], { type: `application/${fileSuffix}`}) // 假设文件为pdf

在这个过程中也看了一些人的博客。相关大佬博客：

1.responseType: "arraybuffer" 灵感来源。https://blog.csdn.net/zj25xy11/article/details/90447122

2.blob 来源。https://segmentfault.com/q/1010000014569305

3.原生写法使用XMLHttpRequest对象。https://blog.csdn.net/qq_19313497/article/details/104234723

//html代码

<span @click="downloadFile(item.annex_url,item.fileName)">下载</span>

//文件下载函数

downloadFile :function (fileUrl,fileName){

//获取远程服务器.md文件数据。

let header = {'Content-Type': 'multipart/form-data;charset=UTF-8'};//设置content-type

this.$axios.get(formUrl.splitUrl(fileUrl),header).then((res)=>{//formUrl.splitUrl(fileUrl)此处是对请求url的格式化。

let fileSuffix = fileUrl.split('.').pop();//文件名后缀。

console.log(fileSuffix)

let blob = new Blob([res.data], { type: `application/${fileSuffix}`}) // 假设文件为pdf

let link = document.createElement('a');

link.href = window.URL.createObjectURL(blob);

link.download = `${fileName}`;

link.click();

link.remove();

});

},

//因为axios是封装的，所以在这里进行了，配置

get(url, header,params){

if(typeof header !== 'undefined'){

return axios({

method: 'get',

url: `${url}`,

headers: header,

responseType: "arraybuffer",

});

}}

代码只是一个对于解决方式的参考，直接粘贴意义不大，不过解决流程应该讲的已经很明白了吧。

如果对你有帮助，请在评论区扣1，如果有问题，请评论上你的问题。

vue 如何下载文件（包含txt jpg pdf word）相关推荐

vue接入下载文件接口
vue接入下载文件接口后端接口返回字节数组或者文件流返回下载的文件时,前端使用vue接入下载文件的方法如下: 前端部分 1.前端下载文件方法 // obj:后端返回的的字节数组或者文件流:name: ...
vue中下载文件导出保存到本地
vue中下载文件导出保存到本地先分析如何下载:先有一个链接地址,然后使用 location.href或window.open()下载到本地看看返回数据 res.config.url 中是下载链接地 ...
VUE实现下载文件，避免浏览器默认直接打开文件
文件下载时浏览器遇到txt,jpg,png,pdf,mp4等文件会直接预览而不是直接下载. 踩坑1 window.open() Window 接口的 open() 方法,是用指定的名称将指定的资源加 ...
【vue】vue中下载文件的方法
文章目录 1. 下载后端返回文件 1.1 后端为post请求返回二进制流文件 URL.createObjectURL FileReader 1.2 后端直接返回get请求文件 2. 下载本地文件 1. ...
Vue 项目下载文件最佳解决方案
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群原文链接: https://juejin.cn/post/70628885824651919 ...
vue中下载文件使用file-saver，文件错误excel无法打开
最近使用到了file-saver下载文件,通过axios调接口拿文件数据,再通过file-saver下载文件但就在我成功下载文件并打开时,提示这个信息: 主要的原因就是没有设置响应的文件流类型为&q ...
前端(vue/js)下载文件(xlsx、ts等格式)
// 下载文件// obj是调用接口拿到的数据,name是文件名,suffix是格式后缀 export function downloadFile(obj, name, suffix) {const ...
vue前端下载文件的几种方式
前端经常需要通过后端给的文件流下载各种文件,比如excel,word,压缩包等方式一:使用 window.location.href 这里限于使用get方式 window.location.href ...
Vue中手动导出Element表格为pdf/word/excel格式
在vue中将element的表格进行导出为pdf/word/excel样式,需要进行一些处理,比较麻烦网页样式导出为表格导出为word 导出为PDF 一.编写工具函数和前置对element样式的 ...

vue 如何下载文件（包含txt jpg pdf word）

闲聊：

vue 如何下载文件（包含txt jpg pdf word）相关推荐

最新文章

热门文章