js-xlsx插件导出table把字符串当做数字处理解决办法

使用js-xlsx插件和FileSaver插件可以很容易的实现前端导出表格到Excel功能

GitHub地址

https://github.com/SheetJS/js-xlsx

https://github.com/eligrey/FileSaver.js

 

开发中遇见一个问题,使用js-xlsx插件将table转成workbook时,会默认把内容是数字的字符串当做数字处理

比如 一个td的值是00001,导出Excel后会变成1,js-xlsx插件会把这个字符串转成数字进行输出。

查看了js-xlsx插件的文档后发现可以通过raw:true属性控制把内容当做字符串进行输出,这样输出的结果就是00001了。

let table = document.querySelector("#mytable");
let wb = XLSX.utils.table_to_book(table,{raw:true});
/* get binary string as output */

let wbout = XLSX.write(wb, {
     bookType: "xlsx",
     bookSST: true,
     type: "array",
});
try {
   FileSaver.saveAs(
        new Blob([wbout], { type: "application/octet-stream" }),
        excName+".xlsx"
        );
} catch (e) {
   if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;

 

  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
要在Vue中使用xlsxxlsx-style插件将Element UI中的Table组件的表格导出并下载,可以按照以下步骤进行操作: 1. 安装xlsxxlsx-style插件。打开终端并导航到你的Vue项目目录,运行以下命令: ``` npm install xlsx xlsx-style ``` 2. 在需要导出表格的组件中,使用import语句导入xlsxxlsx-style模块: ```javascript import XLSX from 'xlsx'; import 'xlsx-style/dist/xlsx.core.min.js'; // 导入xlsx-style模块 ``` 3. 在需要导出表格的组件中,创建一个方法来处理导出逻辑。例如,创建一个名为`exportTable`的方法: ```javascript exportTable() { // 获取要导出的表格数据 const tableData = this.$refs.table.$el; // 创建一个空的工作簿对象 const wb = XLSX.utils.book_new(); // 创建一个工作表对象 const ws = XLSX.utils.table_to_sheet(tableData); // 将工作表添加到工作簿中 XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 将样式应用到工作表中的单元格(如果需要) // 可以使用xlsx-style插件提供的API来设置样式 // 将工作簿对象转换成二进制数据 const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' }); // 创建一个Blob对象 const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' }); // 创建一个下载链接并模拟点击下载 const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'table.xlsx'; link.click(); // 释放URL对象 window.URL.revokeObjectURL(url); } ``` 4. 在模板中,将导出按钮绑定到`exportTable`方法: ```html <template> <div> <el-button type="primary" @click="exportTable">导出表格</el-button> <el-table ref="table" :data="tableData"> <!-- 表格内容 --> </el-table> </div> </template> ``` 在这个示例中,我们使用`refs`属性获取了Table组件的DOM元素,并将其作为参数传递给`table_to_sheet`方法来创建工作表对象。然后,我们将工作表对象添加到工作簿中,并使用`write`方法将工作簿对象转换成二进制数据。最后,我们创建了一个Blob对象,并使用创建的下载链接来模拟点击下载。 请注意,上述示例中的`tableData`和`s2ab`函数需要根据你的实际情况进行调整。`tableData`应该是你要导出的表格数据,而`s2ab`函数是一个将字符串转换成ArrayBuffer的辅助函数(可在下面找到实现)。 ```javascript function s2ab(s) { const buf = new ArrayBuffer(s.length); const view = new Uint8Array(buf); for (let i = 0; i < s.length; i++) { view[i] = s.charCodeAt(i) & 0xFF; } return buf; } ``` 这样,当你点击“导出表格”按钮,表格数据将以Excel文件的形式下载到本地。 希望这可以帮助到你!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值