关于 vue table 导出 excel 表格

大家好，今天给大家分享一下vue 中导出 excal 表格的几种方法

方法一：

　　用插件，首先先安装依赖

npm install -S file-saver xlsx
npm install -D script-loader

　　然后在 src 目录下新建一个文件夹，引入以下两个文件

　　链接：https://pan.baidu.com/s/1TrXFnvK92miUI42z38Y9DQ
　　提取码：ff8g

　　之后再 main.js 中引入这两个文件（路径自行解决）

import Blob from './excel/Blob.js';
import Export2Excel from './excel/Export2Excel.js';

　　都配置好之后，我们在 methods 中调用方法

<button @click="export2Excel()">导出报表</button>

export2Excel() {
　require.ensure([], () => {
　　　const { export_json_to_excel } = require('../../excal/Export2Excel'); //注意路径
　　　const tHeader = ['姓名', '性别', '电话']; //设置表格标题
　　　const filterVal = ['name', 'sex', 'phone'];//标题对应的属性
　　　const list = this.tableData;  //把data里的tableData存到list
　　　const data = this.formatJson(filterVal, list);
　　　export_json_to_excel(tHeader, data, '下载excel');
　　})
　　},
　　formatJson(filterVal, jsonData) {
     return jsonData.map(v => filterVal.map(j => v[j]))
   }

原文链接：https://blog.csdn.net/xiaoshihoukediaole/article/details/81296327

方法二：

　　用原生js，不需插件，直接上代码

exportExcal() {
            //要导出的json数据
            const jsonData = this.tableData;
            //列标题 我给合并标题合并单元格了
            let str = '<tr><th>评估计划</th><th colspan="4">AAA(2019-01-01~2019-01-02)</th><th colspan="4">BBB(2019-03-01~2019-03-02)</th><th colspan="4">CC(2019-04-01~2019-04-02)</th></tr><tr><th>编号</th><th>日期</th><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th><th>爱好</th><th>电话</th><th>邮箱</th><th>省份</th><th>市区</th><th>地址</th><th>邮编</th></tr>';
            //循环遍历，每行加入tr标签，每个单元格加td标签
            for (let i = 0; i < jsonData.length; i++) {
                str += '<tr>';
                for (let item in jsonData[i]) {
                    //增加\t为了不让表格显示科学计数法或者其他格式
                    str += `<td>${ jsonData[i][item] + '\t'}</td>`;
                }
                str += '</tr>';
            }
            //Worksheet名
            let worksheet = 'Sheet1'
            let uri = 'data:application/vnd.ms-excel;base64,';

            //下载的表格模板数据
            let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
      xmlns:x="urn:schemas-microsoft-com:office:excel" 
      xmlns="http://www.w3.org/TR/REC-html40">
      <head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
            //下载模板
            window.location.href = uri + this.base64(template)
        }