前端使用‌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. 输出文档
相关推荐
樱花开了几轉18 分钟前
React中的合成事件解释和理解
前端·javascript·react.js
code_life22 分钟前
动态格式化时间
javascript
飞翔的佩奇32 分钟前
Java项目:基于SSM框架实现的社区团购管理系统【ssm+B/S架构+源码+数据库+毕业论文+答辩PPT+远程部署】
java·数据库·vue.js·毕业设计·mybatis·答辩ppt·社区团购
小高00743 分钟前
告别“if-else”条件判断:5 个让 JavaScript 逻辑更优雅的写法
前端·javascript
妮妮喔妮1 小时前
重构vite.config.json
javascript·重构·json
_未完待续1 小时前
框架实战指南-错误处理
前端·vue.js
_未完待续1 小时前
框架实战指南-组件参考
前端·vue.js
半花1 小时前
【Vue】通信组件
前端·vue.js
前端 贾公子1 小时前
vue如何在data里使用this
前端·javascript·vue.js
_未完待续2 小时前
框架实战指南-元素参考
前端·vue.js