vue实现导出excel，pdf功能

最新推荐文章于 2025-03-26 15:52:01 发布

橙子微笑

最新推荐文章于 2025-03-26 15:52:01 发布

阅读量1.3k

点赞数 1

分类专栏： VUE 文章标签： html html5 jquery

本文链接：https://blog.youkuaiyun.com/m0_44949211/article/details/121650907

版权

本文介绍如何在Vue项目中实现Excel和PDF的导出功能。通过接收后端返回的文件流，利用a标签结合Blob对象的不同type属性，轻松完成文件导出，经测试已验证有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现导出excel，pdf功能

注：代码中res就是后端返回的是文件流，前端使用a标签实现导出excel，pdf，导出pdf跟excel的区别在于new blob对象时的type类型不同
下面代码是固定写法，可以直接使用，亲测有用哦

 //导出pdf跟excel的区别在于new blob对象时的type类型不同
 const blob = new Blob([res],{
   type: 'application/pdf'});
 const blob

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

橙子微笑

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue 采用blob下载后端返回的excel流或者pdf流文件乱码问题解决方案

weixin_44897405的博客

11-28

4047

我大意了啊，没有闪~~~~年轻人不讲5的，这真的是个坑。。。网上有很多pdf或者excel转后台返回的流文件方法，但是下载或者预览就特么炸裂了，打开或者预览全是乱码，现在我来填坑。。。预览pdf如下图：这个charset=utf-8一定要添加，不添加可能乱码，如果后台返回的格式里面有，那就没必要了！代码： const binaryData = [] binaryData.push(res.data) // 获取blob链接 this.pdfUrl = window.URL.createObject

Vue+element项目实现列表数据导出excel文件

weixin_54446335的博客

07-15

1054

点击【导出】按钮，导出当前列表查询出来的所有数据到excel表格。

1 条评论您还未登录，请先登录后发表或查看评论

vue项目表格导出为Excel和PDF

02-23

1564

2,新建exportExcel.js文件。2, 新建exportPdf.js。3,在需要导出的页面里面写。4,在需要导出的页面使用。3,main.js挂载。

前端将请求到的文件流如何导出excel,pdf

最新发布

m0_66599185的博客

03-26

276

/下载完成移除元素。···当导出为excel表时经常excel打不开，说文件名或扩展名不对，这时从disposition里面拿是解决办法。//释放掉blob对象。let fileName = '导出文件.xlsx';this.viewformData={//导出。

vue导出PDF(vue2，插件：pdfmake ，表格)

weixin_46965237的博客

04-28

4427

vue导出PDF(vue2，插件：pdfmake，表格)

vue-实战记录-前端导出excel文件、pdf文件、word文件

weixin_40332446的博客

07-12

2040

vue-记录-前端导出excel文件、pdf文件、word文件

Vue框架下如何实现导入导出Excel、PDF？SpreadJS有妙招！

需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~

11-16

1385

SpreadJS v13.2正式版下载项目需求：开发一套基于Vue框架的工程档案管理系统，用于工程项目资料的填写、编辑和归档，经调研需支持如下功能： Excel报表的导入、导出 PDF文件的导出打印表格经过技术选型，项目组一致决定通过表格组件SpreadJS来实现。以下是实现Excel报表的导入导出、PDF导出、打印表格的一些思路，供大家参考：环境介绍后台：Spring Boot 2.x 前台：vue、vue-element、webpack、iview、Vuex.js 2.x 组.

vue实现word，pdf文件的导出功能

12-09

