vue xlsx导出 excel文件过大_Element+js-xlsx实现组件化excel导入导出

最新推荐文章于 2024-08-06 14:48:00 发布
最新推荐文章于 2024-08-06 14:48:00 发布
阅读量1.1k 收藏
点赞数 2
文章标签： vue xlsx导出 excel文件过大
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39896256/article/details/113629239
版权
本文介绍了如何在Vue项目中利用js-xlsx库实现前端的Excel导入和导出功能，减轻后端负担。文章通过示例展示了从安装到实际使用的完整流程，并测试了不同数量数据导出的性能，即使导出1000条数据也保持流畅，且源码可供下载参考。
摘要由CSDN通过智能技术生成

前言：

以前excel都是使用后端java或者php等语言实现数据的导入和导出，现在可以通过vue的前端项目实现表格的导入和导出，减少后端的压力。同时也可以让前端更好的助力后端。

是原始(很棒)SheetJS / xlsx项目的分支。它被扩展以使单元格格式可以从.xlsx工作簿中读取和写入。

支持读取的格式：

Excel 2007+ XML格式(XLSX / XLSM)Excel 2007+二进制格式(XLSB)

Excel 2003-2004 XML格式(XML" SpreadsheetML")

Excel 97-2004(XLS BIFF8)

Excel 5.0 / 95(XLS BIFF5)

OpenDocument电子表格(ODS)

支持写入格式：

XLSX

CSV(和常规DSV)

JSON和JS对象(各种样式)

通过js-xlsx实现简单的数据的导入和导出。

安装

Npm安装，在项目根目录执行

npm install xlsx –save

实现安装

例子

1、 导出

acafb5a25ab23781138a656ddc189cfd.gif

2、 导入

0cf6fa3debc0784f9572fadd813fad22.gif

测试结果：

1、测试导出10条用户数据大小17kb、未卡顿。

2、测试导出50条用户数据大小28kb、未卡顿。

3、测试导出1000条用户数据大小278kb、未卡顿。

源码获取：

由于源码内容太多您可以访问euiadmin.com体验并下载源码进行查看。

导入组件位于：components/module/excel/ImportExcel.vue

导出组件位于：components/module/excel/OutEXcel.vue

组件已经提供注释，如有不解你也可以在今日头条给我留言。

结语

EuiAdmin致力于减少前端开发者的开发时间，特别是减少在JavaScript库的使用时间，你可以通过使用EuiAdmin获取强劲的tinymce富文本编辑器、vue-cookies的集成使用、美丽的Echarts图表、js-xlsx实现excel图表导入导出等丰富功能。

喜欢可以"点赞、关注、评论"三联一波

