前端的常规导出,一般是 excel,下载图片什么。word 的导出有点不太一样。
导出前的准备,安装相关依赖
import Docxtemplater from 'docxtemplater' import PizZip from 'pizzip' import PizZipUtils from 'pizzip/utils/index.js' import { saveAs } from 'file-saver' import ImageModule from 'docxtemplater-image-module-free'
要新新建一个 word 的文件,中间的值用 {} ,类似于 tsx 或者 jsx 的写法,和 src 平级新建一个名称为 public 的文件夹
index.docx 的内容
第一个箭头,是常规的对象赋值,第二个,是表格循环,第三个是图片的显示
export const exportWord = ({ templateName = 'index.docx', docData = {}, fileName = '', fileType = 'docx' }: any) => { const base64DataURLToArrayBuffer = (dataURL: any) => { const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/ const stringBase64 = dataURL.replace(base64Regex, '') let binaryString if (typeof window !== 'undefined') { binaryString = window.atob(stringBase64) } else { binaryString = Buffer.from(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 } const getBase64 = (img: any) => { function getBase64Image({ image, width, height }: any) { const canvas = document.createElement('canvas') canvas.width = width || image.width canvas.height = height || image.height const ctx: any = canvas.getContext('2d') ctx.drawImage(image, 0, 0, canvas.width, canvas.height) var dataURL = canvas.toDataURL() return dataURL } var image = new Image() image.crossOrigin = '' image.src = img return new Promise((resolve, reject) => { image.onload = function () { resolve(getBase64Image({ image })) } }) } loadFile(`/${templateName}`, function (error: any, content: any) { if (error) { throw error } const imageOpts = { getImage: async (tagValue: any, tagName: any) => { const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/ let newValue: any = '' if (base64Regex.test(tagValue)) { newValue = base64DataURLToArrayBuffer(tagValue) } else if (tagValue.includes('http')) { await getBase64(tagValue).then((data) => { newValue = base64DataURLToArrayBuffer(data) }) } else { await PizZipUtils.getBinaryContent(tagValue, function (error, content) { if (!error) { newValue = content } }) } return newValue }, getSize: function (img: any, tagValue: any, tagName: any) { return [150, 150] } } const imageModule = new ImageModule(imageOpts) const zip = new PizZip(content) const doc = new Docxtemplater() .loadZip(zip) .setOptions({ paragraphLoop: true, linebreaks: true, nullGetter: nullGetter as any }) .attachModule(imageModule) .compile() doc.renderAsync(docData).then(function () { const out = doc.getZip().generate({ type: 'blob', mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }) saveAs(out, `${fileName || new Date().getTime()}.${fileType}`) }) }) }
图片的导出,如果是本地的话,填写正确的引入地址,也以直接导出 base64 格式的图片,网络图片,也是需要先转换成 bas464,再导出。网络图片导出有一个小坑,就是跨域问题。一般是用 jq 的一个方法,具体可以再查一下。
标签:canvas,word,前端,导出,tagValue,image,new,const,any From: https://www.cnblogs.com/ruose/p/16952656.html