vue+el-table导出为excel文件（及数字被科学计数法问题解决）

最新推荐文章于 2024-01-29 11:49:11 发布

小李吖

最新推荐文章于 2024-01-29 11:49:11 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue element-ui 文章标签： vue excel

本文链接：https://blog.csdn.net/qq_42312077/article/details/116601137

本文介绍如何在Vue项目中使用Element UI的el-table组件，配合相关库实现Excel文件的导出，并解决了数字显示为科学计数法的问题。

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

1.首先，项目安装依赖

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

2.组件代码

//html代码
<el-button type="primary" size="default" @click="exportExcel">导出</el-button>
<!-- el-table添加id -->
<el-table :data="dataList" id

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小李吖

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【vue】纯前端实现excel表格的下载

weixin_41498246的博客

09-27

704

【vue】纯前端实现excel 的下载。

vue表格导出到Excel

宋文轩

10-27

1万+

步骤一：安装依赖 npm install --save xlsx file-saver 步骤二：在放置需要导出功能的组件中引入相关组件 import FileSaver from 'file-saver' import XLSX from 'xlsx' 步骤三：给table设置一个id HTML中的设置，简单来说就是给需要导出的table标签el-table上加一个id：如id="exportTable"，对应下面的exportExcel方法中的 document.querySelector(

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

vue里面table组件直接导出excel文档（并解决科学计数法问题）

weixin_41007701的博客

09-30

1303

** table组件直接导出excel文档 ** 前提是table组件不存在浮动操作列（若存在浮动操作列，则数据将会导出两遍） <el-table :data="tableData" border style="width: 100%" id="analyouttable > <el-table-column type="index" label="序号" align="center"&

vue+table2excel 身份证号 科学计数法

小星落

05-14

924

解决导出表格内的身份证号码显示成了科学计数法 node_modules\js-table2excel\index.js 大概 158行 ==》 //在此处生成单元格时添加上述样式属性 getTextHtml(val) 方法中 return `<td style="text-align: center;vnd.ms-excel.numberformat:@">${val}</td>` ...

el-table中处理科学计数法

Giraffe0615的博客

02-27

401

el-table中处理科学计数法

element-ui table 导出Excel并解决数字列科学计数法问题

qq_42739199的博客

04-02

2191

安装依赖 cnpm install --save xlsx file-saver 页面引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 添加方法 exportExcel() { /* 转换成excel时，使用原始的格式，解决数字列自动转科学计数法问题 */ let xlsxParam = { raw: true ...

element-ui导出el-table表格为Excel文件

z1756370的博客

01-29

2333

导出两份的原因：我使用了el-table的fixed属性来让某一列固定，但elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。xlsx是一个流行的JavaScript库，用于在浏览器中读取、解析和生成Excel文件。你可以使用xlsx库来创建、修改和操作工作簿、工作表、单元格等Excel文件中的元素。file-saver是一个用于在浏览器中保存文件的JavaScript库。file-saver库通过创建一个Blob对象并触发浏览器的文件下载功能来实现文件保存。

在vue项目中实现将数据导入Excel 三种方式(.xlsx , .csv)

最新发布

07-31

1. **`raw: true`**：保留原始数据格式（防止数字被转为科学计数法） 2. **`cellStyles: true`**：保留基础单元格样式（边框、背景色等） 3. **`bookSST: true`**：优化大数据量性能[^2][^3] 4. **`bookType: 'xls'`...

vue XLSX导出长数字变科学计数法怎么解决? 在网站上到处翻找后，总结一下方案

sjk1220的博客

01-14

1575

第一行代码加上 { raw: true } 导出的时候使用原来的格式 var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),{ raw: true }) 对数据进行处理，给导出的数据加" ` “或者” \t "

VUE导出合并单元格EXCEL以及%变数字的问题

daniella05的博客

04-10

2024

src/libs/目录下增加excel.js excel.js /* eslint-disable */ import XLSX from 'xlsx'; function auto_width(ws, data){ /*set worksheet max width per col*/ const colWidth = data.map(row => row.m...

用 jquery.table2excel.js 导出ajax动态生成的table

代码笔记

09-10

1428

用 jquery.table2excel.js 导出ajax动态生成的table

vue中导出Excel表报错处理

小破孩的博客

03-24

2408

Excel表导出功能需要将请求中的 responseType 设置为 blob，也就是说请求只能接收Excel文件，json数据没法处理此时可以根据 Response 的 Content-Type值类判断处理，如果值为 application/json，则先将返回的数据转换成字符串，然后再转换为 JSON // 导出 downLoad(){ const fileReader = new FileReader() // 第一步创建文件对象

vue2.0 + element UI 中 el-table 数据导出Excel

weixin_38371427的博客

12-02

336

el-table 数据导出Excel

table2excel导出Excel，科学计数法显示的问题(针对office)

MakeMeCry的专栏

07-27

1456

直接把HTML里的TABLE导出excel，默认会把过长的数字类型转成科学计数法，这在导出身份证号这种信息的时候非常麻烦。虽然可以在数字前面加上一个符号，比如'，这样就会自动变成文本形式了。但是一排带着单引号的身份证号看着还是很别扭，尤其是强迫症患者。当然，加一些透明或隐藏符号也行。不过有时候没法这么做，后续对EXCEL操作可能出问题。这时候就可以在导出的TABLE的TD标签加上一个样式，比如<td style="vnd.ms-excel.numberformat:@">11111111

Vue导出Excel乱码问题（已解决）

Dcripple的博客

01-08

4103

后端已经写好了导出Excel的接口，调用接口会发现后端返回的是二进制流文件实现方法：在封装接口时，给接口传递一个参数【 responseType: 'blob' 】该参数是处理导出Excel表格数据乱码问题的关键在页面中写实现方法 // 订单导出 getOrderExport(){ exportOrder(this.query).then(res => { console.log(res); const link = document.createElement...

vue使用XLSX 读取excel日期格式的单元格问题

Dear小破的专栏

02-07

2952

最近要给一个vue项目，做一个excel模板导入功能，使用XLSX读取日期格式的单元格，解析出来总是一串数字，但是为规范模板填写的内容，必须对一些单元格进行日期格式设置。记录下来，给有需要的人！

使用vue导出excel遇到的那些坑

weixin_34163741的博客

03-14

6672

需求： Vue+element UI el-table下的导出当前所有数据到一个excel文件里。先按照网上的方法，看看有哪些坑准备工作： 1、安装依赖：yarn add xlsx file-saver -S 2、在放置需要导出功能的组件中引入 import FileSaver from "file-saver"; import XLSX from "xlsx"; 复制代码3、HTML中...

vue封装公共方法处理js计算科学记数法精度问题

qq_34639706的博客

01-17

378

声明：本文核心是很早之前参考其他大牛的文章或博客，文章出处也找不到了，如有看到请留言，会补上出处。自己稍作改动，一直保留在用。废话不多说，下面直接上在vue中自己如何使用的代码： 1.新建公共方法的js文件，我为这个单独建了一个文件： calculation.js 代码： var countDecimal...