weixin_39896256
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+element-plus - 最新详细实现将表格Table组件 “所见所得导出“ 为excel(xls/xlsx)电子表格文件，表格中的图片图像、图标等媒体资源完美导出显示（详细示例代码）
高级前端工程师
07-22 3847
vue3，nuxt3，element plus，表格组件，Table，el-table，导出，下载，excel，电子工作簿，xls，xlsx，将表格导出成xls，如何把表格原封不动的导出成excel，保留图片，带图片，图标，如何导出包括含有图片的Excel表格，图片和表格数据导出excel，把表格导出成excel格式，表格内的图片一起导出，vue3导出图片和数据到Excel，可导出图片，导出图像到Excel，网页上的图片怎么能导出到xls表格中，显示图片url链接，图片太多导出失败，图片会超出单元格，图片不
Vue中如何实现Excel导入导出
m0_73975292的博客
10-25 6264
在vue-element-admin中，大佬已经封装好了Excel的导入导出方案，我们需要引入借鉴,拷贝 vue-element-admin 中提供的 excel 导入功能组件到自己项目中。因为接口中返回的数据中的key是英文，而我们期望导出的表头是中文，所以提前准备中文和英文的映射关系。按照接口的要求，把 excel 表格中经过插件处理好的数据处理成后端接口要求的格式。数据格式转换：将 excel 解析好的数据经过处理后，转成可以传给接口调用的数据。按接口要求，处理excel导入的数据。
bootstrap table 怎么导出表格图片_Vue导出Excel表格
weixin_39731623的博客
12-28 547
示例demo 代码示例建立项目vue init webpack excel-export 建立excel-export项目 cd excel-export 进入excel-export文件夹下 npm install 安装依赖 npm run dev ...
Vue 导出Excel，大量数据分Sheet存储数据，每页N条数据
授人以渔的博客
12-20 1400
1.首先引入相关组件 import FileSaver from 'file-saver'; import XLSX from 'xlsx' 2.我采用的方式是后端获取数据并处理好内容（一个格式化信息等），返回List传递到前台进行导出。 this.$axios.post('/api/downLoad/Excel').then((response) => { var result = response.data;
Vue导出表格数据、及xlsx-style复杂样式编辑
最新发布
on1yLX的博客
08-06 720
2.1 方案一：修改依赖包源码，将\node_modules\xlsx-style\dist\cpexcel.js 807行 的 var cpt = require(’./cpt’ + ‘able’);xlsx-style并没有封装行高设置，但是xlsx中是有哒，如果需要xlsx-style的样式又需要修改行高的话。方法及 相关参数 进行覆盖，其实就是把xlsx中的行高逻辑代码搬过来。需要去依赖包中，将xlsx-style下的xlsx.js中的。方法，用xlsx依赖包下的xlsx.js中的。
vue 导出大数据量excel 页面 loading 不生效
狗狗狗亮的博客
04-12 1790
如图，表格里面有9W+数据。在执行导出的时候页面会出现卡住的假象，并且loading改成了true，但并没有加载动画。 开始这样写的，打印出的spinning 已经是ture ，但加载动画并没有执行。 const exportExcelClick = () => { const Header = [...]; //表头 const Val = [...]; //表数据 sdata.spinning = true; // 加载中 console.
vue2 Excel 导出数据量太大导致OOM问题及解决方案
sout-lanys
03-07 2154
当点击导出Excel，会根据查询条件导出数据，比如，查询时间，会随着时间间隔的增大，数据量也会变多，已导出就是全部，若数据量相对较少，会导致卡顿或者请求超时，若数据量非常多，会导致请求超时或服务器宕机（卡死）。总的来说是可以解决了问题，但是感觉方案不是很好，若大佬们有更好的解决方案，欢迎在评论区提出。
vue xlsx导出 excel文件过大_前端vue+element ui实现数据表格导出excel
weixin_42553588的博客
02-04 1087
前端开发过程中常用的功能，数据导出excel，本文代码demo采用前端框架vue+element ui来实现，安装依赖 npm install --save xlsx file-saver在需要用到的组件中引入import FileSaver from "file-saver";import XLSX from "xlsx";代码如下： methods:{ exportExcel () { var...
vue导出excel并修改表头样式
10-29
在Vue.js应用中导出Excel并修改表头样式是一个常见的需求，这主要涉及到前端数据处理、Excel文件生成以及样式定制等方面的知识。以下是一份详细的技术指南，帮助你理解和实现这个功能。 1. **Vue.js基础知识**：Vue...
vue中导出Excel表格的实现代码
10-17
在Vue项目中，导出Excel表格是常见的功能，特别是在后台管理系统中，为了方便用户将大量数据保存为本地文件。本文将详细介绍如何在Vue环境中实现这一功能。 首先，我们需要安装必要的依赖库。`file-saver`用于文件...
vue导入导出excel文件
04-16
在这个场景中，提到的"vue导入导出excel文件"很可能是通过JavaScript库来完成的，因为标签中提到了"js"。 JavaScript库如`xlsx`或`file-saver`可以帮助我们实现Excel文件的处理。`xlsx`库用于读取、创建和修改Excel...
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JAVA导出数据到excel中大数据量的解决方法
05-04
web项目中需要有将数据导出excel的操作需求 使用html格式导出方法，但在导出时，根据最大行数重新建立新的excel文件； 数据从数据库取出使用纯jdbc方式读数据，边读边向文件中写； 待所有数据写完，将各个小excel文件进行打包，输出到输出流中。 一小部分说明 见 http://blog.csdn.net/lisen1987/article/details/16857359
vue导出xlsx表格步骤以及数据太多，分表导出
polarisya的博客
10-10 1461
【代码】vue导出xlsx表格以及数据太多，分表导出。
vue项目导出excel ,文件过大导致请求超时的处理方法
eight_eyes_fish的博客
02-27 1600
一、因为文件过大，请求时间较长，就会产生请求超时的情况，处理方式是可以分为三个接口，接口1用来获取id值，接口2利用id值发起请求，询问是否准备好下载，如果没准备好，则没隔一秒再次发起请求询问是否准备好，直到准备好为止，清除定时器，使用接口3发起下载。
vue导出大量数据的表格方法
qq_34568657的博客
05-07 445
导出表格
前端导出大量数据到Excel不卡顿的解决方法？
weixin_48373171的博客
07-12 812
好了，以上就是 前端导出大量数据的处理方法之一，如果需要用element-ui组件库的el-table导出数据，请看。，希望对你有帮助，不喜勿喷！
纯前端vue如何实现10万+数据分批导出excel表格到一个xlsx文件方法(含详细代码)【收藏】
天天打码-16年老码农
02-06 2660
最近在做一个项目二次开发，有40万的用户数据需要导出到excel里，如果数据有，如何导出excel表格呢，这么大的数据如果一次导出对于服务器或者网络都是一个及大的考验，不太可能一性导出，要么资源被用完，要么网络超时，因为导出的数据excel文件可能有大几M或上百M，对于后端来说大量数据查询读取，特别是10万数据里如果涉及到其他表二次查询，基本上是卡死超时。先说说后端PHP实现导出excel方式：无非用PhpOffice\PhpSpreadsheet组件来导出，但是对于大数据来说一次导出也是吃力。
vue项目element 表格导出Excel,echarts导出png图片
番茄酱的博客
02-29 2511
// echarts图表容器 <div class="con-middle" id="shade2" v-show="type3 == 'D'"></div> //element表格 <div class="con-middle" v-show="type3 == ''" id="out-table3"> <el-table ...
vue xlsx 导出excel
08-03
Vue.js是一款流行的JavaScript框架，而xlsx则是一款用于处理电子表格文件的库。通过结合使用Vue.js和xlsx，我们可以很方便地实现在Vue项目中导出Excel文件的功能。 要使用vue-xlsx导出Excel，首先需要在Vue项目中安装所需的依赖。可以使用npm或yarn命令来安装vue-xlsx库。 安装完成后，我们需要在要使用导出Excel功能的Vue组件中引入vue-xlsx。可以使用import语句将vue-xlsx库引入到当前组件中。 接下来，在Vue组件的methods中定义一个导出Excel的方法。在该方法中，我们可以使用xlsx库提供的函数来创建工作簿和工作表，并填充相关数据。 最后，我们可以调用导出Excel的方法来生成并下载Excel文件。可以使用xlsx库提供的函数将工作簿转换为二进制数据流，然后使用浏览器的下载功能来保存文件。 以下是一个简单的示例代码： ``` <template> <div> <button @click="exportToExcel">导出Excel</button> </div> </template> <script> import { writeFile } from 'xlsx' export default { methods: { exportToExcel() { // 创建工作簿和工作表 const workbook = XLSX.utils.book_new() const worksheet = XLSX.utils.aoa_to_sheet([ ['姓名', '年龄'], ['张三', 20], ['李四', 25], ['王五', 30] ]) // 将工作表添加到工作簿 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') // 将工作簿转换为二进制数据流 const excelData = XLSX.write(workbook, { type: 'binary' }) // 下载Excel文件 const fileName = 'data.xlsx' const blob = new Blob([s2ab(excelData)], { type: 'application/octet-stream' }) saveAs(blob, fileName) } } } </script> ``` 上述代码中，我们使用XLSX.utils.book_new()函数创建了一个新的工作簿，然后使用XLSX.utils.aoa_to_sheet()函数将数据转换为工作表。 最后，我们使用XLSX.utils.book_append_sheet()函数将工作表添加到工作簿中，然后使用XLSX.write()函数将工作簿转换为二进制数据流。 通过调用saveAs()函数，我们可以将数据流保存为Excel文件，文件的名称为data.xlsx。 以上是使用vue-xlsx导出Excel的简单示例，根据实际需求，我们可以根据需要对数据进行处理和格式化，以实现更复杂的导出功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值