Vue的Excel文件下载

最早开始接触下载是后端直接返回一个链接，通过a标签直接下载，甚至再简单点直接window.open直接下载。恰巧今天第一次经历文件流下载，代码如下

this.$http.get(`xxx`).then((resp) => {console.log(resp);// debuggerlet blob = new Blob([resp.data],{type: 'application/octet-stream;charset=UTF-8'})let contentDisposition = resp.headers['content-disposition'] || '';let filename = contentDisposition.split('filename=')[1];filename = filename.replace(/"/g,"")let link = document.createElement("a");link.href = window.URL.createObjectURL(blob);link.download = filename;document.body.appendChild(link);link.click();window.URL.revokeObjectURL(link.href);// hack for firefoxsetTimeout(function(){document.body.removeChild(link);}, 1000); }).catch((error) => {});

但是代码下载的文件一直提示文件已损坏，打不开，修复也不行，通过查阅相关资料以后才知道请求头需要加一个对象，告诉文件responseType为blob，然后就没问题了

 this.$http.get(`xxx`,{responseType: 'blob'}).then((resp) => {console.log(resp);// debuggerlet blob = new Blob([resp.data],{type: 'application/octet-stream;charset=UTF-8'})let contentDisposition = resp.headers['content-disposition'] || '';let filename = contentDisposition.split('filename=')[1];filename = filename.replace(/"/g,"")let link = document.createElement("a");link.href = window.URL.createObjectURL(blob);link.download = filename;document.body.appendChild(link);link.click();window.URL.revokeObjectURL(link.href);// hack for firefoxsetTimeout(function(){document.body.removeChild(link);}, 1000); }).catch((error) => {});

axios文件

 export const get = (url, params) => {if(oAuth.getLocalStorage('access_token') != null) {axios.defaults.headers.common['Authorization'] = 'Bearer '+oAuth.getLocalStorage('access_token');if (!params){params={};}}// return axios.get(url,{params})return axios.get(url, {params})}

又是一次小白的自我检讨，各位拜拜！

Vue的Excel文件下载相关推荐

VUE前端Excel文件下载，使用后台文件名
第1步:在后台响应response中增加: response.setHeader("Content-Disposition", "attachment;fileName= ...
vue 实现本地excel文件下载功能
今天后端开发人员给了我一个excel文件,跟我说要实现excel下载功能,就是将给的excel文件下载下来. 所以我刚开始就直接还用之前用过的方法来实现,不过有一点小瑕疵,就是名字是默认的不能修改.先 ...
Vue 下载 Excel 文件
Vue 下载 Excel 文件 Vue前端将List列表下载为Excel文件安装依赖包首先前端将List列表生成Excel文件需要下载几个依赖包. npm install -S file-save ...
Vue实现Excel模板文件的上传与下载
Vue实现Excel模板文件的上传与下载一.前言越来越多的项目开始使用前后端分离的方式来进行开发了,前端使用的vue来进行页面处理的,所以正常的文件下载和上传肯定是少不了的,因为这也是自己第一次使 ...
SpringBoot+Vue下载Excel文件流（No converter、Excel乱码）
目录介绍 No converter Excel乱码正确代码后端代码前端代码方法1 方法2 方法3 介绍后端使用SpringBoot.Mybatis Plus,前端使用Vue,进行Excel ...
vue xlsx 导入导出_只需三步vue实现excel文件数据提取并存为json数据
前言: 以前将excel数据导入到数据库是通过前端,将excel文件上传到后端,通过后端语言进行相应的加工将excel文件中的数据取出并存入数据库:从而实现数据库的存入流程.但是这也带来了一些问题,首 ...
js-xlsx vue导入excel在线预览
js-xlsx vue导入excel在线预览导入XLSX库官方地址Github 安装 npm install xlsx --s 引入 import XLSX from 'xlsx' HTML &l ...
vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
(vue)vue导出excel文件打不开，或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...

Vue的Excel文件下载

Vue的Excel文件下载相关推荐

最新文章

热门文章