vue表格导出到Excel

宋文轩

已于 2022-05-13 15:47:19 修改

阅读量1.7w

点赞数 6

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2021-10-27 16:51:55 首次发布

本文链接：https://blog.csdn.net/qq_39071599/article/details/120996558

版权

步骤一：安装依赖

npm install --save xlsx file-saver

步骤二：在放置需要导出功能的组件中引入相关组件

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'

步骤三：给table设置一个id

HTML中的设置，简单来说就是给需要导出的table标签el-table上加一个id：如id="exportTable"，对应下面的exportExcel方法中的 document.querySelector('#exportTable')

步骤四：写method

在methods中设置真正实现导出转换excel表格的方法:

exportExcel () {
    /* generate workbook object from table */
    var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
    var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)
    /* get binary string as output */
    var wbout = XLSX.write(wb, { bookType: 'x