【word导出带图片】使用docxtemplater导出word，通知书形式的word

一、demo-导出的的

二、代码操作

1、页面呈现

项目要求，所以页面和导出来的word模版一致

2、js代码【直接展示点击导出的js代码】

使用插件【先下载这五个插件，然后页面引入插件】

import docxtemplater from 'docxtemplater'

import PizZip from 'pizzip'

import JSZipUtils from 'jszip-utils'

import ImageModule from 'docxtemplater-image-module-free'

import { saveAs } from 'file-saver'

 1>代码

    expeortexcel() {clearTimeout(this.timer) //清除延迟执行this.faultlist = []this.faultpic = []const exportData = this.data// 处理图片const crfile = exportData.contractorResponsiblePerson[0].linkconst drfile = exportData.drawResponsiblePerson[0].linkif (crfile != '') {this.UrlToBase64(crfile, (dataURL) => {exportData['crimg'] = dataURL})}if (drfile != '') {this.UrlToBase64(drfile, (dataURL) => {exportData['drimg'] = dataURL})}this.faultlist.push(exportData)this.timer = setTimeout(() => {//设置延迟执行this.export2Word(this.faultlist)}, 5000)},
// 处理导出图片数据UrlToBase64(url, callback) {console.log(url, 'url===')let image = new Image()let that = this//解决跨域问题image.setAttribute('crossOrigin', 'anonymous')image.src = urlimage.onload = () => {var canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightvar context = canvas.getContext('2d')context.drawImage(image, 0, 0, image.width, image.height)var quality = 0.8//这里的dataurl就是base64类型var dataURL = canvas.toDataURL('image/png', quality)callback ? callback(dataURL) : null //调用回调函数}},//导出文件export2Word(faultlistd) {//v:图片路径,t:时间字符串,name:导出文件名称--变量需自己定制，此处为举例let self = thisJSZipUtils.getBinaryContent(window.location.origin + '/tinggong.docx', //需要导出的模板文件地址function (error, content) {if (error) {throw error}let zip = new PizZip(content)let doc = new docxtemplater().loadZip(zip)// 图片处理const opts = {}opts.centered = false // 图片居中，在word模板中定义方式为{%image}opts.fileType = 'docx'opts.getImage = (tagValue, tagName) => {const base64Value = self.base64DataURLToArrayBuffer(tagValue)if (base64Value) {return base64Value}}opts.getSize = function (img, tagValue, tagName) {const sizeOf = require('image-size')const buffer = Buffer.from(img, 'binary')const sizeObj = sizeOf(buffer)const forceWidth = 100const ratio = forceWidth / sizeObj.widthreturn [forceWidth, Math.round(sizeObj.height * ratio)]}let imageModule = new ImageModule(opts)doc.attachModule(imageModule)setTimeout(() => {doc.setData({//设置模板数据// compname: cname,listfa: faultlistd,// listimg: faultpicd,})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}let out = doc.getZip().generate({type: 'blob',mimeType:'application/vnd.openxmlformats-officedocument.wordprocessingml.document', //导出文件格式})saveAs(out, '停工通知书.docx')}, 4000)},)},//获取base64格式图片base64DataURLToArrayBuffer(dataURL) {const base64Regex = /^data:image\/(png|jpg|svg|svg);base64,/if (!base64Regex.test(dataURL)) {return false}const stringBase64 = dataURL.replace(base64Regex, '')let binaryStringif (typeof window !== 'undefined') {binaryString = window.atob(stringBase64)} else {binaryString = Buffer.from(stringBase64, 'base64').toString('binary')}const len = binaryString.lengthconst bytes = new Uint8Array(len)for (let i = 0; i < len; i++) {const ascii = binaryString.charCodeAt(i)bytes[i] = ascii}return bytes.buffer},

1、this.data是接口返回的数据

2、UrlToBase64处理图片数据

3、export2Word导出文件操作

三、通知书模版【毕竟放在public下-且后缀是.docx】 

【语法：】

listfa是数组，#开头, /结束     

{%drimg}   图片格式前面需要加%

四、拓展docxtemplater语法

官网：Docxtemplater | Word, Powerpoint, Excel generation using templates in your application | docxtemplater

1、基础

       Hello {name} !   //  得到 —— Hello John !

     

{"name": "John"}  // 数据格式

2、条件  # 开始    / 结束

{#hasKitty}Cat’s name: {kitty}{/hasKitty}
{#hasDog}Dog’s name: {dog}{/hasDog} 

{"hasKitty": true,"kitty": "Minie""hasDog": false,"dog": null
}// 得到Cat’s name: Minie

3、list集合

{#products}
{name}, {price} ￥
{/products}

 "products": [{ "name": "西服外套", "price": 100 },{ "name": "皮鞋", "price": 200 },{ "name": "劳动力", "price": 0 }]// 得到 西服外套, 100 ￥皮鞋, 200 ￥劳动力, 0￥

4、循环遍历一个包含原始数据的数组

{#products} {.} {/products}

 "products": ["包子", "饺子", "麻辣烫"]// 得到 包子 饺子 麻辣烫

5、循环展示列表【#开头   /结束】

Name	age	phone
{#users}{name}	{age}	{phone}{/}

 

 

"users": [{ "name": "John", "age": 22, "phone": "+33653454343" },{ "name": "Mary", "age": 25, "phone": "+33666666666" }]

得到：

Name	age	phone
John	22	+33653454343
Mary	25	+33666666666