纯前端使用vue如何导出表格

1、 安装依赖
安装依赖xlsx,file-saver

npm install --save xlsx file-saver
2.在组件中引入
import FileSaver from ‘file-saver’
import XLSX from ‘xlsx’
3.添加下载方法
#out-table为table节点的id

outTab () {
   /* generate workbook object from table */
     let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
     /* 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' }), 'sheetjs.xlsx')
     } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
     return wbout
 },

4.注意点
使用el-table的filex属性时,会导致生成2份数据
解决方法:

/* generate workbook object from table /
let fix = document.querySelector(’.el-table__fixed’);
let wb;
if (fix) {
wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix));
document.querySelector("#out-table").appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
}
/
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’
}), ‘file.xlsx’);
} catch (e) {
if (typeof console !== ‘undefined’) console.log(e, wbout)
}
return wbout;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用以下步骤在Vue导出Excel表格: 1. 首先,您需要安装 `file-saver` 和 `xlsx` 库。您可以使用以下命令进行安装: ``` npm install file-saver xlsx --save ``` 2. 在Vue组件中,您需要导入 `file-saver` 和 `xlsx` 库。您可以使用以下代码进行导入: ```javascript import { saveAs } from 'file-saver'; import XLSX from 'xlsx'; ``` 3. 创建一个函数,该函数将生成Excel文件并将其保存到本地计算机。以下是实现的示例代码: ```javascript methods: { exportExcel() { /* 创建数据 */ const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 22, '男'], ['小红', 16, '女'] ]; /* 创建一个工作簿 */ const workbook = XLSX.utils.book_new(); /* 创建一个工作表 */ const worksheet = XLSX.utils.aoa_to_sheet(data); /* 将工作表添加到工作簿 */ XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); /* 将工作簿转换为二进制文件 */ const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); /* 保存文件 */ const fileName = 'example.xlsx'; const file = new Blob([excelBuffer], { type: 'application/octet-stream' }); saveAs(file, fileName); } } ``` 4. 最后,在Vue组件模板中添加一个按钮,当用户单击该按钮时,将调用 `exportExcel` 函数。以下是示例代码: ```html <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> ``` 这样,当用户单击该按钮时,将生成并保存Excel文件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值