Vue2中使用Docxtemplater生成带ECharts的Word报告

发布时间：2026/10/31 15:24:00
Vue2中使用Docxtemplater生成带ECharts的Word报告

1. 项目概述

在Vue2项目中实现纯前端生成Word报告是一个常见的业务需求，特别是需要包含动态数据和可视化图表时。Docxtemplater作为一款强大的Word模板处理库，能够完美解决这个问题。本文将详细介绍如何在Vue2项目中使用Docxtemplater生成包含ECharts图表和表格的Word报告。

2. 技术选型与准备

2.1 核心依赖介绍

要实现这个功能，我们需要以下核心依赖：

  • Docxtemplater：主库，用于处理Word模板
  • PizZip：处理docx文件（zip格式）
  • JSZip-Utils：辅助JSZip处理文件
  • FileSaver：前端文件保存
  • Image Module：处理图片嵌入
  • ECharts：生成可视化图表

2.2 安装依赖

首先安装所有必要的依赖：

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

注意：这里使用了docxtemplater-image-module-free作为图片处理模块，它是专门为前端设计的免费版本。

3. Word模板设计

3.1 基础模板结构

创建一个.docx文件作为模板，模板中可以包含：

  • 静态文本
  • 变量占位符：{variable}
  • 条件判断：{#condition}...{/condition}
  • 循环结构：{#array}...{/array}
  • 图片占位符：{%image}

3.2 表格模板设计

对于表格数据，模板中可以这样设计：

{#departments} | 部门 | 结余金额 | |------|----------| | {name} | {balance} | {/departments}

3.3 图表占位设计

图表通过图片形式插入，模板中只需预留图片位置：

{#showChart} {%chart} {/showChart}

4. 核心实现代码

4.1 初始化ECharts

首先在Vue组件中初始化图表：

<template> <div ref="chart" style="width: 800px; height: 400px"></div> </template> <script> import * as echarts from 'echarts' export default { mounted() { this.initChart() }, methods: { initChart() { const chartDom = this.$refs.chart this.chartInstance = echarts.init(chartDom) const option = { // ECharts配置项 } this.chartInstance.setOption(option) } } } </script>

4.2 图片处理模块

创建图片处理工具函数：

function base64Parser(tagValue) { const base64Regex = /^(?:data:)?image\/(png|jpg|jpeg|svg|svg\+xml);base64,/ const validBase64 = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/ if (!base64Regex.test(tagValue)) return false const stringBase64 = tagValue.replace(base64Regex, "") if (!validBase64.test(stringBase64)) { throw new Error("Invalid base64 data") } const binaryString = window.atob(stringBase64) const len = binaryString.length const bytes = new Uint8Array(len) for (let i = 0; i < len; i++) { bytes[i] = binaryString.charCodeAt(i) } return bytes.buffer }

4.3 导出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' export function exportToWord(templatePath, data, fileName) { JSZipUtils.getBinaryContent(templatePath, (error, content) => { if (error) throw error const imageOptions = { getImage: base64Parser, getSize: () => [600, 350] // 图片大小 } const zip = new PizZip(content) const doc = new Docxtemplater() doc.attachModule(new ImageModule(imageOptions)) doc.loadZip(zip) doc.setData({ ...data, chart: this.chartInstance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' }) }) try { doc.render() } catch (error) { console.error('渲染错误:', error) throw error } const out = doc.getZip().generate({ type: 'blob', mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }) saveAs(out, fileName) }) }

5. 完整实现流程

5.1 组件完整代码

<template> <div> <div ref="chart" style="width: 800px; height: 400px"></div> <button @click="exportReport">导出报告</button> </div> </template> <script> import { exportToWord } from './wordExporter' import * as echarts from 'echarts' export default { data() { return { chartInstance: null, reportData: { title: '年度报告', departments: [ { name: '销售部', balance: 120000 }, { name: '技术部', balance: 80000 } ], showChart: true } } }, mounted() { this.initChart() }, methods: { initChart() { this.chartInstance = echarts.init(this.$refs.chart) const option = { title: { text: '部门结余统计' }, tooltip: {}, xAxis: { data: this.reportData.departments.map(d => d.name) }, yAxis: {}, series: [{ name: '结余', type: 'bar', data: this.reportData.departments.map(d => d.balance) }] } this.chartInstance.setOption(option) }, exportReport() { exportToWord( '/templates/report.docx', this.reportData, '年度报告.docx' ) } } } </script>

5.2 模板文件准备

在public/templates目录下放置report.docx模板文件，内容如下：

{title} 部门结余统计表： {#departments} | 部门名称 | 结余金额 | |----------|----------| | {name} | {balance} | {/departments} {#showChart} 结余统计图表： {%chart} {/showChart}

6. 常见问题与解决方案

6.1 图片不显示问题

可能原因：

  1. 图片base64格式不正确
  2. 图片模块未正确加载

解决方案：

// 确保图片模块正确加载 doc.attachModule(new ImageModule({ getImage: base64Parser, getSize: () => [600, 350] }))

6.2 模板变量不替换

可能原因：

  1. 变量名不匹配
  2. 数据未正确传入

解决方案：

// 确保数据结构与模板匹配 doc.setData({ ...data, chart: chartImage // 确保有chart字段 })

6.3 中文乱码问题

解决方案： 在Word模板中设置正确的字体：

  1. 全选文本
  2. 设置字体为"宋体"或其他中文字体
  3. 保存模板

7. 性能优化建议

  1. 图表渲染优化：
// 在导出前关闭动画 this.chartInstance.setOption({ animation: false })
  1. 大文件处理： 对于大数据量，建议：
  • 分批次处理
  • 使用Web Worker防止界面卡顿
  1. 模板缓存： 缓存已加载的模板二进制内容，避免重复请求。

8. 扩展功能

8.1 动态调整图片大小

const imageOptions = { getSize: (img, tagValue, tagName) => { // 根据标签名返回不同大小 return tagName === 'chart' ? [600, 350] : [300, 200] } }

8.2 多图表支持

模板中可以包含多个图片占位符：

{%chart1} {%chart2}

数据中对应提供多个图表URL：

doc.setData({ chart1: this.chart1.getDataURL(), chart2: this.chart2.getDataURL() })

9. 项目结构建议

推荐的项目目录结构：

src/ components/ ReportGenerator.vue utils/ wordExporter.js chartUtils.js assets/ templates/ report.docx public/ templates/ // 备用模板位置

10. 实际应用中的经验分享

  1. 模板版本控制：
  • 对Word模板进行版本管理
  • 模板变更时更新版本号
  1. 错误处理增强：
try { doc.render() } catch (error) { console.error('渲染错误:', { message: error.message, properties: error.properties }) // 显示用户友好的错误信息 this.$message.error('报告生成失败，请检查数据格式') throw error }
  1. 加载状态管理：
exportReport() { this.loading = true try { await exportToWord(...) } finally { this.loading = false } }

通过以上完整的实现方案，我们可以在Vue2项目中轻松实现包含ECharts图表和表格的Word报告生成功能。这种方法完全在前端完成，不依赖后端服务，适合各种业务场景的需求。