前端使用‌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. 输出文档
相关推荐
Amy.Wang17 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景19 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼20 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再24 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55528 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter35 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录39 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
木头没有瓜2 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊3 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉4 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6