一、使用场景

前端生成word的是用场景，应该是在word展示的形式较为复杂的时候（例如word中需要出现echarts或mapbox截图的时候）
例：
word导出 - 图1
或者是服务器对于接口请求时间进行了限制，但是后端对于数据的处理时间远超请求时间的情况（这种情况基本不会有，本次是情况特殊）

二、使用方法

1、创建word文档模板

普通字段： {字段名}
循环：{#数组字段名}{字段名}{/数组字段名}
图片：{%图片字段名}
word文件需要放在public文件夹下
word导出 - 图2

2、添加依赖

npm install docxtemplater pizzip jszip jszip-utils file-saver docxtemplater-image-module-free -s
docxtemplater ：模板
pizzip ：用于获取模板文件
jszip-utils： 获取读取文件内容
jszip ：用于打包文件，没有需求可不加
file-saver：保存文件
docxtemplater-image-module-free： 导入图片值docx模板

3、创建downWord.js文件

  1. /**
  2.    导出docx
  3.    @param { String } tempDocxPath 模板文件路径
  4.     @param { Object } data 文件中传入的数据
  5.     @param { Array } imgSize 文件设置图片大小
  6.    @param { String } fileName 导出文件名称
  7. */
  8. import docxtemplater from "docxtemplater";
  9. import PizZip from "pizzip";
  10. import JSZipUtils from "jszip-utils";
  11. import ImageModule from 'docxtemplater-image-module-free';
  12. import { saveAs } from 'file-saver'
  14. export const exportDocx = (tempDocxPath, data, imgSize = [600, 900], fileName) => {
  15.     // 读取并获得模板文件的二进制内容
  16.     return new Promise((resolve) => {
  17.         JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
  18.             // 抛出异常
  19.             if (error) {
  20.                 console.log("no");
  21.                 throw error
  22.             }
  23.             // 创建一个JSZip实例，内容为模板的内容
  24.             const zip = new PizZip(content)
  25.             // 创建并加载docxtemplater实例对象
  26.             const doc = new docxtemplater().loadZip(zip)
  27.             // 关于模板中图片的设置
  28.             const opts = {}
  29.             opts.centered = true;  // 图片居中，在word模板中定义方式为{%image}
  30.             opts.fileType = "docx"; // 图片所放置的文件格式
  31.             opts.getImage = (chartId) => {
  32.                 return base64DataURLToArrayBuffer(chartId);
  33.             }  // 官网的方法，将图片转成word适用的格式
  34.             opts.getSize = function () {
  35.                 return imgSize // 图片大小，自定义的值[宽,高]
  36.             }
  37.             let imageModule = new ImageModule(opts);
  38.             doc.attachModule(imageModule);
  39.             // 设置模板变量的值
  40.             doc.setData(data)
  41.             try {
  42.                 // 呈现模板，通过对模板中{}的定义字段，填入相关内容，并产生文件
  43.                 doc.render()
  44.             } catch (error) {
  45.                 const e = {
  46.                     message: error.message,
  47.                     name: error.name,
  48.                     stack: error.stack,
  49.                     properties: error.properties
  50.                 }
  51.                 console.log({
  52.                     error: e
  53.                 })
  54.                 throw error
  55.             }
  56.             const out = doc.getZip().generate({
  57.                 type: 'blob',
  58.                 mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  59.             }) // 输出文件流格式的文档
  60.             // 官网原生方法是在这里使用saveAs，但是因为业务需求，还需要对生成的多个文件打包，所以选择抛出文件流
  61.             resolve(out)
  62.             // saveAs(out, fileName)
  63.         })
  64.     })
  66. }
  68. const base64DataURLToArrayBuffer = (dataURL) => {
  69.     const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/;
  70.     if (!base64Regex.test(dataURL)) {
  71.         return false
  72.     }
  73.     const stringBase64 = dataURL.replace(base64Regex, "");
  74.     let binaryString;
  75.     if (typeof window !== "undefined") {
  76.         binaryString = window.atob(stringBase64);
  77.     } else {
  78.         binaryString = new Buffer(stringBase64, "base64").toString("binary");
  79.     }
  80.     const len = binaryString.length;
  81.     const bytes = new Uint8Array(len);
  82.     for (let i = 0; i < len; i++) {
  83.         const ascii = binaryString.charCodeAt(i);
  84.         bytes[i] = ascii;
  85.     }
  86.     return bytes
  88. }
  90. //图片链接转base64  
  91. export const UrlToBase64 = (url) => {
  92.     return new Promise((resolve) => {
  93.         // 设置需要文件大小的定值
  94.         var targSize = 512 * 1024 //512KB  
  95.         let timeStamp = new Date().getTime();
  96.         // 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片
  97.         // 这里也可以使用 createElement() 创建 <img>标签，但是多了append()这一步，增加了冗余
  98.         let Img = new Image();
  99.         // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
  100.         Img.src = url + '?' + timeStamp;
  101.         // 解决控制台跨域报错的问题，设置允许跨域
  102.         Img.crossOrigin = 'Anonymous';
  103.         // 获取后缀，这里不用这一步的原因是jpeg对于图片的压缩比更大，
  104.         let ext = Img.src.substring(Img.src.lastIndexOf('.') + 1).toLowerCase();
  105.         ext = "jpeg"
  106.         Img.onload = function () {
  107.             // 设置初始的压缩比
  108.             var quality = 0.5;
  109.             var canvas = document.createElement('canvas'); //创建canvas元素
  110.             // 确保canvas的尺寸和图片一样
  111.             canvas.width = Img.width;
  112.             canvas.height = Img.height;
  113.             // 将图片绘制到canvas中
  114.             canvas.getContext('2d').drawImage(Img, 0, 0, Img.width, Img.height);
  115.             // 转换图片为dataURL
  116.             var base64 = canvas.toDataURL(`image/${ext}`, quality); //压缩语句
  117.             // 判断文件大小是否符合targSize设置大小，没有就进行循环压缩
  118.             while (base64.length > targSize) {
  119.                 quality -= 0.05;
  120.                 base64 = canvas.toDataURL(`image/${ext}`, quality);
  121.             }
  122.             // console.log("-----转换成功");
  123.             resolve(base64);
  124.         };
  125.     });
  126. }/**
  127.    导出docx
  128.    @param { String } tempDocxPath 模板文件路径
  129.     @param { Object } data 文件中传入的数据
  130.     @param { Array } imgSize 文件设置图片大小
  131.    @param { String } fileName 导出文件名称
  132. */
  133. import docxtemplater from "docxtemplater";
  134. import PizZip from "pizzip";
  135. import JSZipUtils from "jszip-utils";
  136. import ImageModule from 'docxtemplater-image-module-free';
  137. import { saveAs } from 'file-saver'
  139. export const exportDocx = (tempDocxPath, data, imgSize = [600, 900], fileName) => {
  140.     // 读取并获得模板文件的二进制内容
  141.     return new Promise((resolve) => {
  142.         JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
  143.             // 抛出异常
  144.             if (error) {
  145.                 console.log("no");
  146.                 throw error
  147.             }
  148.             // 创建一个JSZip实例，内容为模板的内容
  149.             const zip = new PizZip(content)
  150.             // 创建并加载docxtemplater实例对象
  151.             const doc = new docxtemplater().loadZip(zip)
  152.             // 关于模板中图片的设置
  153.             const opts = {}
  154.             opts.centered = true;  // 图片居中，在word模板中定义方式为{%image}
  155.             opts.fileType = "docx"; // 图片所放置的文件格式
  156.             opts.getImage = (chartId) => {
  157.                 return base64DataURLToArrayBuffer(chartId);
  158.             }  // 官网的方法，将图片转成word适用的格式
  159.             opts.getSize = function () {
  160.                 return imgSize // 图片大小，自定义的值[宽,高]
  161.             }
  162.             let imageModule = new ImageModule(opts);
  163.             doc.attachModule(imageModule);
  164.             // 设置模板变量的值
  165.             doc.setData(data)
  166.             try {
  167.                 // 呈现模板，通过对模板中{}的定义字段，填入相关内容，并产生文件
  168.                 doc.render()
  169.             } catch (error) {
  170.                 const e = {
  171.                     message: error.message,
  172.                     name: error.name,
  173.                     stack: error.stack,
  174.                     properties: error.properties
  175.                 }
  176.                 console.log({
  177.                     error: e
  178.                 })
  179.                 throw error
  180.             }
  181.             const out = doc.getZip().generate({
  182.                 type: 'blob',
  183.                 mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  184.             }) // 输出文件流格式的文档
  185.             // 官网原生方法是在这里使用saveAs，但是因为业务需求，还需要对生成的多个文件打包，所以选择抛出文件流
  186.             resolve(out)
  187.             // saveAs(out, fileName)
  188.         })
  189.     })
  191. }
  193. const base64DataURLToArrayBuffer = (dataURL) => {
  194.     const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/;
  195.     if (!base64Regex.test(dataURL)) {
  196.         return false
  197.     }
  198.     const stringBase64 = dataURL.replace(base64Regex, "");
  199.     let binaryString;
  200.     if (typeof window !== "undefined") {
  201.         binaryString = window.atob(stringBase64);
  202.     } else {
  203.         binaryString = new Buffer(stringBase64, "base64").toString("binary");
  204.     }
  205.     const len = binaryString.length;
  206.     const bytes = new Uint8Array(len);
  207.     for (let i = 0; i < len; i++) {
  208.         const ascii = binaryString.charCodeAt(i);
  209.         bytes[i] = ascii;
  210.     }
  211.     return bytes
  213. }
  215. //图片链接转base64  
  216. export const UrlToBase64 = (url) => {
  217.     return new Promise((resolve) => {
  218.         // 设置需要文件大小的定值
  219.         var targSize = 512 * 1024 //512KB  
  220.         let timeStamp = new Date().getTime();
  221.         // 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片
  222.         // 这里也可以使用 createElement() 创建 <img>标签，但是多了append()这一步，增加了冗余
  223.         let Img = new Image();
  224.         // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
  225.         Img.src = url + '?' + timeStamp;
  226.         // 解决控制台跨域报错的问题，设置允许跨域
  227.         Img.crossOrigin = 'Anonymous';
  228.         // 获取后缀，这里不用这一步的原因是jpeg对于图片的压缩比更大，
  229.         let ext = Img.src.substring(Img.src.lastIndexOf('.') + 1).toLowerCase();
  230.         ext = "jpeg"
  231.         Img.onload = function () {
  232.             // 设置初始的压缩比
  233.             var quality = 0.5;
  234.             var canvas = document.createElement('canvas'); //创建canvas元素
  235.             // 确保canvas的尺寸和图片一样
  236.             canvas.width = Img.width;
  237.             canvas.height = Img.height;
  238.             // 将图片绘制到canvas中
  239.             canvas.getContext('2d').drawImage(Img, 0, 0, Img.width, Img.height);
  240.             // 转换图片为dataURL
  241.             var base64 = canvas.toDataURL(`image/${ext}`, quality); //压缩语句
  242.             // 判断文件大小是否符合targSize设置大小，没有就进行循环压缩
  243.             while (base64.length > targSize) {
  244.                 quality -= 0.05;
  245.                 base64 = canvas.toDataURL(`image/${ext}`, quality);
  246.             }
  247.             // console.log("-----转换成功");
  248.             resolve(base64);
  249.         };
  250.     });
  251. }

4、转换图片格式

这一步用于将图片链接转为base64
echarts和mapbox生成图片直接就是base64格式，可以跳过这一步
引入downWord.js中的UrlToBase64方法

  1.   //方法是异步的，有需要可选加await
  2.  let img = await UrlToBase64(url)

5、调用导出函数

data数据格式需要与word模板对应（仅供参考）
word导出 - 图3
word导出 - 图4word导出 - 图5
代码：

  1.  /**
  2.    /waterMinistry是网址后缀，不清楚的可以去vue.config.js文件找一下   
  3.   /temp.docx是文件名
  4.    @param { Object } data 导出需要的数据
  5. */
  6. let doc = await exportDocx('/waterMinistry/temp.docx', data, [150, 100])
  7. let name = '已核查图斑.docx'
  8. saveAs(doc, name)

6、实现效果

word导出 - 图6
注：浏览器对于图片的处理和临时存储数量是有极限的，目前测试结果，最多存储13080张400KB的图片（约5G）。考虑到还有其他网页在共用浏览器缓存，图片总大小最好不要超过4G