vue 导出word文档，支持表格和图片

一、导入包

npm install docxtemplater
npm install pizzip
npm install jszip
npm install jszip-utils
npm install file-saver
npm install docxtemplater-image-module-free
npm install angular-expressions
npm install image-size
二、utils 文件夹下添加 word.js 导出word的方法

/*
 * @Description:
 * @Version: 1.0
 * @Autor: lujun
 * @Date: 2022-01-13 14:37:10
 * @FilePath: \web\src\utils\word.js
 * @LastEditors: lujun
 * @LastEditTime: 2022-01-13 14:37:10
 */
import PizZip from 'pizzip'
import docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

/**
 * 将base64格式的数据转为ArrayBuffer
 * @param {Object} dataURL base64格式的数据
 */
function 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
}

/**
 * 导出word,支持图片
 * @param {Object} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {Object} fileName 导出文件名
 * @param {Object} imgSize 自定义图片尺寸
 */
export const exportWord = (tempDocxPath, wordData, fileName, imgSize) => {
  // 这里要引入处理图片的插件
  var ImageModule = require('docxtemplater-image-module-free')

  const expressions = require('angular-expressions')

  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent(tempDocxPath, function(error, content) {
    if (error) {
      throw error
    }

    expressions.filters.size = function(input, width, height) {
      return {
        data: input,
        size: [width, height]
      }
    }

    // function angularParser(tag) {
    //   const expr = expressions.compile(tag.replace(/’/g, "'"))
    //   return {
    //     get(scope) {
    //       return expr(scope)
    //     }
    //   }
    // }

    // 图片处理
    let opts = {}

    opts = {
      // 图像是否居中
      centered: false
    }

    opts.getImage = chartId => {
      // console.log(chartId);//base64数据
      // 将base64的数据转为ArrayBuffer
      return base64DataURLToArrayBuffer(chartId)
    }

    opts.getSize = function(img, tagValue, tagName) {
      // console.log(img);//ArrayBuffer数据
      // console.log(tagValue);//base64数据
      // console.log(tagName);//wordData对象的图像属性名
      // 自定义指定图像大小
      if (imgSize.hasOwnProperty(tagName)) {
        return imgSize[tagName]
      } else {
        return [600, 350]
      }
    }

    // 创建一个PizZip实例，内容为模板的内容
    const zip = new PizZip(content)
    // 创建并加载docxtemplater实例对象
    const doc = new docxtemplater()
    doc.attachModule(new ImageModule(opts))
    doc.loadZip(zip)

    doc.setData(wordData)

    try {
      // 用模板变量的值替换所有模板变量
      doc.render()
    } catch (error) {
      // 抛出异常
      const e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
      }
      console.log(
        JSON.stringify({
          error: e
        })
      )
      throw error
    }

    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    const out = doc.getZip().generate({
      type: 'blob',
      mimeType:
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    })
    // 将目标文件对象保存为目标类型的文件，并命名
    saveAs(out, fileName)
  })
}
/**
 * 将图片的url路径转为base64路径
 * 可以用await等待Promise的异步返回
 * @param {Object} imgUrl 图片路径
 */
export function getBase64Sync(imgUrl) {
  return new Promise(function(resolve, reject) {
    // 一定要设置为let，不然图片不显示
    const image = new Image()
    // 解决跨域问题
    image.crossOrigin = 'anonymous'
    // 图片地址
    image.src = imgUrl
    // image.onload为异步加载
    image.onload = function() {
      const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      const context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, image.width, image.height)
      // 图片后缀名
      const ext = image.src
        .substring(image.src.lastIndexOf('.') + 1)
        .toLowerCase()
      // 图片质量
      const quality = 0.8
      // 转成base64
      const dataurl = canvas.toDataURL('image/' + ext, quality)
      // 返回
      resolve(dataurl)
    }
  })
}

三、模板文件制作方法
注意：

1）模板文件必须是docx文件。doc文件不能通过修改后缀名变为docx，必须另存时选择docx类型，才能实现类型转变。但是docx是可以通过修改后缀名改为doc文件的，因为office的升级基本都是向下兼容的。

2）使用英文下的花括号；

3）花括号内的键名前后不要有空格，且它与程序中的data对象的键名必须保持一致 ；

4）表格中想要循环添加的数据，需要在开头添加{undefined#键名}，在结尾处添加{undefined/键名}，例如下图的

{#table}和{/table}；

5）图片居中不要使用{%%image2} 

模板文件temp.docx放在public或者static文件夹下 

{description}

{#title} {name}{/title}
姓名	性别	年龄	照片
{#table}{name}	{gender}	{age}	{%image}{/table}

{%image1}

                                                {%image2}

四、方法调用

import { getBase64Sync  exportWord } from '@/utils/word' // 引用包 

async exportWordTest() {
 
	let url = 'http://n.sinaimg.cn/photo/700/w1000h500/20210603/57a6-kracxep9657657.png';
	let url1 ='http://img.mp.itc.cn/upload/20170627/a7c7cc328bc049f895af41123c258935_th.jpg';
	let url2 ='https://imgsa.baidu.com/forum/w%3D580/sign=1f7f688786cb39dbc1c0675ee01709a7/eeaee0faaf51f3de7634b50993eef01f3b297915.jpg';
	let url3 = 'https://img2.baidu.com/it/u=2308269185,3514715988&fm=26&fmt=auto';
 
	let data = {
		description: '可以自定义图片大小：先在word中放置一个示例图片 ',
		title: { name: '测试表格' },
		table: [{
				name: '张三',
				gender: '男',
				age: '49',
				image: await getBase64Sync(url1)
			}, {
				name: '李四',
				gender: '男',
				age: '31',
				image: await getBase64Sync(url2)
			},
			{
				name: '王五',
				gender: '男',
				age: '24',
				image: await getBase64Sync(url3)
			}
		],
		image1: await getBase64Sync(url),
		image2: await getBase64Sync(url)
	};
 
	let imgSize = {
		image: [65, 65],
		image1: [596, 300],
		image2: [435, 193]
	}
    // 调用导出方法
	exportWord("temp.docx", data, "demo.docx",imgSize);
},