前端使用‌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. 输出文档
相关推荐
乖女子@@@9 分钟前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo23 分钟前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响29 分钟前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
weixin_5841214344 分钟前
vue3+ts导出PDF
javascript·vue.js·pdf
尚学教辅学习资料1 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring
给月亮点灯|1 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
叫我阿柒啊1 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
@CLoudbays_Martin112 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
缘如风4 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱4 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript