前端实现下载word（多个word下载）-- docxtemplater

news2024/10/2 1:39:38

文章目录

    • 🔎什么是docxtemplater？
    • 👻docxtemplater语法👻
      • 普通插值
      • for循环
      • 选择
      • 图片（🌰代码）
    • 👻实现下载👻
      • 安装依赖
      • 🌰完整代码
      • 关键逻辑解释
    • 👻实现多文件下载👻
      • 🌰完整代码
      • 关键逻辑解释
    • 👻推荐文章👻

🔎什么是docxtemplater？

docxtemplater 是一个邮件合并工具，以编程方式使用，处理条件、循环，并可扩展以插入图像、html或表格。

docxtemplater 使用 Javascript 对象（或 JSON）作为数据输入，因此也可以轻松地从其他语言中使用（请参阅docker 版本）。

它处理 docx 和 pptx 文件，并且通过附加模块，它可以处理 xlsx 模板

它的工作方式与模板引擎相同，您给它一个模板+一些数据，它就会输出一个生成的文档。

👻docxtemplater语法👻

普通插值

直接在word文档中使用{}进行包裹字段即可，如图所示：

在这里插入图片描述

for循环

常用于列表中（此处只探讨简单的表格，复杂合并表格日后再做探讨）

参数对照

{
    ...,
    arr:[
        {
            name: "xxx",
            gender: "xxx",
            age: "xxx"
        },
        {
            name: "xxx",
            gender: "xxx",
            age: "xxx"
        },
        {
            name: "xxx",
            gender: "xxx",
            age: "xxx"
        },
    ],
    ...
}

word中占位语法

在这里插入图片描述

选择

常用于勾选，和循环的语法一样

