前端使用‌Docxtemplater模板语法进行数据匹配,动态生成word文档

Docxtemplater是一个用于生成和操作Word文档的JavaScript库,它允许开发者在前端动态生成和编辑Word文档,用于动态生成报表等功能。

使用方法

  1. 安装依赖‌:首先,你需要安装Docxtemplater及其相关依赖。可以通过npm安装这些库:

    复制代码
    pnpm install docxtemplater pizzip jszip-utils file-saver
  2. 引入依赖‌:在项目中引入必要的模块:

    javascript 复制代码
    import Docxtemplater from 'docxtemplater';
    import PizZip from 'pizzip';
    import { saveAs } from 'file-saver';
  3. 创建模板文档‌:在public文件下创建.docx模板文档,变量用大括号包裹。{#变量}表示循环

4. ‌模板数据匹配‌:在页面中创建对象进行字段对应

xml 复制代码
<template>
  <div>
    <!-- 下载和打印按钮 -->
    <button v-if="outputDoc" @click="downloadDocument">
      Download Document
    </button>
    <button v-if="outputDoc" @click="printDocument">Print Document</button>

    <!-- 错误提示 -->
    <div v-if="errorMessage" style="color: red">
      {{ errorMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import { saveAs } from "file-saver";

const outputDoc = ref(null); // 存储生成的文档
const errorMessage = ref(""); // 存储错误信息
const userData = {
  name: "John Doe",
  email: "john.doe@example.com",
  age: 30,
  option: [
    {
      id: 1,
      gender: 1,
      address: "qqq",
    },
    {
      id: 2,
      gender: 2,
      address: "www",
    },
    {
      id: 3,
      gender: 3,
      address: "eee",
    },
  ],
};

// 读取并处理模板文件
const processTemplate = async () => {
  try {
    // 从 public 目录中读取模板文件
    const response = await fetch("/template.docx");

    const arrayBuffer = await response.arrayBuffer();
    const zip = new PizZip(arrayBuffer);
    const doc = new Docxtemplater().loadZip(zip);

    // // 设置模板数据
    doc.setData(userData);

    try {
      doc.render(); // 渲染模板
      errorMessage.value = ""; // 清空错误信息
    } catch (error) {
      console.error("Error rendering template:", error);
      errorMessage.value =
        "Error rendering template. Please check the template and data.";
      if (error.properties && error.properties.errors) {
        error.properties.errors.forEach((err) => {
          console.error("Error details:", err);
        });
      }
      return;
    }

    // 生成输出文档
    const out = doc.getZip().generate({ type: "blob" });
    outputDoc.value = out;
  } catch (error) {
    console.error("Error loading template file:", error);
    errorMessage.value = "Error loading template file.";
  }
};

// 下载文档
const downloadDocument = () => {
  saveAs(outputDoc.value, "output.docx");
};

// 打印文档
const printDocument = () => {
  const url = URL.createObjectURL(outputDoc.value);
  const printWindow = window.open(url);
  printWindow.onload = () => {
    printWindow.print();
  };
};

// 组件挂载时处理模板
onMounted(() => {
  processTemplate();
});
</script>
  1. 页面样式 6. 输出文档
相关推荐
南玖i1 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
YAY_tyy1 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
bitbitDown6 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy6 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip7 小时前
实现AI对话光标跟随效果
前端·javascript
闭着眼睛学算法8 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴8 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.9 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰9 小时前
vue核心原理实现
前端·javascript·vue.js