Vue纯前端导出数据到Excel电子表格

た入场券 2023-07-13 15:21 31阅读 0赞

参考：[https://segmentfault.com/a/1190000012117303\#comment-area][https_segmentfault.com_a_1190000012117303_comment-area]

[Vue 纯前端导出Excel - 简书][Vue _Excel -]

一、安装依赖（前面基本一样）

npm install file-saver --save
    npm install xlsx --save
    npm install script-loader --save-dev

二、下载两个所需要的js文件Blob.js和 Export2Excel.js。

这里贴下下载地址：

http://xiazai.jb51.net/201708/yuanma/Export2Exce_jb51.rar

三、src目录下新建vendor文件夹，将Blob.js和 Export2Excel.js放进去。

四、更改webpack.base.conf.js配置

在resolve的alias： 
    'vendor': path.resolve(__dirname, '../src/vendor')

五、在.vue文件中

<template>
      <div class="OtherSettings_2">
        <h3>xxx列表</h3>
        <div class="table">
          <div class="export_excel">
           <button @click="export2Excel">导出Excel</button>
          </div>
          <table border="1" cellspacing="0" style="border-collapse:collapse;">
            <tr>
              <td>项目编号</td>
              <td>项目名称</td>
              <td>合同编号</td>
              <td>合同名称</td>
              <td>版本</td>
              <td>权益人</td>
              <td>过期时间</td>
            </tr>
            <tr v-for="(item,index) in coundHostList" :key="index">
              <td>{
       {item.number}}</td>
              <td>{
       {item.name}}</td>
              <td>{
       {item.htnumber}}</td>
              <td>{
       {item.htname}}</td>
              <td>{
       {item.version}}</td>
              <td>{
       {item.qyperson}}</td>
              <td>{
       {item.extime}}</td>
            </tr>
          </table>
        </div>
      </div>
    </template>

script部分

data(){
      return{
        coundHostList:[
            {
              number:'0001',
              name:'商品1',
              htnumber:'001',
              htname:'合同1',
              version:'1.0.0.1',
              qyperson:'张三',
              extime:'2020-03-13'
          },
           {
              number:'0002',
              name:'商品2',
              htnumber:'002',
              htname:'合同2',
              version:'1.0.0.2',
              qyperson:'赵四',
              extime:'2020-03-15'
          },
        ]
      }
      },
      methods:{
        formatJson(filterVal, jsonData) {
        　　　　return jsonData.map(v => filterVal.map(j => v[j]))
        　　},
        export2Excel() {
        　　　　require.ensure([], () => {
        　　　　　　const { export_json_to_excel } = require('../../../vendor/Export2Excel')
        　　　　　　const tHeader = ['项目编号','项目名称','合同编号','合同名称','版本','权益人','过期时间'];
        　　　　　　const filterVal = ['number', 'name', 'htnumber', 'htname','version', 'qyperson', 'extime', ];
        　　　　　　const list = this.coundHostList;
        　　　　　　const data = this.formatJson(filterVal,list);
        　　　　　　export_json_to_excel(tHeader, data, '商品管理列表');
        　　　　})
        　 },
      },

这里说明一下：

1、export2Excel()中require的路径因个人项目结构不同可能需要单独调整，如果报module not found '../../Export2Excel.js'之类请自行修改路径。

2、tHeader是每一栏的名称，需手动输入。filterVal是data中list的key值，也是要自己写的。

const { export_json_to_excel } = require('../../../vendor/Export2Excel') //路径问题
    const tHeader = ['项目编号','项目名称','合同编号','合同名称','版本','权益人','过期时间'];

4、这里记得要与data里面的list名称对应

![clipboard.png][]

5、这里可定义导出的excel文件名

export_json_to_excel(tHeader, data, '云主机列表');

[https_segmentfault.com_a_1190000012117303_comment-area]: https://segmentfault.com/a/1190000012117303#comment-area
[Vue _Excel -]: https://www.jianshu.com/p/3bc76ad914f6
[clipboard.png]: /images/20230529/4f2b7d9bfa2943c68680afcd7652da49.png