vue中前端生成word

安装并引入docxtemplater ，jszip-utils，file-saver，jszip，pizzip

	import JSZipUtils from 'jszip-utils'
	import { saveAs } from 'file-saver'
	import JSZip from 'jszip'
	import PizZip from 'pizzip'
	import docxtemplater from 'docxtemplater'

这是生成word中有图片需要引用的方法

        //base64转成ArrayBuffer，不需要改动
        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;
		},
		//路径图片转成base64,基本不用动
		getBase64Sync(imgUrl) {	
			return new Promise(function(resolve, reject) {
				// 一定要设置为let，不然图片不显示
				let image = new Image();
				//图片地址
				image.src = imgUrl;
				// 解决跨域问题
				image.setAttribute("crossOrigin", '*');  // 支持跨域图片
				// image.onload为异步加载
				image.onload = function() {
					let canvas = document.createElement("canvas");
					canvas.width = image.width;
					canvas.height = image.height;
					let context = canvas.getContext("2d");
					context.drawImage(image, 0, 0, image.width, image.height);
					//图片后缀名
					let ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
					//图片质量
					let quality = 0.8;
					//转成base64
					let dataurl = canvas.toDataURL("image/" + ext, quality);
					//返回
					resolve(dataurl);
				};
			})
		},

 直接操作

	    // 导出word
      loadFile(url, callback) {
        JSZipUtils.getBinaryContent(url, callback);
      },
async generateWord(){
			var ImageModule = require('docxtemplater-image-module-free');
			 var that = this;
			 let data3 = that.repairformPrintArr.pwRepairRecordDdList
			 let len = that.imgArr.length - 1
			 for(let i in data3){
				if(that.imgArr[len - i]){
					data3[i].imgArr = []
					for(let x in that.imgArr[len - i]){
//对图片进行处理，路径转为base64,要使用await ，不然图片没转好，下面数据就设置好了，导致没有图片显示
						let z = await that.getBase64Sync(that.imgArr[len - i][x])
						data3[i].imgArr.push({imgurl:z})
					}
					
				}
			 }
			        this.loadFile("/word.docx",function (error, content) {
			          if (error) {
			            throw error
			          };
					   // 图片处理
					          const opts = {}
//正常图片{%img}，居中图片{%%img}
					          opts.centered = false;
					          opts.fileType = "docx";
					          opts.getImage = (chartId) =>{
					            return that.base64DataURLToArrayBuffer(chartId);
					          }
							 opts.getSize = function (img, tagValue, tagName) {
							     return [150, 150]
							 }
							  var zip = new PizZip(content);
                               //setOptions()设置后不会有因为文档中使用{#}而造成的空白
							  let doc = new docxtemplater().loadZip(zip).setOptions({
									paragraphLoop: true,
									linebreaks: true
							}).attachModule(new ImageModule(opts)).compile()
                       //setData()设置数据，表格所需要数据都放进去
			          doc.setData({});
			          try {
			            doc.render()
			          } catch (error) {
			            var e = {
			              message: error.message,
			              name: error.name,
			              stack: error.stack,
			              properties: error.properties,
			            }
			            console.log(JSON.stringify({
			              error: e
			            }));
			            // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
			            throw error;
			          }
			          var out = doc.getZip().generate({
			            type: "blob",
			            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
			          }) //Output the document using Data-URI
			          saveAs(out, "维修报表.docx")
			        })
		},

word模板就照着这个写，Array以及Object都是{#name}的写法，很简单的...