vue-前端导出xlsx文件

2025-01-25 约 567 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=125967727

vue 前端导出xlsx文件

关键词由CSDN通过智能技术生成

安装组件：

npm install xlsx --save
npm install --save xlsx file-saver

html 代码

<el-table :data="tableData" id="outExcel"></el-table>

js 代码

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


    /**导出数据*/
    handleOut() {

/** 从表生成工作簿对象 out-table是表格的id */
          const wb = XLSX.utils.table_to_book(document.querySelector("#outExcel"));
          /** 获取二进制字符串作为输出 */
          const wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
          });
          try {
            FileSaver.saveAs(
              new Blob([wbout], {type: "application/octet-stream"}),
              //设置导出文件名称
              "文件名称.xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
          }
          return wbout;

}

如果想复用的话可以用下面的封装方法

1、outToExcel.js代码，复制即可使用：

import FileSaver from 'file-saver';
import * as XLSX from 'xlsx'
export default {
    // 导出Excel表格
    exportExcel(name, tableName) {
        //name表示生成excel的文件名     tableName表示表格的id
        var sel = XLSX.utils.table_to_book(document.querySelector(tableName))
        var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
            FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, selIn)
        }
        return selIn
    }
};

2、main.js里面引入刚刚写好的那个js文件

//全局导出excel
import outToexcel（文件名） from 刚刚写好的那个js文件的路径
Vue.prototype.outToExcels（取名随意） = outToexcel（文件名）;

3、html 代码

<el-table :data="tableData" id="outExcel"></el-table>

4、methods方法调用

exportExcel(){
outToExcels.exportExcel("文件名.xlsx","#outExcel")
}

目录

vue-前端导出xlsx文件

vue 前端导出xlsx文件