vue 项目前端导出excel

由于项目中的表格是动态生成的，行和列都是不固定的，后端处理比较麻烦，所以需要前端导出当前展示的数据到excel中然后直接下载

使用xlsx组件

git地址：SheetJS
npm：xlsx

1. 安装

npm i xlsx

2. 引入

import XLSX from 'xlsx'

如果引入后报莫名其妙的错误，可以换一种方法引入

import * as XLSX from 'xlsx'

3. 使用工作簿

例子-1：使用element ui表格导出excel

html：

<template>
    <el-table id="myTable" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-button type="primary" @click="exportExcel">导出表格</el-button>
</template>

js：

注意：当element ui表格使用fixed属性时，会多出一个表格，导致导出的表格内容重复，删掉就可以了，下面代码中有

export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ]
        }
    },

 methods: {
    exportExcel() {
      //方式一：XLSX.utils.table_to_sheet接受一个表格 DOM 元素并返回一个类似于输入表格的工作表
      //1.创建空工作簿
      var workbook = XLSX.utils.book_new()
      let tableDom = document.getElementById('myTable').cloneNode(true)
      // 当element ui表格使用fixed属性时，会多出一个表格，导致导出的表格内容重复，删掉就可以了
      // tableDom.removeChild(tableDom.querySelector('.el-table__fixed'))
      //  将 DOM TABLE 元素转换为工作表
       try {
            let ws = XLSX.utils.table_to_sheet(tableDom)
            //3.将工作表附加到工作薄
            XLSX.utils.book_append_sheet(workbook, ws, 'Sheet1')
            //打印工作薄
            console.log(workbook)
            // 4.尝试写入wb到filename。在基于浏览器的环境中，它将尝试强制客户端下载。
            XLSX.writeFile(workbook, 'table.xlsx', { bookType: 'xlsx', type: 'array' })
        } catch (e) {
            this.$message.error('导出失败')
        }
     
        //方式二：XLSX.utils.table_to_book 根据工作表生成一个最小的工作簿。
        // let tableDom = document.getElementById('myTable').cloneNode(true)
        // try {
        //     let tableWb = XLSX.utils.table_to_book(tableDom)
        //     XLSX.writeFile(tableWb, 'table.xlsx', { bookType: 'xlsx', type: 'array' })
        // } catch (e) {
        //     this.$message.error('导出失败')
        // }
     }
  }
}

打印的工作薄：

例子-2：使用element ui表格导出excel,并使用FileSaver下载

• 安装

npm install file-saver 

• 引入

import FileSaver from 'file-saver';

• 使用

   exportExcel(){
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#myTable"),xlsxParam);//myTable为列表id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),'导出的名字'
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }