vue 導出excel文件，（支持office和wps版本）

前言

最新因為項目需要，要弄一個純前端開發的excel導出功能，一開始我用了vue-json-excel 效果不錯，改改標簽內容，和標題數據就能用，測試的時候人家用office就提示文件損壞，我那個時候用的是wps還渾然不知。最后還是改用別的插件處理了，都是血的教訓啊！
所以現在就來總結一下使用心得

技術准備

引入工具 file-saver、xlsx、script-loader

//安裝依賴
npm install -S file-saver xlsx

npm install -D script-loader

准備兩個處理結構的js文件Blob.js和 Export2Excel.js。
這里貼下下載地址：

鏈接: https://pan.baidu.com/s/143Rn4wLpr8_T9eke_rk3aQ 提取碼: 2my4 

或者：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 = ['項目編號','項目名稱','合同編號','合同名稱','版本','權益人','過期時間'];

3、這里記得要與data里面的list名稱對應

4、這里可定義導出的excel文件名想·

export_json_to_excel(tHeader, data, '雲主機列表');

原文地址：https://www.cnblogs.com/yao5758/p/14377176.html