使用vue导出word即出现的BUG记录

1.需要下载的依赖

npm install docxtemplater

npm install jszip-utils

npm install file-saver

npm install jszip

2.导入依赖

import docxtemplater from 'docxtemplater'

import JSZipUtils from 'jszip-utils'

import { saveAs } from 'file-saver'

import JSZip from 'jszip'

3.模板

第一种：普通的文本的形式：

 

第二种：表格的形式，可以进行循环

以上两种形式不同，代码段也不同，不同的代码段如下

 

//第一种
doc.setData({ ..._this.tableData }) // 设置模板变量的值
//第二种
doc.setData({ table：_this.tableData }) // 设置模板变量的值

3.前端所需代码

HTML：

<i title="下载word文档">
    <img src="" @click="downLoad()"/>
 </i>

js：

downLoad(){
                let _this = this
                // 读取并获得模板文件的二进制内容
                JSZipUtils.getBinaryContent('static/test.docx', function(error, content) {
                console.log('-----', content);
                if (error) throw error // 抛出异常
                let zip = new JSZip(content) // 创建一个JSZip实例，内容为模板的内容
                console.log('+++++', zip);
                let doc = new docxtemplater().loadZip(zip)// 创建并加载docxtemplater实例对象
                //doc.loadZip(zip);
                console.log('=====', doc);
                doc.setData({ ..._this.tableData }) // 设置模板变量的值
                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, 'XXX.docx')
                })
            },

 3.我遇见的一些BUG

（1）首先是模板位置的问题：vue-cli2是放在static下面，其次我看其他博主在写模板的位置的时候是直接写“****.docx"，但是我不知道什么原因这些写的话会出现“Ajax error for test.docx : 404 Not Found“的问题。所以我在模板位置处增加了”static/“，这样就解决了这个问题，总结可能是路径的问题。

（2）文件导出后，有时候设置的变量显示的是undefined；需要看一下模板中的变量名是不是又错误的，我就是因为这个原因卡了一下午。（有时候感觉cv挺好的，至少不会出现低级错误。）

（3）出现”Uncaught Error: Error: Can't find end of central directory : is this a zip file ? If it is, see “的错误时（参考：前端vue以模板方式导出word----依赖 docxtemplater - 吴小明- - 博客园）

就是你的路径错误了。

 （4）版本的问题：出现”The constructor with parameters has been removed in JSZip 3.0, please check“，就是你的版本出现了问题。在package.json中添加以下这段后，把原来的node_modules删除掉重新npm install

        "jszip": "2.6.0",
        "jszip-utils": "^0.1.0",
        "docxtemplater": "^3.25.4",
        "file-saver": "^2.0.5",