docxtemplater 导出word 文档 图片无法导出？

  • Z时代
  • 2024-02-08
  • 分类：IT

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import ImageModule from 'docxtemplater-image-module-free'
const exportDoc = async () => {
  let docxsrc = '../../src/assets/template.docx' //模板文件的位置
  let docxname = '报告导出' //导出文件的名字
  let imgs = await dowImgs('http://xxx.com/1.jpg')
  let imgsBase64 = ''
  blobToDataURI(imgs, (e) => {
    imgsBase64 = e
  })
  JSZipUtils.getBinaryContent(docxsrc, async function (error: any, content: any) {
    const imageModule = new ImageModule(imageOpts)
    let zip = new PizZip(content)
    let doc = new docxtemplater()
    doc.loadZip(zip)
    doc.attachModule(imageModule)
    doc.setData({
      imgs: imgsBase64
    })
    doc.render()
    let out = doc.getZip().generate({
      type: 'blob',
      mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    })
    // 将目标文件对象保存为目标类型的文件，并命名
    saveAs(out, docxname)
  })
}
// 下载图片 转换成 blob
const dowImgs = async (str: string) => {
  return await fetch(str).then((res) => res.blob())
}
const imageOpts = {
  getImage: function (tagValue) {
    return tagValue
  },
  getSize: function () {}
}
// blob 转换成 base64
const blobToDataURI = (blob, callback) => {
  var reader = new FileReader()
  reader.onload = function (e) {
    callback(e.target.result)
  }
  reader.readAsDataURL(blob)
}

上面是导出word的方法。

我的word 只有一个imgs 占位符。{imgs}

如果我使用{%imgs} 会直接报错
 index.js:180 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
    at ImageModule2.getRenderedPart (index.js:180)
    at ImageModule2.render (index.js:141)
    at moduleRender (render.js:9)
    at render.js:26
    at Array.map (<anonymous>)
    at render (render.js:24)
    at XmlTemplater.render (xml-templater.js:199)

而上面导出的word 出现直接将base64 的编码直接输出到word 文件里面去。
base64 编码是正确的，可以反义成正确的图片。

现在我不知道哪里的问题，导致我的word 无法正常显示图片。请指教

回答：

const imageOpts = {
  getImage: function (tagValue) {
    return tagValue
  },
  getSize: function () {
    return [500, 500]; 
  }
}

回答：

可以参考看下：
https://blog.csdn.net/Coludidi/article/details/129730054

以上是 docxtemplater 导出word 文档 图片无法导出？ 的全部内容， 来源链接： utcz.com/p/934332.html

回到顶部