vue+elementUI导出数据为word文档

今天做项目遇到需求是在word文档里面增加数据，在已知文案里面加上用户签名和时间。我也按搜索到的做的。我做的时候主要参考了简书写的，具体链接：https://www.jianshu.com/p/0de31429b12a

以下是我写的代码模块，步骤完全按简书写，如下：

1.先下载相应的包

// 安装 docxtemplater
yarn add docxtemplater pizzip  --save

// 安装 jszip-utils
yarn add  jszip-utils --save 

// 安装 jszip
yarn add  jszip --save

//安装 FileSaver
yarn add  file-saver --save

安装不一定要yarn,可以是npm 也可以是cnpm

2.引入相应包

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

3.写相应代码：

export default {
  data() {
    return {
      lookDetail: {name:'李四',order_date:'2020-02-26'}
    }
  },
  methods: {
    // 点击导出word
    exportWord() {
      const that = this
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('gy-agree-service.docx', function(error, content) {
      // gy-agree-service.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
      // 抛出异常
        if (error) {
          throw error
        }
        console.log(content)
        // 创建一个PizZip实例，内容为模板的内容
        const zip = new PizZip(content)
        // 创建并加载docxtemplater实例对象
        const doc = new Docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
          name: that.lookDetail.name,
          order_date: that.lookDetail.order_time
        })
        try {
        // 用模板变量的值替换所有模板变量
          doc.render()
        } catch (error) {
        // 抛出异常
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          }
          console.log(JSON.stringify({ error: e }))
          throw error
        }

        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, '同意书.docx')
      })
    }
  }
}

4.文档按照需要写入字段，我的是name和order_date,我的word文档如下：

同意书

您需要签订同意书后，我司方可提供服务，未签订该同意书，本公司不承担责任。
xxxxx(省略1万字)

本人以上内容认可并确认：{name}

签名日期：{order_date}

5.写完上面的步骤是不是有人跟我一样JSZipUtils.getBinaryContent('gy-agree-service.docx', function(error, content) {}），这个docx文件不知道放哪里的？（注：由于有人说这个路径不对，我config里面的publicPath:'./',如果你的是publicPath:'/'，就一层层'../'测试到相应位置即可）

这个文件放目录public里面（静态模板文件，放在静态该在的位置）

注：你只需要修改我上面的文件名成你的xxx.docx就好，不需要自己再添加文件路径哦

6.做完以上的操作我以为搞定了，然后run,再点击导出按钮，结果报错了，报什么错呢？Can't find end of central directory : is this a zip file ?     at XMLHttpRequest.xhr.onreadystatechange

想了一下怎么需要请求了呢，这个问题千万不要单独去百度这个问题，因为百度到的答案不能解决这个问题。

造成这问题的原因是服务器上并没有这个word文档，所以请求的时候告诉你这个文件不存在。

7.所以你首先是要npm run build一下文件给后台，然后丢上服务器。最后再在本地刷新或者重启跑一次就不会报错了。

大家不要跟我犯一样的错。啧啧。下班。