vue 将列表中的数据导出为Excel文件

最新推荐文章于 2024-05-07 17:21:27 发布
最新推荐文章于 2024-05-07 17:21:27 发布
阅读量2.4k 收藏 29
点赞数 8
分类专栏： java开发实例 Vue 文章标签： vue 导出excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifei_Tang/article/details/103164140
版权

需求：
点击“导出”按钮，将列表中的数据导出为Excel文件。

1.安装依赖。

cnpm install -S file-saver xlsx
cnpm install -D script-loader

2.添加两个js文件。

在src目录下新建excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件
链接: https://pan.baidu.com/s/1dQLfTlgDQWd6XUjtpPDGpw 提取码: sqkr
在这里插入图片描述

3.在main.js中引入这两个js文件。

import Blob from './excel/Blob.js'
import Export2Excel from './excel/Export2Excel.js'

4.修改Export2Excel.js中的路径。

打开Export2Excel.js文件，修改里面的路径，正确引入Blob.js。
在这里插入图片描述

5.在组件中使用。

//导出Excel
exportExcel: function () {
   
    require.ensure([
最低0.47元/天 解锁文章
feifei_Tang
关注
  • 8
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中：将列表导出成excel表格、图片下载
m0_45382009的博客
02-20 406
功能实现：前后端配合，前端借助调用后端接口。 如果后端返回的是base64格式的url,需要转成二进制，再用blob处理； 如果后端返回的是文件流或二进制流，直接用blob处理； 前端将列表导出成excel表格（后端返回的是base64格式的url） 调用后端接口，将列表数据传给后端 后端返回一个base64格式的url地址， 解码，将base64格式的url转成二进制 创建一个a标签，把解码后的地址赋值给a标签的href属性，再给它添加下载功能 // /utils.js export defa
Spring Boot中实现列表数据导出为Excel文件
02-22
本文将详细介绍在Spring Boot框架中如何将列表数据导出为Excel文件。我们将通过Apache POI库来实现这一功能，并解释其背后的原理、提供完整的流程和步骤，以及带有详细注释的代码示例。最终，读者将能够轻松地将自己...
Vue项目中将表格数据导出为excel文件
leondong_56828的博客
01-11 1248
1.安装XLSX npm安装 npm install xlsx --save 2.封装工具 在项目的utils文件夹下面新建一个xlsx.js文件，用来存放这个工具函数。 // 下载excel功能 import XLSX from 'xlsx' /** * @param dataList 表格数据内容 array * @param fileName 文件标题。必须以 .xlsx结尾 */ export const downloadXlsx = (dataList, fileName) =>
vue实现导出excel的多种方式总结
最新发布
a404352329的博客
05-07 191
1. 前端实现方式2. 前后端配合实现方式3. 使用FileSaver.js库4. 使用html-table-to-excel库四种方法的区别。
Vue 导出列表数据成 excel
yuanchenglong的博客
03-07 891
//小编最近在做vue前端列表数据导出到excel，掉了次坑，这里记录一下操作步骤。 //1，下载依赖 npm install --save xlsx //2，编写导出方法成 js 文件，放到项目 utils 文件夹下面，js 文件名为 ExcelUtils.js 文件完整内容如下： ------------------------------------------------------------------------------- import * as XLSX fro.
Vue--将页面中数据导出excel文件（导出table表格数据）
小松的博客
08-11 917
亲测有效：成功将 table 表格中的数据导出到本地了 原文链接： https://blog.csdn.net/sisi_chen/article/details/82754240?tdsourcetag=s_pcqq_aiomsg 前台的控制台可能会报一个错：[Script Loader] SyntaxError: Unexpected identifier 应该是由于 JS 文件的问题，不过...
vue项目中列表数据导出为excel格式数据
花落微凉梦清幽的博客
08-29 2676
第一步：安装三个依赖包 npm install -S file-saver（生产依赖，则为-s） npm install -S xlsx npm install -D script-loader （开发依赖，则为-d） 第二步：引入三个文件： 我们在src目录下新建一个文件夹，例如vendor，然后把：Blob.js和 Export2Excel.js两个文件（可以去网上找这两个文件）放在...
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
在Vue项目中，当后端实现Excel导出功能并返回数据流时，前端需要进行相应的处理以将数据转化为可下载的Excel文件。本篇将详细解释这个过程。 首先，后端通常会通过HTTP响应返回一个Blob对象，Blob是Binary Large ...
vue 一键导出数据为Execl文件
07-20
vue 一键导出数据为Execl文件 适用于vue 使用场景vue
Vue2.0实现将页面中表格数据导出excel的实例
08-29
Vue2.0实现将页面中表格数据导出excel的实例 本篇文章主要介绍了Vue2.0实现将页面中表格数据导出excel的实例，非常具有实用价值，感兴趣的同学可以了解一下。 一、安装依赖 在实现将页面中表格数据导出excel的...
在Vue里如何把网页的数据导出到Excel的方法
10-14
这通常涉及到将数据转换为CSV格式，然后利用浏览器的`Blob`和`a`标签的下载功能来生成Excel文件。以下是一个简单的实现示例： ```javascript // exportToExcel.js export function transform(data, filename, ...
vue.js导出Excel所需要的JS文件
01-11
当vue.js需要导出Excel文件时，需要的Blob.js和Export2Excel.js.
Vue实现导出excel表格功能
08-27
主要介绍了Vue实现导出excel表格的功能，在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下
vue 导出表格数据
weixin_41688609的博客
09-18 174
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导出表格数据
weixin_46243213的博客
07-27 860
导出单页数据，导出所有数据
vue 表格列表实现 excel导出
qq_52697359的博客
07-23 1130
实现列表数据导出为excel 后端不提供导出接口 仅有返回的列表功能
vue数据导出Excel
ttn456456的博客
08-20 569
一、需要安装三个依赖：              npm install -S file-saver xlsx              npm install -D script-loader 二、项目中新建一个文件夹：（vendor） 里面放置两个文件Blob.js和 Export2Excel.js， 下载http://xiazai.jb51.net/201708/yuanma/Ex...
vue 实现表格导出
ikEason_的博客
08-25 1564
Vue实现excel文件导出
vue3 将数据导出为excel
03-31
Vue3本身并没有提供导出Excel的功能，但可以通过第三方库实现。 以下是一个使用js-xlsx库的示例： 1. 安装js-xlsx ```bash npm install xlsx ``` 2. 在组件中引入js-xlsx ```javascript import XLSX from 'xlsx'; ``` 3. 编写导出Excel的方法 ```javascript exportExcel() { // 构造表格数据，格式为二维数组 const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'] ]; // 创建工作簿对象 const workbook = XLSX.utils.book_new(); // 构造工作表对象 const worksheet = XLSX.utils.aoa_to_sheet(data); // 将工作表添加到工作簿中 XLSX.utils.book_append_sheet(workbook, worksheet, '表格1'); // 导出Excel文件 XLSX.writeFile(workbook, '表格.xlsx'); } ``` 4. 在模板中添加导出按钮 ```html <template> <button @click="exportExcel">导出Excel</button> </template> ``` 完整代码如下： ```javascript <template> <button @click="exportExcel">导出Excel</button> </template> <script> import XLSX from 'xlsx'; export default { methods: { exportExcel() { // 构造表格数据，格式为二维数组 const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'] ]; // 创建工作簿对象 const workbook = XLSX.utils.book_new(); // 构造工作表对象 const worksheet = XLSX.utils.aoa_to_sheet(data); // 将工作表添加到工作簿中 XLSX.utils.book_append_sheet(workbook, worksheet, '表格1'); // 导出Excel文件 XLSX.writeFile(workbook, '表格.xlsx'); } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值