vue项目导出word，docxtemplaterg循环数组

---

前言

项目需要vue导出word文档，自己根据百度和自己项目需求完成了此功能，这里做个笔记

---

一、安装依赖（我使用的是yarn，使用npm install 。。。。。）

	yarn add docxtemplater
    yarn add pizzip
    yarn add jszip-utils
    yarn add file-saver

二、创建doc.js文件，引入依赖

1.引入依赖

代码如下（示例）：

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

2.定义函数并导出(参考:https://blog.csdn.net/github_39365750/article/details/105584133)

代码如下（示例）：

  /**
     导出docx
     @param { String } tempDocxPath 模板文件路径
      @param { Object } data 文件中传入的数据
     @param { String } fileName 导出文件名称
*/
    export const exportDocx = (tempDocxPath, data, fileName) => {
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
       // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error
        }
         // 创建一个JSZip实例，内容为模板的内容
        const zip = new PizZip(content)
         // 创建并加载docxtemplater实例对象
        const doc = new docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
          ...data.form,
          list: data.list
        })
        try {
          // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
          doc.render()
        } catch (error) {
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          }
          console.log({
            error: e
          })
          // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
          throw error
        }
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        }) // Output the document using Data-URI
        saveAs(out, fileName)
      })
    }

---

# 三、定义一个.docx文件模板

四、html和css看个人项目需求

五、js

 	 data(){
        return{
                 detailList: {},
        }
    }
    created(){
        //模拟数据
        this.detailList={
            title: "11"
            num: 0
            detailsDtos:[
                {
                    topic: "222"
                    typestr: "单选题"
                    options:[
                        {
                            count: 0,
                            isScore: false,
                            option: "选项1",
                            percentage: 0,
                            sort: 0
                        },
                        count: 0,
                        isScore: false,
                        option: "选项2",
                        percentage: 0,
                        sort: 0
                    ]
                }
                {
                    topic: "1111"
                    typestr: "单选题"
                    options:[
                        {
                            count: 0,
                            isScore: false,
                            option: "选项1",
                            percentage: 0,
                            sort: 0
                        },
                        count: 0,
                        isScore: false,
                        option: "选项2",
                        percentage: 0,
                        sort: 0
                    ]
                }
            ]
        }
    }
    methods:{
         exportWord() {//点击下载的方法
                  var that = this
                  const data = {
                        form: {
                          title: that.detailList.title,
                          num: that.detailList.num
                        },
                          list: that.detailList.detailsDtos
                    }
            exportDocx('/data.docx', data, `${that.detailList.title}.docx`)
          }
    }

---

# 六、最终效果

总结

vue项目导出word，需要用到docxtemplate工具，正常数据里面只有一个数组，我这个是多个数组嵌套，但是但凡需要循环在创建模板时候以
{#数组开始} {值} {/数组结束}