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

Posted 2022-10-17 322829

一、导入包

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
姓名	性别	年龄	照片
#tablename	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);
,