编程大白话之-vue导出excel表格

在开发过程中，经常会使用到很多ui插件，最后生成各种的表格，而需求又不仅仅是能看到表格，很多时候需要将生成的表格导出生成excel，供同事在办公中使用，记录一种vue导出excel，这个方法功能和效果都可以执行，但在运行脚本时会提示一个不能识别标签的错误，已更新修改方法！

1.首先看一下预计完成的效果

2.gif

2.需要依赖的引入

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

3.需要两个js文件，内容下载地址
https://pan.baidu.com/s/1Z6kGo_Dze-J4KaoLnkWNug
提取码：anqc

4.在项目中文件存放的大概路径，文件名不要更改

文件位置.png

5.在main.js中按照存放路径引入两个包

import Blob from './vendor/Blob'
import Export2Excel from './vendor/Export2Excel.js'

6.修改Export2Excel.js引入文件的路径

修改引入路径.PNG

7.vue页面中写2个方法(网上方法)

export2Excel(){
          require.ensure([], () => {
            const { export_json_to_excel } = require('./vendor/Export2Excel');
            //头
            const tHeader = [ '时间', '地址', '姓名'];
            //对应的标签
            const filterVal = ['date', 'address', 'name'];
            //标签对应的内容  是一个数组结构            
            const list = this.tableData;
            //一个方法 我也不知道干嘛的
            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]))
},

一个按钮去触发expert2Excel() 这个函数就ok了

我写的那个做了一些判断下面截图

下载1.PNG

下载2.PNG

下载3.PNG

下载4.PNG

在这里补充一下，运行函数方法，此时会报一个寻找不到路径的错误问题

路径错误问题.png

这里需要更改webpack.base.conf.js配置：搜索【alias】直接定位

路径直接定位.png

这就是一个简单的流程。

此时页面会有一个报错，如下：

报错.PNG

提示中的错误为无法识别的意外标识符，
查询了网上各种资料和分析后（网上资料说这个的不多）分析应该是require 浏览器不能识别的原因，因为并不影响正常使用，虽然刷新页面和初始化都会报这个错误，但是只要导出都是正常的导出的数据也没有影响
长时间调试还是觉得报错很碍眼，
方案一：下载兼容require的插件，并配置即可
方案二，直接改插件源码，如下：
将Export2Excel.js 中第二个引入文件的路径的‘script-loader!’删除

require('script-loader!../../node_modules/file-saver/src/FileSaver') // 保存文件用
require('../vendor/Blob') // 转二进制用
require('script-loader!../../node_modules/xlsx/dist/xlsx.core.min') // xlsx核心

这边用的是vue-cli脚手架，没有网上很多教程里的“在webpack.base.conf.js 里面增加resolve下一行代码
‘vendor’: path.resolve(__dirname, ‘…/src/vendor’),//新增加一行” 这样的操作的

这种方法你学会了吗？

另外一种

在网上看到也有其他的方法，这里记录一种，有空时去尝试

1.安装插件

cnpm install vue-json-excel

2.min.js中引入使用

image.png

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3.直接在页面中使用

<download-excel
      class = "export-excel-wrapper"
      :data = "json_data"
      :fields = "json_fields"
      name = "远程诊断报告导出.xls">
      <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
      <el-button type="primary" size="small">导出EXCEL</el-button>
</download-excel>


data() {
    return {
      json_fields: {
        "头部-诊断名称": "name",    //常规字段
        "头部-联系电话": "phone.mobile", //支持嵌套属性
        "头部-损坏区域代码": {
          field: "phone.landline",
                    //自定义回调函数
          callback: value => {
            return `损坏区域代码 - ${value}`;
          }
        }
      },
      json_data: [
        {
          name: "损坏的组件一",
          city: "New York",
          country: "United States",
          birthdate: "1978-03-15",
          phone: {
            mobile: "1-541-754-3010",
            landline: "(541) 754-3010"
          }
        },
        {
          name: "损坏的组件二",
          city: "Athens",
          country: "Greece",
          birthdate: "1987-11-23",
          phone: {
            mobile: "+1 855 275 5071",
            landline: "(2741) 2621-244"
          }
        }
      ],
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ]
    };
  }

ps：

json_data: 需要导出的数据

json_fields: 自主选择要导出的字段，指定嵌套数据并将标签分配给键是标签的字段，值是JSON字段。这将“按原样”导出字段数据。如果需要自定义导出的数据，可以定义回调函数。里面的属性是excel表每一列的title,注意多个词组组成的属性名要加双引号

如果需要自定义导出的数据，可以定义回调函数。

image.png

具体步骤有待验证！