Vue3使用docxtemplater插件导入Word文档

在前端开发工作中，我们常常需要将数据导出为各种格式的文件，例如PDF、Excel或者Word文档。本文将介绍如何在一个Vue3项目中，利用docxtemplater库生成一个包含Echarts图表以及表格数据的Word文档。

准备工作

首先，确保您的Vue3项目环境中已安装以下依赖：

npm install docxtemplater docxtemplater-image-module-free file-saver pizzip jszip-utils angular-expressions  html2canvas --save

这里我们安装了用于生成Word文档的docxtemplater及相关插件。

初始化Echarts图表

为了将Echarts图表嵌入到Word文档中，我们需要先创建一个图表实例，并将其渲染到页面上。

import * as echarts from 'echarts';

// 初始化 Echarts 图表
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

const option = {
    title: { text: '示例图表' },
    tooltip: {},
    xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart.setOption(option);

使用 getDataURL 获取图片数据 URL

getDataURL 方法允许我们直接从图表实例中获取图片数据 URL。通过设置一些选项，我们可以定制导出图片的属性，比如分辨率、背景颜色等。

function exportChartAsImage() {
    const dataURL = myChart.getDataURL({
        pixelRatio: 5, // 提高图片质量
        backgroundColor: '#013970', // 设置背景颜色
        excludeComponents: ['toolbox'], // 排除工具箱组件
        type: 'png' // 输出图片类型为PNG
    });
    return dataURL;
}

准备模板文件

首先，你需要准备一个 .docx 模板文件，该文件可以使用 Microsoft Word 创建。在这个模板文件中，你将定义变量占位符，这些占位符将在生成文档时被实际数据替换。

示例模板文件结构

在这个模板中，{title} 是文章标题变量，{ #tableData} {/tableData}代表表格的数据，{%imgUrl是图表的图片数据 URL。

使用docxtemplater创建Word文档

最后一步，我们需要使用docxtemplater来创建Word文档，并将之前保存的图表图片和一些表格数据插入进去。

const tableData = [{
    name: "名称",
    value: "值"
  }];
  const data = {
    title: '我是标题',
    tableData: tableData,
    imgUrl: exportChartAsImage()
  };
  const imgSize = {
    imgUrl: [600, 300]
  };
  ExportBriefDataDocx(
    "template.docx",    // 模板路径
    data,   // 数据
    "mydoc.docx",   // 文件名
    imgSize
  );

/**
 * 导出word文档（带图片）
 *
 */
import Docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import ImageModule from 'docxtemplater-image-module-free'
import expressions from 'angular-expressions'

export const ExportBriefDataDocx = (tempDocxPath, data, fileName, imgSize) => {
  expressions.filters.lower = function(input) {
    if (!input) return input
    return input.toLowerCase()
  }

  JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
    if (error) {
      console.log(error)
    }
    expressions.filters.size = function(input, width, height) {
      return {
        data: input,
        size: [width, height]
      }
    }
    let opts = {}
    opts = {
      // 图像是否居中
      centered: false
    }
    opts.getImage = (chartId) => {
      return base64DataURLToArrayBuffer(chartId)
    }
    opts.getSize = function(img, tagValue, tagName) {
      if (imgSize[tagName]) {
        return imgSize[tagName]
      } else {
        return [1200, 400]
      }
    }
    // 创建一个JSZip实例，内容为模板的内容
    const zip = new PizZip(content)
    // 创建并加载 Docxtemplater 实例对象
    // 设置模板变量的值
    const doc = new Docxtemplater()
    doc.attachModule(new ImageModule(opts))
    doc.loadZip(zip)
    doc.setOptions({
      nullGetter: function() { // 设置空值 undefined 为''
        return ''
      }
    })
    doc.setData(data)
    try {
      // 呈现文档，会将内部所有变量替换成值，
      doc.render()
    } catch (error) {
      const e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
      }
      console.log('err', { error: e })
      // 当使用json记录时，此处抛出错误信息
      throw error
    }
    // 生成一个代表Docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    const out = doc.getZip().generate({
      type: 'blob',
      mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    })
    // 将目标文件对象保存为目标类型的文件，并命名
    saveAs(out, fileName)
  })
}

结语

通过以上步骤，我们可以在Vue3项目中生成一个包含Echarts图表和表格数据的Word文档。希望这篇文章能对你有所帮助！