vue使用axios下载文件流为excel文件

最新推荐文章于 2023-01-16 21:27:18 发布
原创 最新推荐文章于 2023-01-16 21:27:18 发布 · 1.3k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍如何使用Vue结合axios实现从服务器下载Excel文件的功能。首先配置axios的responseType为blob，确保文件正确下载；然后通过Blob对象创建URL并利用a标签触发文件下载，最后列出支持的不同文件类型。

@[toc] vue下载文件流为excel文件

1.配置axios的responseType

配置axios的responseType为blob类型(必须配置，否则下载的文件会乱码)

axios.request({
    url: 'http://xxxxx/export',
    method: 'post',
    responseType: 'blob',
    data: {xxx: xxx}
})

2. 创建一个新的url，此url指向新建的Blob对象

     if (!data) { //data为axios返回的文件流
       this.$message.error('下载失败，解析数据为空！')
       return
     }
     // 创建一个新的url，此url指向新建的Blob对象
     //type这里因为我要下载excel文件，所以设置的是application/vnd.ms-excel;charset=utf-8
     let url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.ms-excel;charset=utf-8"}))
     // 创建a标签，并隐藏a标签
     let link = document.createElement('a')
     link.style.display = 'none'
     // a标签的href属性指定下载链接
     link.href = url
     //setAttribute() 方法添加指定的属性，并为其赋指定的值
     // 后缀格式.csv/.xsls要和需要和后端返回格式相同，这里以.csv为例
     link.setAttribute('download',   '文件名称.xlsx')
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)

3.Blob对象支持的类型列表