{#list}{/list} 循环、if判断

{#list}{/list}{^list}{/list} if else

图片（🌰代码）

docxtemplater-image-module-free // 导出图片的话需要这个插件

🌰官方代码

JSZipUtils.getBinaryContent('examples/image-example.docx', function (error, content) {
    if (error) {
      console.error(error);
      return;
    }
    var opts = {}
    opts.centered = false;
    opts.getImage = function (tagValue, tagName) {
      return new Promise(function (resolve, reject) {
        JSZipUtils.getBinaryContent(tagValue, function (error, content) {
          if (error) {
            return reject(error);
          }
          return resolve(content);
        });
      });
    }
    opts.getSize = function (img, tagValue, tagName) {
      // FOR FIXED SIZE IMAGE :
      return [150, 150];
 
      // FOR IMAGE COMING FROM A URL (IF TAGVALUE IS AN ADRESS) :
      // To use this feature, you have to be using docxtemplater async
      // (if you are calling setData(), you are not using async).
      return new Promise(function (resolve, reject) {
        var image = new Image();
        image.src = url;
        image.onload = function () {
          resolve([image.width, image.height]);
        };
        image.onerror = function (e) {
          console.log('img, tagValue, tagName : ', img, tagValue, tagName);
          alert("An error occured while loading " + tagValue);
          reject(e);
        }
      });
    }
 
    var imageModule = new ImageModule(opts);
 
    var zip = new JSZip(content);
    var doc = new docxtemplater()
      .loadZip(zip)
      .attachModule(imageModule)
      .compile();
 
    doc.resolveData({
      image: 'examples/image.png'
    }).then(function () {
      console.log('ready');
      doc.render();
      var out = doc.getZip().generate({
        type: "blob",
        mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      saveAs(out, "generated.docx");
    })
  });

在这里就不做赘述，可以搜一下

👻实现下载👻

我们来实现一种最基础的下载，下载单个文件

安装依赖

npm install  docxtemplater pizzip --save  // 处理docx模板
npm install  jszip-utils --save
npm install  jszip --save   
npm install  file-saver --save  // 处理输出文件

🌰完整代码

import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import PizZipUtils from "pizzip/utils/index.js";
import { saveAs } from "file-saver";

function loadFile(url, callback) {
    PizZipUtils.getBinaryContent(url, callback);
}

/**
 * 渲染输出文件
 * @param {*} fileUrl 文件所在地址
 * @param {*} docxParamsArr  doc文档参数数组
 * @param {*} outDocName 输出文件名
 */
// eslint-disable-next-line no-unused-vars
export function renderDocs(fileUrl, docxParams, outDocName) {
    loadFile(fileUrl, function (
        error,
        content
    ) {
        if (error) {
            throw error;
        }
        const zip = new PizZip(content);
        const doc = new Docxtemplater(zip, { paragraphLoop: true, linebreaks: true });
        doc.render(docxParams);
        const out = doc.getZip().generate({
            type: "blob",
            mimeType:
                "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        saveAs(out, `${outDocName}output.docx`);

    });
}

关键逻辑解释

  • export function renderDocs(fileUrl, docxParams, outDocName) {...}：这行代码导出了renderDocs函数，这意味着它可以被其他模块导入和使用。函数有三个参数：fileUrl（文件的 URL）、docxParams（doc 文档的参数）和outDocName（输出文件名）。
  • loadFile(fileUrl, function (error, content) {...})：在renderDocs函数内部，它调用了loadFile函数，传递了fileUrl和一个回调函数。loadFile函数可能是一个异步函数，用于从给定的 URL 加载文件内容。回调函数有两个参数：error（如果发生错误）和content（文件的内容）。
  • if (error) {...}：在回调函数内部，检查是否发生错误。如果error存在，通过throw error;抛出错误，阻止函数继续执行。
  • const zip = new PizZip(content);：如果成功加载文件内容，代码使用PizZip库创建一个新的PizZip对象。这个对象代表从 URL 下载的文件的 ZIP 归档，可以通过它来访问归档中的内容。
  • const doc = new Docxtemplater(zip, { paragraphLoop: true, linebreaks: true });：创建一个Docxtemplater对象，将PizZip对象和一个配置对象传给它。配置对象设置了paragraphLoop和linebreaks为true，这可能使得Docxtemplater在渲染过程中处理段落循环和行长换行。
  • doc.render(docxParams);：用Docxtemplater对象的render方法来渲染docxParams。docxParams可能是一个包含模板变量的对象，这些变量将被替换为模板中的相应占位符。
  • const out = doc.getZip().generate({...});：渲染完成后，使用doc.getZip().generate({ type: "blob", mimeType: "..." })生成包含渲染后文档内容的BLOB。这个BLOB可以被保存为文件。
  • saveAs(out, ${outDocName}output.docx);：最后，使用saveAs函数保存生成的文档。文件名由outDocName和output.docx组成，outDocName是函数参数，output.docx是固定的文件名后缀。

👻实现多文件下载👻

现实应用中难免会同时下载多个文件， 如果循环下载，浏览器会反复确认下载（如果浏览器开始下载提示的话），用户体验不是特别友好，操作也十分繁琐

我们可以把多个文件放入文件夹中，然后整成压缩包，进行下载

下面我们来实现一下(在上面的基础之上)

🌰完整代码

import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import PizZipUtils from "pizzip/utils/index.js";
import { saveAs } from "file-saver";

function loadFile(url, callback) {
    PizZipUtils.getBinaryContent(url, callback);
}

/**
 * 渲染输出文件
 * @param {*} fileUrl 文件所在地址
 * @param {*} docxParamsArr  doc文档参数数组
 * @param {*} outDocName 输出文件名
 */
// eslint-disable-next-line no-unused-vars
export function renderDocs(fileUrl, docxParams, outDocName) {
    loadFile(fileUrl, function (
        error,
        content
    ) {
        if (error) {
            throw error;
        }
        const zip = new PizZip(content);
        const doc = new Docxtemplater(zip, { paragraphLoop: true, linebreaks: true });
        doc.render(docxParams);
        const out = doc.getZip().generate({
            type: "blob",
            mimeType:
                "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        saveAs(out, `${outDocName}output.docx`);
    });
}

关键逻辑解释

这段代码定义了一个名为renderDocs的函数，用于根据提供的文件URL、docx参数数组和输出文件名来渲染和生成文档文件。具体来说，renderDocs函数做了以下几件事：

  1. 检查docxParamsArr数组的长度：

    • 如果数组长度为1，则创建一个Docxtemplater对象，将PizZip对象和一个配置对象传递给它。配置对象中设置了paragraphLoop和linebreaks为true，然后使用该对象渲染docxParamsArr[0]（数组中的第一个模板参数）。
    • 渲染完成后，它使用doc.getZip().generate({ type: "blob", mimeType: "... })生成一个包含渲染后文档内容的BLOB。
    • 最后，它使用saveAs(out, ${outDocName}output.docx);下载生成的文档，文件名根据提供的outDocName加上后缀output.docx。

  2. 如果docxParamsArr数组的长度不为1，则创建一个JSZip对象用于生成一个多文档的ZIP文件：

    • 对于docxParamsArr中的每个项，它创建一个Docxtemplater对象，将PizZip对象和一个配置对象传递给它。配置对象中设置了paragraphLoop和linebreaks为true，然后使用该对象渲染相应的模板参数。
    • 对于每次渲染，它使用doc.getZip().generate({ type: "blob", mimeType: "... })生成一个BLOB，并将其作为文件添加到JSZip对象中，文件名根据索引值确定。
    • 渲染和添加所有文件后，它使用_zip.generateAsync({ type: "blob" })生成包含所有文件的ZIP BLOB。
    • 最后，它使用saveAs(content, ${outDocName}.zip);下载生成的ZIP文件，文件名根据提供的outDocName加上后缀.zip。

注意

文件名字不要一样，要不然会直接替换，多个文件下载，文件名字要实现唯一性

👻推荐文章👻

docxtemplater官方文档

前端使用docxtemplater导出word文档最佳实践

docxtemplater-image-module-free

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1979419.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CSP-J 复赛 模拟题 解析版

CSP-J 复赛 模拟题 解析版

根据解析写代码1&#xff1a; #include <bits/stdc.h> using namespace std; long long a[101010]; long long b[101010]; int main(){bool flag0;long long t;cin>>t;while(t--){long long n,k;cin>>n>>k;for(int i1;i<n;i){cin>>a[i]>…
阅读更多...
kickstart自动安装脚本

kickstart自动安装脚本

1、准备阶段 #开启图形 init 5 ​ #安装带GUI的服务器包组 yum -y groupinstall "Server with GUI" ​ #在xshell做需要加X ssh -Xl root 172.25.254.128 ​ #开启图形 gedit ​ 2、kickstart [rootpxe ~]# cat /root/anaconda-ks.cfg #此文件是在系统安装好后…
阅读更多...
大数据Flink（一百零九）：阿里云Flink的基本名称概念

大数据Flink（一百零九）：阿里云Flink的基本名称概念

文章目录 阿里云Flink的基本名称概念 一、层次结构 二、​​​​​​​​​​​​​​概念说明 1、工作空间&#xff08;Workspace&#xff09; 2、项目空间&#xff08;Namespace&#xff09; 3、资源&#xff08;Resource&#xff09; 4、草稿&#xff08;Draft&#…
阅读更多...
将本地微服务发布到docker镜像二：

将本地微服务发布到docker镜像二：

上一篇文章我们介绍了如何将一个简单的springboot服务发布到docker镜像中&#xff0c;这一篇我们将介绍如何将一个复杂的微服务&#xff08;关联mysql、redis&#xff09;发布到docker镜像。 我们将使用以下两种不同的方式来实现此功能。 redis、mysql、springboot微服务分开…
阅读更多...
linux的自动检测的脚本：用于检测应用程序状态的linux脚本

linux的自动检测的脚本：用于检测应用程序状态的linux脚本

目录 一、要求 1、需求内容 2、分析 二、脚本介绍 1、脚本代码 2、脚本解释 &#xff08;1&#xff09;脚本结构 &#xff08;2&#xff09;应用程序和服务列表 &#xff08;3&#xff09;日志文件路径 &#xff08;4&#xff09;测试 URL 列表 &#xff08;5&#…
阅读更多...
智能小程序 Ray 开发面板 SDK —— 无线开关一键执行模板教程（一）

智能小程序 Ray 开发面板 SDK —— 无线开关一键执行模板教程（一）

1. 准备工作 前提条件 已阅读 Ray 新手村任务&#xff0c;了解 Ray 框架的基础知识已阅读 使用 Ray 开发万能面板&#xff0c;了解 Ray 面板开发的基础知识 构建内容 在此 Codelab 中&#xff0c;您将利用面板小程序开发构建出一个支持一键执行及自动化的无线开关面板&…
阅读更多...
HCIP----BGP综合实验

HCIP----BGP综合实验

一、实验拓扑 二、实验要求 三、实验思路 1.基于172.16.0.0/16根据实验拓扑图进行IP地址规划&#xff0c;规划过程如下&#xff1a; 2.根据上述的IP地址的规划进行配置&#xff0c;配置完后在AS2中配置OSPF使其内部实现全网通&#xff08;互相建邻的条件&#xff09;。 3.在A…
阅读更多...
keil编程中#pragma NOAREGS的作用和优点

keil编程中#pragma NOAREGS的作用和优点

参考 功能 不直接操作内存地址 #pragma NOAREGS在Keil中的使用含义是禁用自动分配寄存器&#xff0c;开发人员指定控制的寄存器。‌例如中断的执行使用的寄存器需要人为的指定&#xff0c;避免分配同样的寄存器导致数据错误。对寄存器R0到R7不直接操作寄存器地址&#xff0c…
阅读更多...
C# 设计模式六大原则之依赖倒置原则

C# 设计模式六大原则之依赖倒置原则

总目录 前言 1 基本介绍 1. 定义 依赖倒置原则 Dependence Inversion Principle&#xff0c;简称&#xff1a;DIP。 依赖倒置原则&#xff1a;高层模块不应该依赖低层模块&#xff0c;二者都应该依赖其抽象&#xff1b;抽象不应该依赖细节&#xff0c;细节应该依赖抽象。 2…
阅读更多...
GO之基本语法

GO之基本语法

一、Golang变量 一&#xff09;变量的声明&#xff1a;使用var关键字 Go语言是静态类型语言 Go语言的基本类型有&#xff1a; boolstringint、int8、int16、int32、int64uint、uint8、uint16、uint32、uint64、uintptrbyte // uint8 的别名rune // int32 的别名 代表一个 Unic…
阅读更多...
CTF-web 基础 网络协议

CTF-web 基础 网络协议

网络协议 OSI七层参考模型&#xff1a;一个标准的参考模型 物理层 网线&#xff0c;网线接口等。 数据链路层 可以处理物理层传入的信息。 网络层 比如IP地址 传输层 控制传输的内容的传输&#xff0c;在传输的过程中将要传输的信息分块传输完成之后再进行合并。 应用…
阅读更多...
sql语句精讲

sql语句精讲

目录 一、MySql的细节知识 SQL语句的结束 SQL语句的大小写 SQL语句中的空格 SQL查询结果并排序 WHERE和ORDER BY的位置 常用数据类型 MYSQL比较运算符 MYSQL算术运算符​编辑 MYSQL逻辑运算符 运算符的优先级 二、MySql数据库的基本操作 1.创建数据库 2.选择数据…
阅读更多...
kubenetes证书续签

kubenetes证书续签

转载&#xff1a;k8s证书续签 1 检查证书年限 kubeadm certs check-expiration 2 对现有证书进行备份 # 备份kubeadm cp -ra /usr/bin/kubeadm /usr/bin/kubeadm.bak # 备份证书 cp -ra /etc/kubernetes /etc/kubernetes.bak 3 重新编译kubeadm 拉取k8s仓库代码 git clone…
阅读更多...
【数据分析--Pandas实战指南在真实世界数据中的应用】

【数据分析--Pandas实战指南在真实世界数据中的应用】

前言&#xff1a; &#x1f49e;&#x1f49e;大家好&#xff0c;我是书生♡&#xff0c;本阶段和大家一起分享和探索数据分析—基础介绍&#xff0c;本篇文章主要讲述了&#xff1a;数据分析的介绍&#xff0c;Python开源库&#xff0c;配置Jupyter&#xff0c;Pandas读取数据…
阅读更多...
echarts 漏斗图 渐变金字塔

echarts 漏斗图 渐变金字塔

使用echarts实现金字塔效果&#xff0c;颜色渐变&#xff0c;左右显示其对应的值 效果&#xff1a; 如果要实现一个正三角的形状&#xff0c;需要在data数组中&#xff0c;将value赋值成有序递增&#xff0c;bl代表他的分值&#xff0c;显示在左侧。 var data [{name: "…
阅读更多...
NSS [SWPUCTF 2022 新生赛]file_master

NSS [SWPUCTF 2022 新生赛]file_master

NSS [SWPUCTF 2022 新生赛]file_master 开题&#xff0c;一眼文件上传。 network看看返回包。后端语言是PHP。 除了文件上传还有个查看文件功能。 起手式查询/etc/passwd&#xff0c;发现查询方法是GET提交参数&#xff0c;后端使用file_get_contents()函数包含文件。同时有op…
阅读更多...
MySQL基础练习题21-按日期分组销售产品

MySQL基础练习题21-按日期分组销售产品

目录 题目 准备数据 分析数据 总结 题目 找出每个日期、销售的不同产品的数量及其名称。每个日期的销售产品名称应按词典序排列。 返回按 sell_date 排序的结果表。 准备数据 ## 创建库 create database db; use db;## 创建表 Create table If Not Exists Activities (s…
阅读更多...
初阶数据结构4 二叉树

初阶数据结构4 二叉树

1. 树 1.1 树的概念与结构 树是⼀种⾮线性的数据结构&#xff0c;它是由 n&#xff08;n>0&#xff09; 个有限结点组成⼀个具有层次关系的集合。把它叫做树是因为它看起来像⼀棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;⽽叶朝下的。 有⼀个特殊的结点&#…
阅读更多...
Flink实时数仓（六）【DWD 层搭建（四）交易域、互动域、用户域实现】

Flink实时数仓（六）【DWD 层搭建（四）交易域、互动域、用户域实现】

前言 今天的任务是完成 DWD 层剩余的事实表&#xff1b;今年的秋招开得比往年早&#xff0c;所以要抓紧时间了&#xff0c;据了解&#xff0c;今年的 hc 还是不多&#xff0c;要是晚点投铁定寄中寄了&#xff1b; 今天还是个周末&#xff0c;不过记忆里我好像整个大学都没有好好…
阅读更多...
如何实现ElementUI表单项label的文字提示？

如何实现ElementUI表单项label的文字提示？

在Vue和ElementUI的丰富组件库中，定制化表单是常见的需求之一。那么如何在表单项label后添加文字提示，以提升用户体验呢？ 首先我们来看一下效果图： 这里我们鼠标移动到❓图标上就会出现提示 在 ElementUI 中，el-form-item 组件允许使用 slot 自定义 label。通过在 el-fo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023