likes
comments
collection
share

word 文件按模板导出与预览:docxtemplater + docx-preview 实现

作者站长头像
站长
· 阅读数 19

模板文件 template.docx

word 文件按模板导出与预览:docxtemplater + docx-preview 实现

工具

  • 在给定了 word 模板的前提下,所要做的就是将数据填充到模板文件之中,docxtemplater插件能够方便完成这个需求。
  • 另外,还需要docx-preview插件,将已经填充好数据的文件在页面上进行显示。

具体方法

  1. 在项目文件夹根目录下,创建static文件夹,将template.docx文件放入这个文件夹中
  • 注意vue2.x应该创建static文件夹,vue3.x应该创建的是public文件夹
  • 模板文档后缀注意是.docx
  1. 安装docxtemplaterpizZipjSZipUtilsdocx-previewfile-saver
npm install docxtemplater --save  
npm install pizZip --save
npm install jSZipUtils --save
npm install docx-preview --save
npm install file-saver --save
  1. 在文件中引入
import Docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { renderAsync } from 'docx-preview'
import {saveAs} from 'file-saver'
  1. 创建按模板导出方法
exportWordDocx(tempDocxPath, dataObj, fileName, callback) {
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
        if (error) {
          throw error
        }
        const zip = new PizZip(content)
        const doc = new Docxtemplater().loadZip(zip)
        //填充数据
        doc.setData(dataObj)
        try {
          doc.render()
        } catch (error) {
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          }
          console.error({
            error: e
          })     
          throw error
        }
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType: 
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        //将生成文件的blob作为参数传入回调函数,为实现文件预览
        //若不需要预览,可直接用下面这行代码
        //saveAs(this.file, fileName);
        callback(out);
    })
}
  1. 调用按模板导出方法
//要填充的数据
//通常请求后端接口获得
const dataObj = {
  name: '探测器',
  id: '002',
  data: [
      {position:'-15', average: '-15.3', difference: '-0.3'},
      {position:'0', average: '0.2', difference: '0.2'},
      {position:'15', average: '15.1', difference: '0.1'},
  ]
};

//文件名称
const fileName = `示例文件.docx`;

exportWordDocx(
  `/static/template.docx`,
  dataObj,
  fileName,
  (file)=>{
    //预览功能
    renderAsync(file, this.$refs.file);
    //若要实现文档下载,可直接用下面这行代码
    //saveAs(file, fileName);
    //若要先预览,点击“下载”按钮之后再下载文档,
    //可将file先暂存在this.file中,响应按钮事件后调用saveAs(this.file, fileName)
    //this.file = file;
});
<!--  预览文档的放置容器 -->
<div ref="file"></div>
  1. 更改template.docx

word 文件按模板导出与预览:docxtemplater + docx-preview 实现

  • 这里的nameiddata注意都是exportWordDocx方法中dataObj对象中的属性(例如步骤5代码中的dataObj)
  • 模板文档中的{参数名称}原理是调用dataObj['参数名称']来填充到文档中
  • 若要实现数组的循环,可参照表格中的写法{#数组名称}...{数组元素对象属性名称}...{/数组名称}。如上面文档中表格的写法,是取了dataObj中属性名称为data的数组,{position}{average},{difference}都是数组元素对象的属性
  1. 预览效果与导出效果

word 文件按模板导出与预览:docxtemplater + docx-preview 实现

word 文件按模板导出与预览:docxtemplater + docx-preview 实现

  • 之前碰到过这个问题:Uncaught Error: Error: Can't find end of central directory : is this a zip file ?
  • 原因是模板文档路径没有找对,exportWordDocx的第一个参数写成了/template.docx,看其他人的说法,这样写会自动找static文件夹下面的文件的,不应该会出现这种问题。多番尝试解决不了的情况下直接改成/static/template.docx就可正常获取了
转载自:https://juejin.cn/post/7278247059517210643
评论
请登录