Vue 导出前端数据报表为xlsx文件（通用组件）

已于 2024-06-13 14:06:08 修改
阅读量391 收藏 1
点赞数
分类专栏： Vue 文章标签： 前端 vue.js
于 2024-03-06 16:33:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohuihui1400/article/details/136479132
版权
Vue 专栏收录该内容
36 篇文章 8 订阅 ¥19.90 ¥99.00
订阅专栏
本文介绍了前端使用Vue.js导出数据报表为xlsx文件的方法。首先，通过添加file-saver、moment和xlsx依赖包来支持文件保存。然后，创建一个导出按钮组件，示例代码展示了如何导出当前所有条数或者仅导出当前页数据。最后，展示如何在表格组件中集成导出功能。
摘要由CSDN通过智能技术生成

文章目录

前言

导出数据报表基本上有两种形式，第一种是前端请求数据之后，后端将数据导出为文件，前端再将文件下载下来；第二种是前端请求数据之后，前端将数据保存到文件。

本文将讲解第二种方法，前端请求数据之后将数据渲染到表格，再通过按钮点击保存到本地文件。

一、添加依赖包

在 package.json 文件，添加以下三个依赖包：file-saver、moment 和 xlsx。

  • package.json
{
   
  "dependencies": {
   
    "file-saver": "1.3.8"
了解本专栏 订阅专栏 解锁全文
一碗情深
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
excel导入导出，包括纯前端解析，后端解析导入导出方式
03-27
excel导入导出，包括导入（纯前端解析、后端解析），导出（从前端导入到后端，生成excel导出到前端），完全就是开发excel方面所需要的，强烈推荐！！！
适用于vue2和vue3的前端导出xlsx（包含合并单元格）：树形数据格式转换成二维数组后进行自定义合并单元格。
Timi_666的博客
04-28 1353
这是一篇纯前端导出复杂表格含（合并单元格）excel的文章，适用vue2和vue3.
【vue】数据导出xlsx文件
最新发布
weixin_41059172的博客
07-05 52
前言 导出方式有很多种，但是若只需要数据导出成.xlsx文件并下载的话，只用xlsx一个插件就行 目标 1 实现数据导出excel 2 如何设置表格列宽 3 如何在文件中创建工作表 准备工作 1 安装 npm i xlsx -S 2 引入 npm i xlsx -S 二、导出excel 创建文件 登录后复制 ...
前端vue 导出 xlsx（后端只需要提供列表数据）
ingenuou_的博客
04-28 2671
前端vue 导出 xlsx（后端只需要提供列表数据）
在vue中将table数据导出为xlsx
m0_68002039的博客
09-23 532
【代码】在vue中将table数据导出为xlxs。
vue项目表格数据导出为xlsx文件
Yi_Li_Tong_Wan_DOU的博客
09-07 251
vue项目表格数据导出功能
vue将文件流转成xlsx文件
weixin_55201902的博客
12-19 1816
vue将文件流转成xlsx文件
VUE中使用XLSX插件创建excel文件
qq_52780611的博客
05-11 356
使用XLSX插件创建excel文件
vue2调用接口生成xlsx文件
weixin_47586598的博客
11-02 180
先在页面导入tool.js。调用html按钮方法。接口返回的文档流内容。
Vue中xlsx的导出。
weixin_55451254的博客
08-25 998
utils文件夹下创建xlsx.js。
Export2Excel.js 此文档专为发布文档《Vue 使用js-xlsx导出》提供下载
01-14
Export2Excel.js 此文档专为发布文档《Vue 使用js-xlsx导出》提供下载
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
本篇文章将深入探讨如何在Vue.js项目中结合`el-table`和`file-saver`库，实现前端导出分页数据到Excel的功能。 首先，我们需要了解`el-table`。它是Element UI的一部分，提供了一种灵活的方式来展示和操作表格数据...
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格）
08-30
基于xlsx、xlsx-style框架改进的vue前端页面导出功能（可导出样式、自定义样式、可导出合并单元格），适用于前端开发人员，在非分页场景下对于table的导出。 主要方法：_export_table_to_excel()，在ExportExcel.js...
vue+element并使用xlsx实现导出excel
06-14
而XLSX库则是一个用于处理Excel文件的强大工具，能够帮助开发者实现数据导入导出的功能。这篇教程将详细介绍如何在Vue.js项目中结合Element UI和XLSX库来实现Excel的导出功能。 首先，你需要确保已经安装了Vue.js、...
VUE导出Excel，两种方法，方法二带样式：文字居中，自动换行，列宽设置，单元格合并，冻结表头等
03-29
在Vue.js前端开发中，有时候我们需要将数据导出为Excel文件以便用户下载或进一步处理。在标题提到的两种方法中，我们将重点讨论如何利用SheetJS和xlsx-style库来实现更复杂的Excel导出功能，如文字居中、自动换行、...
vue使用xlsx导出excel
yangzhijie0608的博客
04-19 7243
vue导出excel 1.引入依赖：npm install xlsx@0.17.0 file-saver@2.0.5 --save 注：xlsx要指定版本不然会报错 2.封装导出的js文件 import fs from 'file-saver' import XLSX from 'xlsx' export function xlsx(json, fields, filename = '.xlsx') {//导出xlsx json.forEach(item => { for (let
vue三种方式导出报表至excel
热门推荐
weixin_42375707的博客
07-01 2万+
vue三种方式导出报表至excel
vue 前端导出xlsx文件
qq_45399948的博客
02-17 983
vue 导出xlsx
vue2使用xlsx导出表格数据保存为表格文件
weixin_59685936的博客
08-24 306
vue2使用xlsx导出表格数据保存为表格文件
vue前端导出.xlsx文件
08-23
在Vue前端中，你可以使用xlsx库来实现导出.xlsx文件的功能。首先，你需要安装xlsx库的依赖。然后，你可以创建一个导出函数，该函数将数据转换为Excel文件，然后下载到用户的设备上。下面是一个示例代码： 1. 首先，安装xlsx库的依赖。 2. 接下来，你需要在你的Vue组件中引入xlsx库。 3. 创建一个导出函数，该函数将数据转换为Excel文件。 4. 在该函数中，你可以使用xlsx库的方法来创建一个工作簿，并向工作簿中添加数据。 5. 最后，使用Blob对象将工作簿转化为.xlsx文件，并提供下载链接给用户。 以下是示例代码： ```javascript // 引入xlsx库 import XLSX from 'xlsx'; // 导出函数 export function exportExcel(data) { const workbook = XLSX.utils.book_new(); // 创建一个工作簿 const worksheet = XLSX.utils.json_to_sheet(data); // 将数据转换为工作表 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 将工作表添加到工作簿 const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 将工作簿转换为二进制数据 const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 创建Blob对象 const url = window.URL.createObjectURL(blob); // 创建下载链接 const link = document.createElement('a'); link.href = url; link.download = 'data.xlsx'; // 下载文件的名称 link.click(); // 触发点击下载 } ``` 你可以在需要导出.xlsx文件的地方调用这个导出函数，将需要导出的数据作为参数传递进去，然后就可以实现Vue前端导出.xlsx文件的功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [VUE-如何实现纯前端导出Excel文件](https://blog.csdn.net/the_renaissance/article/details/97127866)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue项目中纯前端Excel文件(.xlsx)的导入导出](https://blog.csdn.net/cwq521o/article/details/117789745)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

一碗情深

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

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

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

打赏作者

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

抵扣说明：

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

余额充值