vue+xlsx插件实现table表格的导出

场景

`vue+xlsx插件实现table表格的导出

前端vue下载文档流的方法（无接口）
前端导出：适用于不分页的表格数据

安装``插件——npm install xlsx file-saver --save
页面引入 ·import FileSaver from 'file-saver·;
·import XLSX from 'xlsx·;
1.table表格导出单独页面的使用（没有封装）；
2.table表格导出封装导出方法；
3.导出方法的使用；

概要

需要将页面中的table表格格式及内容直接导出。需要下载xlsx插件。

安装命令：npm install xlsx file-saver --save

1.table表格导出单独页面的使用（没有封装）

` <template>
  <div>
    <button @click="exportTable">导出表格</button>
    <el-table id="Mytable">
      <!-- 表格内容
      el-table代码中，重点是要绑定id属性
      通过document.querySelector('#oIncomTable')可以获取到table元素。 -->
    </el-table>
  </div>
</template>
 
<script>
//引用这两个包
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';
 
export default {
  methods: {
    exportTable() {
      // 通过id获取表格元素
      const table = document.getElementById('#Mytable');
      //设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析
      const xlsxParam = { raw: true };
      const ws = XLSX.utils.table_to_sheet(table,xlsxParam);
      // 新建工作簿并添加工作表
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      // 生成Excel文件
      const wbout = XLSX.write(wb, { bookType: 'xlsx',  bookSST: true,type: 'array' });
      // 保存文件
      saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'table.xlsx');
      
      // 以下是字符串转ArrayBuffer之后的保存（不需要就不用加）
      //const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
      //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;
    // }
    // 保存文件
     // saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'table.xlsx');
    }
  }
};
</script>`

2.table表格导出封装导出方法

*在utils文件中新建文件ExcelUtils.js，进行导出方法的封装

import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export function exportToExcel(fliename, dom, that) {
  const XLSX = require('xlsx');
  console.log('XLSX', XLSX, FileSaver);
  // 使用 this.$nextTick 是在dom元素都渲染完成之后再执行document.querySelector('#oIncomTable')
  that.$nextTick(function() {
    // 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析
    const xlsxParam = { raw: true };
    const wb = XLSX.utils.table_to_book(dom, xlsxParam);
    // 导出excel文件名
    // let fileName = fliename + new Date().getTime() + '.xlsx';
    let fileName = fliename + '.xlsx';

    const wbout = XLSX.write(wb, {
      bookType: 'xlsx',
      bookSST: true,
      type: 'array',
    });
    try {
      // 下载保存文件
      FileSaver.saveAs(
        new Blob([wbout], { type: 'application/octet-stream' }),
        fileName
      );
    } catch (e) {
      if (typeof console !== 'undefined') {
        console.log(e, wbout);
      }
    }
    return wbout;
  });
}

3.导出方法的使用

在需要导出的页面中引入导出的封装方法：

import { exportToExcel } from ‘@/utils/ExcelUtils’; //注意路径不要写错

导出方法的使用：

//导出
exportData() {
exportToExcel(‘自定义文件名称’, document.querySelector(‘#Mytable’), this);
},

总结

大功告成，小记一下