Vue.js使用Blob的方式实现excel表格的下载(流文件下载)

最新推荐文章于 2024-05-31 14:32:47 发布
最新推荐文章于 2024-05-31 14:32:47 发布
阅读量434 收藏 1
点赞数 1
分类专栏： vue 后台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48371382/article/details/118890293
版权 
<el-button @click="handlerExportData">导出</el-button>

    // 导出
    handlerExportData(){
   
      getReportAllData({
   queryDate:this.time
最低0.47元/天 解锁文章
小白白哦(๑•̀ㅂ•́)و
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 前端导出、下载zip excel文件流blob_vue new blob 大量数据
2401_84182146的博客
04-27 301
源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**
Blob.js下载，vue导出表格需要用到
09-10
表格数据导出excel 在项目中创建一个文件夹 把Blob.js和 Export2Excel.js这两个文件夹放到新建的文件夹 链接: [https://pan.baidu.com/s/1sXMEce5MbTOvgf1yFvd5IQ](https://pan.baidu.com/s/1sXMEce5MbTOvgf1yFvd5IQ) 密码: qvi7 （有这两个文件） 修改exprot2Excel.js文件里面的Blob.js路径，
vue.js中导出Excel表格的案例分析
10-16
主要介绍了vue.js中如何导出Excel表格,在项目中经常会遇到这样的需求，今天小编分步骤通过实例代码给大家详细介绍，需要的朋友可以参考下
vue blob实现自定义多sheet数据导出到excel文件
最新发布
BluerCat的博客
05-31 367
前端或后端导出文件，可以看自己需求。数据量比较少的时候，或页面展示的是所有数据的时候，使用前端js直接导出文件，比较方便，因为不用重查接口，减少了交互。若数据量比较大，或页面展示的是分页时，推荐走后端接口导出文件，因为没法拿到完整的数据，而且大数据量从接口返回到前端，对前端负担也不友好。背景：最近vue项目遇到一个需求，就是需要将多个表格分成不同sheet页并导出，之前的工具类只能导出一个sheet页，所以在原有的基础上，调整一下，让它支持多sheet导出。
js使用Blob的方式实现excel表格的下载(流文件下载)
Radish
11-21 9374
js使用Blob的方式实现excel表格的下载(流文件下载) js前端下载工具 getToken 为了获取token, 不需要的可以去除 downLoadXlsx中的data, 是数据的搜索参数(根据参数搜索出的结果进行导出), 不需要搜索参数的可以去除data import axios from 'axios' import { getToken } from '@/utils/auth' const mimeMap = { xlsx: 'application/vnd.openxmlform
【导出Excel】Vue实现导出下载Excel文件（blob文件流）--亲测可用
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-13 6672
如果用以上方法下载的文件打开是乱码，请对ajax请求设置。// result 为arrayBuffer类型。
js将后端返回的文件流导出为excel，并自定义下载文件名
铁锤妹妹的博客
12-13 1万+
后台管理系统，常会出现导出excel表格功能；点击导出按钮，请求后端接口，需要将接口返回的`文件流`导出为excel，实现前端下载excel文件。
前端将后端返回的文件流转为excel并下载
m0_72642282的博客
09-09 4966
以上就是我的总结办法 希望可以一起进步学习 如果可以的话可以关注我一起学习。所以 在写接口的时候 要注意加上 responseType: 'blob'首先自己封装了一个方法 放在了utils里面。在遇到后端给前端返回的一个文件流的注意事项。在调用接口 我是有封装 axios。接下来就是在组件中去调用。也算是自己的一个总结吧。其次就是 调用接口了。
使用blob 实现 js下载word、Excel等文件
rock_23的博客
01-31 6226
我之前有写过一篇就关于vue下载文件的，那个是很好用，但那个是基于我项目中是比较合适的，但实际上，项目中还有一个方法就是使用js中Blob，这个是什么那，其实无论是fetch还是axios都有提供Blob的功能，这个就是把后端返回来的数据文本或者二进制流的数据，转换成字节，返回成一个新的blob对象，再去进行下载。 代码示例： this.$api.Business.download({}, res => { // 我这个是下载的word文档，第二个参数会这样写的 cons
Vue通过Blob对象实现导出Excel功能（2种方法）
好记性，不如烂键盘。
08-16 4549
控制台输出的可以看到是个正确的Blob对象，这就说明我们的配置是对的。'responseType'表示的是服务器响应的数据类型，可以是'arrayBuffer'、'blob'、'document'、'json'、'txt'、'stream'，默认为json。但是有些需求因为数据量太大，成千上万条数据，所以是需要后端拼接，然后输出二进制流文件，然后前端直接下载，这次我们谈谈后者的做法。后端最好也要配置response头的content-type为对应的类型。扩展名----------MIME类型。
前端开发-基于js+vue的excel表格上传下载前端实现.zip
04-02
这个压缩包文件"前端开发-基于js+vue的excel表格上传下载前端实现.zip"显然提供了使用这两种技术来实现在Web应用中处理Excel表格上传和下载功能的示例代码。以下是关于这个主题的详细知识点： 1. JavaScript（JS）...
vue导出excel(Blob.js/Export2Excel.js).rar
05-27
这个库的工作原理是先将表格数据转换为二维数组，再通过Blob.js生成Blob对象，最后通过HTML5的a标签的download属性实现文件下载。 以下是使用这两个库的基本步骤： 1. 安装依赖： 在你的Vue项目中，你需要通过npm...
vue.js导出Excel所需要的JS文件
01-11
总结起来，Vue.js结合Blob.js和Export2Excel.js能方便地实现Excel文件的导出，让开发者无需离开浏览器环境就能处理数据的导出需求。然而，选择合适的库应根据实际项目需求，比如数据复杂度、性能要求和兼容性等因素...
数据表格导出之Blob.js和Export2Excel.js下载
04-05
它依赖于Blob.js来生成二进制数据流，并利用浏览器的FileSaver.js（虽然这里没有提及，但通常会配合使用）来实现文件保存到本地的功能。这个库通常接收一个二维数组，这个数组的每个元素代表Excel表格的一行，数组内...
vue.js导出Excel所需要的JS文件 修改当前为当前日期
05-14
在这个场景下，Vue.js可以借助外部库如Blob.js和Export2Excel.js来实现这个功能。下面我们将详细探讨如何利用这两个库在Vue.js项目中导出Excel文件，并重点关注如何将当前日期添加到导出的文件名中。 首先，Blob.js...
1分钟了解js如何实现下载文件功能的4种方式
热门推荐
qq_37174991的博客
11-17 2万+
1、a标签下载 —可以直接下载txt、png、pdf、exe、xlsx等类型文件。4、location.href 下载。3、window.open下载。2、new Blob下载。
【Vue】vue2请求axios后台接口下载Excel表格文件 实战教程
qq_51055690的博客
09-05 3652
vue请求后台下载excel表格 代码可直接拿去用,参考多个作者文章 实战教程 保姆级教程
blob excel文件导出
灰太狼-铜豌豆的博客
04-15 2846
vue 项目中excel文件导出： exportData(){//点击方法名称 jjrExport(this.years).then(res=>{//this.years为请求参数 console.log(res); consttype="application/vnd.ms-exce...
vue 下载excel流文件
01-28
下载Excel流文件是指通过Vue前端框架实现在网页上实时下载Excel文件的功能。为了实现这一功能，可以通过以下步骤： 1. 在Vue组件中使用axios或者其他网络请求库，向后端发送请求获取Excel文件流数据。 2. 后端接收到请求后，根据接口要求生成Excel文件，并将文件流返回给前端。 3. 前端接收到Excel文件流数据后，通过Blob对象和URL.createObjectURL方法创建可供下载的Excel文件链接。 4. 在Vue组件中使用a标签或者其他方式，将Excel文件链接绑定到下载按钮或者表格中。用户点击下载按钮即可下载Excel文件。 在编写相关代码时，需要注意文件流的处理、请求的发送和响应的处理。具体示例代码如下：（以axios为例） ```javascript // Vue组件中发送请求 <template> <div> <button @click="downloadExcel">下载Excel</button> </div> </template> <script> import axios from 'axios'; export default { methods: { downloadExcel() { axios({ method: 'get', url: 'http://your-backend-api-url/export-excel', responseType: 'blob', // 告诉axios返回的数据是二进制流 }) .then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'excel.xlsx'); document.body.appendChild(link); link.click(); }) } } } </script> ``` 以上就是使用Vue下载Excel流文件的基本方法。通过这种方式，用户可以在网页上快速方便地下载后端生成的Excel文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值