[绍棠] docxtemplater实现纯前端导出word

1.下载需要的依赖

2.util文件夹下创建doc.js文件

doc.js

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import ImageModule from "docxtemplater-image-module-free";
/**导出docx@param { String } tempDocxPath 模板文件路径@param { Object } data 文件中传入的数据@param { String } fileName 导出文件名称
*/
export const exportDocx = (tempDocxPath, data, fileName) => {// 读取并获得模板文件的二进制内容JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {// input.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据// 抛出异常if (error) {throw error}let opts = {};opts.centered = false;opts.getImage = function (tagValue) {return new Promise(function (resolve, reject) {JSZipUtils.getBinaryContent(tagValue, function (error, content) {if (error) {return reject(error);}return resolve(content);});});};//图片有关代码,没有图片的可以删除opts.getSize = (img, tagValue, tagName) => {return [200, 105]; //图片大小 (固定的)// 非固定(这里是设置宽度最大为300px的图片)// return new Promise(function (resolve, reject) {//     let image = new Image();//     image.src = tagValue;//     let imgWidth, imgHeight, scale;//     image.onload = function () {//         imgWidth = image.width;//         imgHeight = image.height;//         scale = 0;//         if (imgWidth > 300) {//             scale = 300 / imgWidth;//             imgWidth = 300;//             imgHeight = imgHeight * scale;//         }//         resolve([imgWidth, imgHeight]);//     };//     image.onerror = function (e) {//         console.log("img, tagValue, tagName : ", img, tagValue, tagName);//         reject(e);//     };// });};let imageModule = new ImageModule(opts);// 创建一个JSZip实例,内容为模板的内容const zip = new PizZip(content)// 创建并加载docxtemplater实例对象const doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile();doc.resolveData({ ...data.form }).then(() => {doc.render()const out = doc.getZip().generate({type: 'blob',mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'}) // Output the document using Data-URIsaveAs(out, fileName)}).catch(err => console.log('errorsss', err))})
}

3.创建.docx文档,示例:

注意: 这个.docx模板放在public文件夹里