vue实现word或pdf文档导出的功能，我的项目是：后端返回一个文档流(下图)，然后前端对文档流做处理进行下载，代码如下： import axios from 'axios'; axios.get(`url`, { //url: 接口地址 responseType: `...

Springboot vue导出功能实现代码

08-19

Springboot Vue 导出功能实现代码知识点总结一、Springboot Vue 导出功能实现代码概述本文主要介绍了 Springboot Vue 导出功能实现代码，通过示例代码详细介绍了如何使用 Vue 2 和 Springboot 2.x 实现导出功能...

Vue+element 前端导出Excel功能工具包.zip

05-22

本知识包"Vue+element 前端导出Excel功能工具包.zip"提供了一个解决方案，它利用了Blob.js和Export2Excel.js这两个关键工具来实现在Vue+element环境中导出数据到Excel表格。首先，让我们详细了解这两个工具： 1. ...

html实现pdf导出excel表格,一篇文章详解：Vue框架下轻松实现Excel、PDF导出

weixin_36028876的博客

06-10

461

项目需求：开发一套基于Vue框架的工程档案管理系统，用于工程项目资料的填写、编辑和归档，经调研需支持如下功能：Excel报表的导入、导出PDF文件的导出打印表格经过技术选型，项目组一致决定通过表格组件SpreadJS 来实现。以下是实现Excel报表的导入导出、PDF导出、打印表格的一些思路，供大家参考：环境介绍后台：Spring Boot 2.x前台：vue、vue-element、webpac...

Vue项目导出为PDF的解决方案.pdf

08-20

在实际应用中，可能用户希望将系统中一个页面展示的所有数据报表，用PDF的文件格式下载下来，以便于其他用途。但是在系统中应用到的大部分可以绘制数据报表的插件或组件，只能做到将一个数据报表以其他的文件形式（如：图片等）导出出来，无法将多个报表呈现在一个文件中。本篇描述的就是，在Vue 2.0 的项目中，遇到类似的需求，如何将需要的部分页面内容导出为PDF文件

VUE 表格导出PDF格式

m0_71966801的博客

07-03

684

如果想添加自己的水印。

vue 前端导出word、excel、pdf

weixin_43864172的博客

07-17

9498

项目中有一个新需求，需要将页面导出为pdf、word、excel三种格式，用户可根据需要选择下载。查找了很多方法，最终选择了别人已经写好的插件。三种格式都需要使用的插件有FileSaver npm install --save xlsx file-saver 一、导出excel文件 excel文件导出的格式是最符合要求的，数据表格分类清晰，无乱码和错位现象。 1.首先确认vue项目已经成功搭建...

vue+blob文件流下载导出world、excel、pdf文件

sxs7970的博客

08-13

1668

function exportMethod(data) { axios({ method: 'get', url: 'https:xxx/xxx' + data.url,//接口地址 params: data.data,//如果是post参数放到请求体data中 responseType: 'blob', headers: { 'Content-Type': 'application/json' } }).then((res) =>

vue 下载文件时，设置返回值类型responseType为‘blob‘无效的问题

xiyu_webSE的博客

02-22

2108

vue 下载文件时，设置返回值类型responseType为‘blob‘,但是未生效问题解决

前端使用vue实现导出pdf

weixin_46377975的博客

09-12

6455

前端使用vue实现导出pdf 使用html2canvas和jspdf插件实现这个方式是通过html2canvasl来把html页面转换成图片，然后再通过jspdf将图片转换为pdf文件这个方法有个非常不好的缺点生成的pdf质量不高，画面有些模糊，失真严重如果在分页的地方有图片的话，可能会把图片也给你一分为二了大概就会是下面这样子，每次分页都会无情的给你隔开，管你是啥玩意 1. 安装插件先安装第一个 html2canvas 插件，这个作用是实现将 html 页面转换成图片在你的控制住台

Excel怎么转PDF格式？这些方法值得收藏

10-24

633

Excel文件相信对大部分小伙伴来说都不陌生吧，我们经常都是需要使用它制作一些数据的制作与分析，有时候我们还需要将这些表格数据打印出来。那你们平常是怎么打印的呢？是直接以Excel格式进行打印吗？其实为了能拥有更好的打印效果，我们可以将Excel转为PDF格式后，再进行打印。那你们知道Excel怎么转PDF吗？还不知道怎么转的小伙伴，快点往下看文章吧。方法一：使用全能PDF转换助手将Excel转为PDF这款软件它能够辅助我们进行PDF格式的转换，这其中包括了PDF与Excel、CAD、TXT、HTML等多种

Vue 文件流下载和（PDF）预览

paopao_pop的博客

04-16

695

然后我就兴奋的去开发了，然后问题就出来了，因为指定 responseType 所以拿到的后端数据通过 axios 之后全部变成了 Blob 对象，然后我就找不到了我的状态码了 T_T。解决办法很奇葩，用到了 FileReader 对象解决，只要解析 Blob 数据能成功，就取出 code 码提示，一旦报错，就是文件流了，哈哈哈哈哈哈。前端下载文件流的方法很简单，axios 的请求方式请求头增加 responseType 为 blob 响应体转成 Blob 对象。我最近需求是后端成功会返回文件流。

Vue导出Excel功能实现的详细教程

以上知识点覆盖了前端Vue导出Excel功能的实现过程，以及实现该功能所需依赖的库和技术。文档的编写者作为全栈架构师，不仅提供了技术实现的步骤，还承诺了代码的可测试性和可靠性，这对于其他开发者来说是一个宝贵的...