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