word表格里面写的编码的含义:

  • {xxx} 直接渲染数据的xxx字段
  • {#xxx}{/xxx} 循环数组数据
  • {%xxx} 渲染图片

例:若

let content = ["a", "b", "c"];

渲染用

{#content}  // 循环开始{.} // 数组每个成员的内容{/content} // 循环结尾

let jtqkList = [{name:"独生子女", checked:false}, {name:"单亲", checked:false}, {name:"父母离异", checked:false}];

模板

{#jtqkList}{#checked}( √ ){/checked}{^checked}(  ){/checked} {name}{/jtqkList} 

4.要求后端返回数据格式如下:

const data = {title: "工作日报",officeName: '',options: [{index:1, name:'测试数据', number: 1, remark:'这是一条备注信息'}], //存放表格数据filler: '',filledTime: '',imgList: [{img: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA17ORRg.img?w=640&h=336&m=6'},{img: 'https://images.pexels.com/photos/3291250/pexels-photo-3291250.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load'}] //图片数据}

5.调用方法导出word

import { exportDocx } from '@/utils/doc.js'
const exportWord = () => {const data = {form: data}exportDocx('/template.docx', data, `${deta.title}.docx`)
}

成果

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于数据去重

关于数据去重 第一种场景,每行数据所有列的值都是重复的,如以下情景, id 名称 编码 1 haha 001 1 haha 001 2 lala 001 2 lala 001 那么处理以上情景,则很简单,可以创建一个和原表结构相同的新表&#xff0…

力扣hot100 最长有效括号 动态规划

Problem: 32. 最长有效括号 文章目录 思路Code 思路 👨‍🏫 参考题解 Code ⏰ 时间复杂度: O ( n ) O(n) O(n) 🌎 空间复杂度: O ( n ) O(n) O(n) class Solution {public int longestValidParentheses(String s){int n s.length();…

RT-Thread GD32F4xx 软件包agile_modbus

目录 1. agile_modbus2. RT-Thread中添加agile_modbus软件包2.1 menuconfig中添加agile_modbus2.2 agile_modbus 下载2.3 重新生成mdk5工程3. 应用测试3.1 配置使用的串口3.2 Modbus RTU Master3.2.1 Modbus RTU Master测试程序3.2.2 Modbus Master测试结果3.3 Modbus RTU Slav…

Python武器库开发-武器库篇之Fofa-API使用(四十六)

Python武器库开发-武器库篇之Fofa-API使用(四十六) FOFA(FOcus Observation of Futures Assets)是一款专业的网络资产搜索引擎,旨在帮助企业发现和评估网络上的潜在安全风险。FOFA的基本原理是通过搜索引擎的方式,按照关键词对互…

【Redis】更改redis中的value值

今天继续进步一点点~~ 背景:今天有个前端的同事问我,能不能在Redis中他本人登录公众号的 sessionID 加上一列openID 于是我上网查了一堆在Redis里面的命令,以及不同的客户端怎么输入命令,但是后来问了下同事,他就给我…

PDshell16逆向PostgreSQL 工程显示字段comment备注

现状:当刚逆向成功的表结构是没有原来表结构中的,comment备注如下 然后pd逆向工程的sql已经返回了这个备注的含义 解决方案: 1、设置显示注释列 tools——Display Preferences…如下 勾选-按照下面得方式勾选这三个 复制这里的VBS脚本&a…

OpenVINS学习7——评估工具的简单使用

前言 OpenVINS自带评估工具,这里记录一下使用方法,我是以VIRAL数据集为例,但是目前仍然有问题,发现误差很大,我还没搞明白哪里出了问题。 工具介绍 主要参考 https://docs.openvins.com/eval-error.html https://bl…

Windows和Linux访问不了GitHub的解决方法

一、Windows访问不了GitHub 问题描述 使用Windows访问GitHub时,出现如下情况,显示无法访问。 解决方案: 打开域名查询网站:https://tool.chinaz.com/dns 输入GitHub的域名,点击立即检测。 出现如下页面&#xff0c…

实验五 PLSQL编程

🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的很重要&…

git设置代理

git设置代理 git config --global http.proxy 127.0.0.1:7890git查询代理 git config --global http.proxy git取消代理 git config --global --unset http.proxy

Webpack5入门到原理25:总结

我们从 4 个角度对 webpack 和代码进行了优化: 提升开发体验 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。 提升 webpack 提升打包构建速度 使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码,不变的代码使用缓…

【核心复现】基于改进鲸鱼优化算法的微网系统能量优化管理matlab

目录 一、主要内容 1 冷热电联供型微网系统 2 长短期记忆网络(Long Short Term Memory, LSTM) 3 改进鲸鱼优化算法 二、部分代码 三、运行结果 四、下载链接 一、主要内容 该程序为《基于改进鲸鱼优化算法的微网系统能量优化管理》matlab代码,主要内容如下&…

事件驱动架构

请求驱动 服务注册,服务发现,虽然调用地址隐藏了,但是调用stub必须相同。 rpc通信,远程调用。 生产者和消费者要有相同的stub存根。 消费者和生产者的调用接口是耦合的。 事件驱动 核心:上下游不进行通信 中间通过M…

@EnableMvc的原理

所以,加了这个注解,就会有一写初始化的操作 Import(DelegatingWebMvcConfiguration.class) public interface EnableWebMvc { } 导入了DelegatingWebMvcConfiguration extends WebMvcConfigurationSupport{// WebMvcConfigurerComposite implements WebMvcConfigurer// WebMvc…

Ubuntu安装最新版Docker和Docker-Compose

ubuntu环境搭建专栏🔗点击跳转 Ubuntu系统环境搭建(十)——Ubuntu安装最新版Docker和Docker Compose 文章目录 Ubuntu系统环境搭建(十)——Ubuntu安装最新版Docker和Docker Compose1.添加Docker库1.1 安装必要的证书并…

实验六 模式对象管理与安全管理

🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的很重要&…

Qt5.15.2中加入图片资源

系列文章目录 文章目录 系列文章目录前言一、加入图片资源二、代码 前言 以前用的Qt5.15.2之前的版本,QtCreator默认的工程文件是*.pro,现在用5.15.2创建工程默认的工程文件是CMameList.txt,当然在创建项目时,仍然可以使用pro工程文件用QtCr…

#laravel 通过手动安装依赖PHPExcel#

场景:在使用laravel框架的时候,需要读取excel,使用 composer install XXXX 安装excel失败,根据报错提示,php不兼容。 因为PHPHExcel使用的php版本 和项目运所需要的php 版本不兼容,php8的版本 解决方法:下载手工安装&a…

softmax回实战

1.数据集 MNIST数据集 (LeCun et al., 1998) 是图像分类中广泛使用的数据集之一,但作为基准数据集过于简单。 我们将使用类似但更复杂的Fashion-MNIST数据集 (Xiao et al., 2017)。 import torch import torchvision from torch.utils import data from torchvisi…

JVM篇--垃圾回收高频面试题

JVM垃圾回收 1 简单说下Java垃圾回收机制? 首先在java运行过程中,其实程序员并不需要去显示的调用程序来释放对象的内存,而是由虚拟机来完成的,具体来看是在jvm中有个垃圾回收线程,这个线程是个守护线程,…