vue项目中导出word文档

最近项目需求要将table表格中的内容导出成word格式，在网上查资料找到2种方式

1使用word模板的方式

1.安装需要的包

-- 安装 docxtemplater
cnpm install docxtemplater pizzip  --save
 
-- 安装 jszip-utils
cnpm install jszip-utils --save 
 
-- 安装 jszip
cnpm install jszip --save
 
-- 安装 FileSaver
cnpm install file-saver --save

2.在需要的组件中引入

	import docxtemplater from 'docxtemplater'
    import PizZip from 'pizzip'
    import JSZipUtils from 'jszip-utils'
    import {saveAs} from 'file-saver'

3.找到模板

在word中的表格添加字段

 // 点击导出word
  exportWord: function() {
    let that = this;
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent("../../static/model.docx", function(error, content) {
      // model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
      // 抛出异常
      if (error) {
        throw error;
      }
 
      // 创建一个PizZip实例，内容为模板的内容
      let zip = new PizZip(content);
      // 创建并加载docxtemplater实例对象
      let doc = new docxtemplater().loadZip(zip);
      // 设置模板变量的值
      doc.setData({
        table: that.videoParam.data
      });
 
      try {
        // 用模板变量的值替换所有模板变量
        doc.render();
      } catch (error) {
        // 抛出异常
        let e = {
          message: error.message,
          name: error.name,
          stack: error.stack,
          properties: error.properties
        };
        console.log(JSON.stringify({ error: e }));
        throw error;
      }
 
      // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
      let out = doc.getZip().generate({
        type: "blob",
        mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      });
      // 将目标文件对象保存为目标类型的文件，并命名
      saveAs(out, "word.docx");
    });
}

这个就可以导出word文件了
2使用jq的插件的方式

在项目的index.html文件中引入jq

https://code.jquery.com/jquery-3.1.1.min.js

在vue项目中
src下的assets中新增js文件夹，新增jquery.wordexport.js文件包

<template>
  <div class="home">
    <button @click="exportWord">导出</button>
    <div id="word_demo">
     <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>
<script>
require('@/assets/js/jquery.wordexport')
  export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },  
      methods: {
    exportWord() {
      setTimeout(function() {
        $('#word_demo').wordExport('word文档')
      }, 300)
    },
  },

    }
  </script>