vue使用docxtemplater生成docx在线预览使用介绍

一、下载依赖

npm install  docxtemplater pizzip --save  // 处理docx模板
npm install  jszip-utils --save
npm install  jszip --save   
npm install  file-saver --save  // 处理输出文件

二、在public文件夹下创建template/analysis-report.docx

三、在组件中引用

<template>
  <div style="height: 100%;">
    <div class="editor-scroll" >
      <vue-office-docx
        :src="out"
        style="height: calc(100vh - 193px);"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
  </div>
</template>
<script>
import JSZipUtils from "jszip-utils";
import docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
import PizZip from "pizzip";
data() {
    return {
      out: ''
    };
 },
mounted(){
    this.init(detailData)
 },
methods: {
    renderedHandler() {
        console.log("渲染完成")
    },
    errorHandler(e) {
        console.log("渲染失败", e)
    },
init(docxData) {
      var ImageModule = require('docxtemplater-image-module-free');
        JSZipUtils.getBinaryContent('./template/analysis-report.docx', (error, content) => {
          if (error) {
            throw error
          }
          // 图片处理开始
          let opts = {}
          opts = {
            //图像是否居中
            centered: true
          };
          opts.getImage = (chartId) => {
            return this.base64DataURLToArrayBuffer(chartId);
          }
          opts.getSize = function() {
            return [600, 342]
          }
          //图片处理结束    没有图片可去掉这一段
          var zip = new PizZip(content);
          var doc = new docxtemplater()
          doc.attachModule(new ImageModule(opts));  //没有图片可以去掉这一段
          doc.loadZip(zip);
          //获取数据
          doc.setData({
            ...docxData
          });
          try {
            doc.render()
          } catch (error) {
            var e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            }
            console.log(e, error);
            throw error;
          }
          this.out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          })
          
        })
    },
// 导出docx
exportReportFile(type, docxData) {
      saveAs(this.out, `文件名称.docx`)
    },
base64DataURLToArrayBuffer(dataURL) {
      const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/;
      if (!base64Regex.test(dataURL)) {
        return false;
      }
      const stringBase64 = dataURL.replace(base64Regex, "");
      let binaryString;
      if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
      } else {
        binaryString = new Buffer(stringBase64, "base64").toString("binary");
      }
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
      }
      return bytes.buffer;
    },
}
</script>

 

注意，导出所使用的模板的路径在public中，使用’/word.docx’或’word.docx’都可以导出，但是build导出后，服务器会爆404找不到文件，所以使用’word.docx’

在docx模板中使用的使用
对于普通的字符串、数字等普通类型直接使用{}包裹住即可使用：{num}、{str}
使用判断需要加入符号并包裹：
if：{#isShow}{str}{/isShow} #开头 /结尾 isShow进行判断为true则显示str
if-else：{#isShow}{str1}{/isShow}{^isShow}{str2}{/isShow} else为 ^开头 /结尾
数组、对象的使用：
{#data}{name}{age}{address}{/data} 和判断一样的包裹方式，可以理解为先判断是否有无，有的话遍历或查找data中的name、age、address
如果是数组包字符串：
{#data}{.}{/data} 把里面指定的属性名改为 . 即可

导出的样式问题
模板可自动让得到的数据继承引用代码的样式：
数据 str 为 “字符串”，在模板中引入 {str}(下划线)(大括号也需要有下划线)
下载后，文件中便会有 字符串(下划线) 样式（？？？是csdn没有下划线的功能还是我没找到）