记一次前端导出word 文档的踩坑记录__前端__Vue.js
发布于 2 个月前 作者 banyungong 377 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

事先声明,踩坑后得到的重要心得
网上文档不少但大多没有说到关键点

1,vue-cli2 和 vue-cli3 的docx模版所放的位置不同

  • vue-cli2 的模版放在static文件夹下面
  • vue-cli3 的模版放在public文件夹下面 下图的peopleout.docx 是模版,用的vue-cli3的脚手架 WechatIMG648.png

2,引入模版的路径问题

刚开始在网上搜的方案都是用的相对路径,老是报一个错误,大概意思的找不到模版,我路径写的明明没有问题,

WechatIMG650.png

WechatIMG649.png 后来终于遇到了明白人,不能用相对路径,直接用根路径,原谅我才疏学浅,说不出原理

WechatIMG651.png 简单粗暴,下面沾上完整代码
用到的插件

-- 安装 docxtemplater
cnpm install docxtemplater pizzip  --save

-- 安装 jszip-utils
cnpm install jszip-utils --save 

-- 安装 jszip
cnpm install jszip --save

-- 安装 FileSaver
cnpm install file-saver --save


没有cnpm可以使用npm
<template>
  <button @click="daochu(message)">导出</button>
</template>

<script>
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
export default {
  name: 'App',
  data() {
    return {
      message :{
        user_name: "XXX",
        remark: "XXX的外出申请",
        form:[
            {
                val: "私事"
            },
            {
                val: ["2020-09-23","2020-09-25"]
            },
            {
                val: "市内"
            },
            {
                val: "回家"
            },
            {
                val: "回家吃饭"
            },
        ]  
      }
    }
  },
  methods: {
    daochu(e) {
      console.log(e)
      let docxsrc = "/peopleout.docx";        //模板文件的位置
      let docxname = "工作日志.docx";        //导出文件的名字
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
          // docxsrc是模板。我们在导出的时候,会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
              throw error;
          }
  
          // 创建一个PizZip实例,内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docx templater实例对象
          let doc = new docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
              ...e, // e中的数据可以再模板中直接使用
              cause: e.form[4].val,
              arrive: e.form[2].val,
              starttime: e.form[1].val[0],
              endtime: e.form[1].val[1]
          });
  
          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, docxname);
      });
    }
  },
}
</script>

模版文件docx 我就不粘了,网上都是例子,需要代码可以留言,最后贴两张模版和效果的图片

WechatIMG652.png

WechatIMG653.png

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 锋行天下 原文链接:https://juejin.im/post/7026337152044630047

回到顶部