type拓展名
application/vnd.ms-excelxlm/xla/xlc/xlt/xlw
text/htmlhtml
application/msworddoc
application/vnd.openxmlformats-officedocument.wordprocessingml.documentdocx
application/vnd.openxmlformats-officedocument.spreadsheetml.sheetxlsx
video/mpegmp2/mpa/mpe/mpeg/mpg/mpv2
audio/mpegmp3
text/plaintxt,普通类型
application/pdfpdf
application/octet-stream*/bin/class/dms/exe/lha/lzh
application/zipzip
image/jpegjpeg / jpe / jpg
image/pngpng
image/gifgif
image/svg+xmlsvg
image/tifftiff
application/vnd.ms-powerpointppt
vue项目中导出excel表格数据
weixin_30407099的博客
07-05 1086
一、需要安装三个依赖： npm install -S file-saver xlsx npm install -D script-loader 二、项目中新建文件夹（文件名excel） 里面放置两个文件Blob.js和Export2Excel.js。 下载链接：https://pan.baidu.com/s/1fjSFq-X...
vue的导出
m0_47687804的博客
05-17 428
Vue前端页面的导出 先安装依赖 npm i xlsx file-saver --save // 两者搭配一下 安装好之后在main.js中引入并使用 import XLSX from 'xlsx' Vue.prototype.XlSX = XLSX 创建所需要的js文件 import XLSX from 'xlsx' export default function Excel(headers, data, fileName = '导出结果.xlsx') { const _headers = hea
纯前端Vue框架实现Excel按需导出（按所选择列进行导出）
m0_67750137的博客
01-16 1059
包含按列导出+表格带样式+表格合并+表格嵌套表格+中英文两个sheet
vue 数据导出
weixin_58224449的博客
11-14 1792
注意：下载接口需要拼接 responseType: 'blob'一、在目录下面准备mixins文件里面建file.js文件。1、点击导出按钮，调用后台接口获取数据fid。3、把文件流传给封装的下载方法。2、调用下载接口，获取文件流。
vue导出
九亿宅男的梦的博客
01-08 403
<el-button :loading="isDownloading" type="primary" @click="transfersClick">导出excel</el-button> transfersClick () { this.schData.filter_fieldSix = this.selectData.map((obj)=>{return "'"+obj.id+"'"}).join(","); if(this.isDownload.
vue使用axios实现excel文件下载的功能
10-15
总结起来，Vue结合axios实现Excel文件下载的关键步骤包括：设置axios请求的responseType为'blob'以获取文件流，创建Blob对象指定文件类型，根据浏览器类型选择合适的下载方式，以及封装函数以实现复用。这个过程涉及...
vue+axios实现文件下载及vue中使用axios的实例
10-17
下面将详细介绍如何使用 Vue 和 Axios 实现文件下载，以及在 Vue 项目中配置 Axios 的方法。 ### 文件下载流程 1. **接口准备**：首先，你需要与后端开发人员协调，确保他们提供的接口已经正确设置了响应头（`...
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
总之，通过设置axios的`responseType`为`blob`，配合FileReader API，我们可以成功地处理服务器返回的二进制流并实现文件下载。同时，需要注意浏览器的跨域策略对HTTP响应头的影响，确保后端正确设置`Access-Control...
Vue+axios+WebApi+NPOI导出Excel文件实例方法
10-16
通过以上步骤，我们实现了Vue.js前端利用axios请求WebApi，WebApi通过NPOI生成Excel文件流，前端接收到流后转换为Blob，最终创建下载链接供用户下载。这种方案兼顾了数据安全、灵活性和兼容性，适用于大多数导出...
Vue实现导出excel表格功能
08-27
主要介绍了Vue实现导出excel表格的功能，在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下
vue 文件导出
jie_ge_a的博客
04-27 557
vue 文件导出 首先创建一个tools.js import axios from "axios"; // 导出功能 export function exportExcel(url, options = {}, title) { return new Promise((resolve, reject) => { axios({ method: "get", url: process.env.ADMIN_API + url, // 请求地址 header
vue导出数据
mywxtjj的博客
10-09 177
var fObj = document.getElementsByTagName("iframe"); if (fObj.length > 0) { for (var index = 0; index < fObj.length; index++) { document.body.removeChild(fObj[index]); } } var f = document.createElement("iframe"); f.style.p...
office文件所对应的的 Content-type类型Content-type类型总结
灰海
08-26 2715
文件后缀 MIME TYPE .doc application/msword .dot application/msword .docx application/vnd.openxmlformats-officedocument.wordprocessingml.document .dotx application/vnd.openxmlformats-officedocument.wordprocessingml.template .docm application/vnd.ms-word.documen
vue导出功能
qq_39010188的博客
08-30 2669
表格导出功能，支持多级表头导出，该导出只能导出当前页数据，就是说后台给前端多少数据就能导出多少数据，可以设置导出样式。
在vue中进行导出操作
MrLi_IT的博客
11-03 3874
一、背景 因公司需要，我需要在原有的代码上进行迭代操作，需要对导出进行权限过滤，header中添加token以及UID等一系列的参数用于拦截信息，但由于请求之前是使用的window.location.href="xxxxxx"进行的跳转下载，所以无法在此基础上进行头文件参数添加操作，并且之前并没有对get请求的参数进行统一处理 二、解决方法 1、遇到这个问题我首先想到的就是使用ajax方法，在请求之前进行header参数的添加，话不多说我们开始写代码 运行 ...
vue 导出表格数据
weixin_41688609的博客
09-18 258
1.先搞安装xlsx npm i xlsx --save-dev 2.接下我们就要处理数据了 <template> <view> <button @click="exportData">导出</button> <view v-for="item in tableTitle"> {{ item.title }} </view> <view v-for="item in tableLi
vue项目经验：导出Word文件（数据流方式）
weixin_45031595的博客
05-18 8880
安装依赖：jquery 和file-saver npm install jquery file-saver --save jquery.wordexport.js // 导入js文件 import $ from 'jquery' import saveAs from 'file-saver' if (typeof $ !== "undefined" && typeof saveAs !== "undefined") { (function ($) { $.fn
vue axios下载excel的blob文件流
最新发布
01-04
### 使用 Vue 和 Axios 下载 Excel 文件的 Blob 数据 为了实现通过 Vue 和 Axios 下载 Excel 文件，可以按照如下方法构建代码逻辑： 在组件的方法部分定义 `exportExcel` 函数用于发起请求并处理响应的数据。当服务器返回带有二进制数据的响应时，将其转换成浏览器能够识别的 URL 并创建一个隐藏链接触发下载行为。 ```javascript exportExcel() { this.$http.get('/api/export/excel', { // 替换成实际接口地址 responseType: 'blob' // 设置响应类型为 blob }).then(response => { const content = response.data; const blob = new Blob([content], { type: "application/vnd.ms-excel;charset=utf-8" }); // 创建 Blob 对象[^1] if (navigator.msSaveBlob) { // IE 浏览器兼容处理 navigator.msSaveBlob(blob, `data_${new Date().toISOString().slice(0, 10)}.xls`); } else { const url = window.URL.createObjectURL(blob); // 将 Blob 转换为可访问资源 const aLink = document.createElement('a'); aLink.style.display = 'none'; aLink.href = url; aLink.download = `data_${new Date().toISOString().slice(0, 10)}.xlsx`; // 设定下载文件名 document.body.appendChild(aLink); aLink.click(); // 执行点击事件以启动下载过程 window.URL.revokeObjectURL(url); // 清理临时创建的对象 URL document.body.removeChild(aLink); // 移除辅助 DOM 元素 } }); } ``` 此段代码展示了如何利用 JavaScript 的原生特性来完成从获取到保存整个流程的操作，并且考虑到了不同浏览器之间的差异性支持情况。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雾里桃花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值