Vue3轻松实现导出Excel文件功能

于 2024-10-03 08:23:28 发布
阅读量355 收藏
点赞数 1
分类专栏： Vue知识学习及项目开发实践 文章标签： Vue3 Excel文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bjzhang75/article/details/142642381
版权

文章目录

  • 1.前言
  • 2.安装插件
  • 3.案例
    • 3.1 定义表格数据，设置 id 选择器
    • 3.2 据所选 dom 对象生成 sheetbook
    • 3.3 写入文件
    • 3.4 生成 xlsx文件
  • 4.完整代码

1.前言

前端常用的导出 Excel的 js 库是 xlsx，但是 xlsx不能设置样式。要想设置样式，必要要结合 xlsx-style 插件一起使用，但是 xlsx-style设置样式又超级麻烦。

后来又出来个 xlsx-js-style 插件，它将xlsx 和xlsx-style进行相结合，既能导出 Excel 基础数据，又能设置表头、单元格的样式。

所以这里我们主要选择 xlsx-js-style 这个插件导出 Excel，同时借助 file-saver 库保存文件。

2.安装插件

npm i xlsx-js-style file-saver  -S

3.案例

3.1 定义表

了解本专栏 订阅专栏 解锁全文 超级会员免费看
bjzhang75
关注
专栏目录
订阅专栏
vue.js导出Excel所需要的JS文件 修改当前为当前日期
05-14
下面我们将详细探讨如何利用这两个库在Vue.js项目中导出Excel文件，并重点关注如何将当前日期添加到导出的文件名中。 首先，Blob.js是一个JavaScript库，用于在浏览器中创建和操作Blob对象。Blob是Binary Large ...
vue3纯前端导出Excel
m0_59246072的博客
06-14 636
2、在外部文件夹中定义js文件，在js文件中写入Excel导入方法（抛出“文件名”和“节点Dom”）3、在所要导出Excel的vue文件中进行调用。
vue3 导出excel表格
温柔归故里
03-05 780
vue3 导出excel表格
vue3+ant design vue实现表格导出（后端返回文件流类型导出）
最新发布
m0_62626838的博客
09-06 558
1、之前的博客介绍了，依据页面展示的table表格数据为基础展示表格导出，今天介绍下后端返回文件流来实现表格导出。
vue3导出excel
hujgg的博客
05-10 1691
const mimeMap = { xlsx: 'application/vnd.ms-excel', zip: 'application/zip' }; const resolveBlob = (res: any, mimeType: any) => { // 创建a标签，并处理二级制数据 const aLink = document.createElement('a'); const blob = new Blob([r.
vue3 导出excel文件
蓦然回首，那人却在，灯火阑珊处。
05-12 1970
vue3导出excel文件
Vue3 导出excel
A12536365214的博客
07-27 3611
xlsx。
Vue3-导出excel表格
SqlloveSyn的博客
02-17 826
页面引入xlsx和file-saver。
vue3 导出excl文件
tiankongxiao的博客
08-18 773
暂无
Spring Boot中实现列表数据导出为Excel文件
02-22
通过本文的学习，我们了解了如何使用Apache POI库在Spring Boot项目中实现列表数据导出为Excel文件的功能。这种方法不仅提高了工作效率，也为数据分析和报告制作提供了极大的便利。希望本文能帮助您更好地理解和应用...
vue+element并使用xlsx实现导出excel
06-14
而XLSX库则是一个用于处理Excel文件的强大工具，能够帮助开发者实现数据导入导出的功能。这篇教程将详细介绍如何在Vue.js项目中结合Element UI和XLSX库来实现Excel的导出功能。 首先，你需要确保已经安装了Vue.js、...
Vue+element 前端导出Excel功能工具包.zip
05-22
本知识包"Vue+element 前端导出Excel功能工具包.zip"提供了一个解决方案，它利用了Blob.js和Export2Excel.js这两个关键工具来实现在Vue+element环境中导出数据到Excel表格。 首先，让我们详细了解这两个工具： 1. ...
Vue3-导出导入excel
qq_37875849的博客
07-28 846
vue3，excel导入导出
vue3实现excel导出
David_house的博客
05-24 470
在开发一些管理系统的时候，常常会遇到表格导入导出的问题，总的来说呢，代码模板也挺固定的，仅以此博客作为记录以供参考。
vue3 导出数据为Excel表格
m0_72759446的博客
05-05 1194
title为表头的名称，key 为表头对应行的内容，type 为数据类型。excel表格的表头部分。声明一个数组，里面为。
vue3表格数据导出excel
qq_44871531的博客
02-01 545
1.定义列名 const column = [ { title: 'xx', key: 'xx', }, { title: 'xx2', key: 'xx22', }, { title: 'xx3', key: 'xx33', }, ] 2.加工列 const generateColumns = (length: number, props?: any) => Array.from({ length }).map((_, columnIndex) => (
vue3中将数据导出为excel表格
yourgrandfa的博客
01-04 5006
将vue3接口中得到的数据转换为数组，然后利用Export2Excel导出为excel表。
Vue3 导入导出Excel
u014212540的博客
03-09 2413
Vue3 导入导出Excel
vue实现导出Excel的功能
05-10
要实现导出Excel的功能，可以使用第三方库`exceljs`，它可以在Vue项目中轻松地生成Excel文件。 首先，需要安装`exceljs`库： ``` npm install exceljs --save ``` 然后，在需要生成Excel文件的组件中导入`exceljs`： ```javascript import ExcelJS from 'exceljs'; ``` 接着，在需要生成Excel文件的方法中，创建一个`Workbook`对象，并添加一个工作表： ```javascript exportExcel() { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Sheet1'); // 在工作表中添加数据 worksheet.addRow(['姓名', '年龄', '性别']); worksheet.addRow(['张三', 18, '男']); worksheet.addRow(['李四', 20, '女']); worksheet.addRow(['王五', 22, '男']); // 生成Excel文件并下载 workbook.xlsx.writeBuffer().then(buffer => { const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'data.xlsx'; link.click(); }); } ``` 以上代码中，首先创建了一个`Workbook`对象，并添加了一个名为`Sheet1`的工作表。然后，使用`addRow`方法在工作表中添加数据。最后，使用`writeBuffer`方法将Workbook对象转换为二进制数据，并使用`Blob`和`URL.createObjectURL`方法生成下载链接，并模拟点击下载链接下载Excel文件。 在模板中，可以通过按钮调用`exportExcel`方法： ```html <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> ``` 这样，就可以在Vue项目中轻松地实现导出Excel的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

bjzhang75

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

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

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

打赏作者

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

抵扣说明：

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

余额充值