【word导出带图片】使用docxtemplater导出word,通知书形式的word

一、demo-导出的的

二、代码操作

1、页面呈现

项目要求,所以页面和导出来的word模版一致

2、js代码【直接展示点击导出的js代码】

使用插件【先下载这五个插件,然后页面引入插件】

import docxtemplater from 'docxtemplater'

import PizZip from 'pizzip'

import JSZipUtils from 'jszip-utils'

import ImageModule from 'docxtemplater-image-module-free'

import { saveAs } from 'file-saver'

 1>代码

    expeortexcel() {clearTimeout(this.timer) //清除延迟执行this.faultlist = []this.faultpic = []const exportData = this.data// 处理图片const crfile = exportData.contractorResponsiblePerson[0].linkconst drfile = exportData.drawResponsiblePerson[0].linkif (crfile != '') {this.UrlToBase64(crfile, (dataURL) => {exportData['crimg'] = dataURL})}if (drfile != '') {this.UrlToBase64(drfile, (dataURL) => {exportData['drimg'] = dataURL})}this.faultlist.push(exportData)this.timer = setTimeout(() => {//设置延迟执行this.export2Word(this.faultlist)}, 5000)},
// 处理导出图片数据UrlToBase64(url, callback) {console.log(url, 'url===')let image = new Image()let that = this//解决跨域问题image.setAttribute('crossOrigin', 'anonymous')image.src = urlimage.onload = () => {var canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightvar context = canvas.getContext('2d')context.drawImage(image, 0, 0, image.width, image.height)var quality = 0.8//这里的dataurl就是base64类型var dataURL = canvas.toDataURL('image/png', quality)callback ? callback(dataURL) : null //调用回调函数}},//导出文件export2Word(faultlistd) {//v:图片路径,t:时间字符串,name:导出文件名称--变量需自己定制,此处为举例let self = thisJSZipUtils.getBinaryContent(window.location.origin + '/tinggong.docx', //需要导出的模板文件地址function (error, content) {if (error) {throw error}let zip = new PizZip(content)let doc = new docxtemplater().loadZip(zip)// 图片处理const opts = {}opts.centered = false // 图片居中,在word模板中定义方式为{%image}opts.fileType = 'docx'opts.getImage = (tagValue, tagName) => {const base64Value = self.base64DataURLToArrayBuffer(tagValue)if (base64Value) {return base64Value}}opts.getSize = function (img, tagValue, tagName) {const sizeOf = require('image-size')const buffer = Buffer.from(img, 'binary')const sizeObj = sizeOf(buffer)const forceWidth = 100const ratio = forceWidth / sizeObj.widthreturn [forceWidth, Math.round(sizeObj.height * ratio)]}let imageModule = new ImageModule(opts)doc.attachModule(imageModule)setTimeout(() => {doc.setData({//设置模板数据// compname: cname,listfa: faultlistd,// listimg: faultpicd,})try {doc.render()} catch (error) {let e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties,}console.log(JSON.stringify({ error: e }))throw error}let out = doc.getZip().generate({type: 'blob',mimeType:'application/vnd.openxmlformats-officedocument.wordprocessingml.document', //导出文件格式})saveAs(out, '停工通知书.docx')}, 4000)},)},//获取base64格式图片base64DataURLToArrayBuffer(dataURL) {const base64Regex = /^data:image\/(png|jpg|svg|svg);base64,/if (!base64Regex.test(dataURL)) {return false}const stringBase64 = dataURL.replace(base64Regex, '')let binaryStringif (typeof window !== 'undefined') {binaryString = window.atob(stringBase64)} else {binaryString = Buffer.from(stringBase64, 'base64').toString('binary')}const len = binaryString.lengthconst bytes = new Uint8Array(len)for (let i = 0; i < len; i++) {const ascii = binaryString.charCodeAt(i)bytes[i] = ascii}return bytes.buffer},

1、this.data是接口返回的数据

2、UrlToBase64处理图片数据

3、export2Word导出文件操作

三、通知书模版【毕竟放在public下-且后缀是.docx】 

【语法:】

listfa是数组,#开头, /结束     

{%drimg}   图片格式前面需要加%

四、拓展docxtemplater语法

官网:Docxtemplater | Word, Powerpoint, Excel generation using templates in your application | docxtemplater

1、基础

       Hello {name} !   //  得到 —— Hello John !


     

{"name": "John"}  // 数据格式

2、条件  开始    结束

{#hasKitty}Cat’s name: {kitty}{/hasKitty}
{#hasDog}Dog’s name: {dog}{/hasDog} 

{"hasKitty": true,"kitty": "Minie""hasDog": false,"dog": null
}// 得到Cat’s name: Minie

3、list集合

{#products}
{name}, {price} ¥
{/products}

 "products": [{ "name": "西服外套", "price": 100 },{ "name": "皮鞋", "price": 200 },{ "name": "劳动力", "price": 0 }]// 得到 西服外套, 100 ¥皮鞋, 200 ¥劳动力, 0¥

4、循环遍历一个包含原始数据的数组

{#products} {.} {/products}

 "products": ["包子", "饺子", "麻辣烫"]// 得到 包子 饺子 麻辣烫

5、循环展示列表【#开头   /结束】

        Nameagephone
{#users}{name}{age}{phone}{/}
 

 

"users": [{ "name": "John", "age": 22, "phone": "+33653454343" },{ "name": "Mary", "age": 25, "phone": "+33666666666" }]

得到:

 Nameagephone
John22+33653454343
Mary25+33666666666

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

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

相关文章

LTE PSS主同步信号搜索 MATLAB实现

本期带来PSS相关检测说明和MATLAB实现&#xff0c;本期只讲相关方面的&#xff0c;所以MATLAB实现也是相关的部分&#xff0c;频偏估计方面的待下期开讲。 LTE 4G PSS搜索分为TDD搜索和FDD搜索&#xff0c;但是对于 TDD 和 FDD 而言&#xff0c;PSS同步信号的结构是完全一样的&…

sheng的学习笔记-AI-半监督聚类

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 半监督学习&#xff1a;sheng的学习笔记-AI-半监督学习-CSDN博客 聚类&#xff1a;sheng的学习笔记-AI-聚类(Clustering)-CSDN博客 均值算法&#xff1a;sheng的学习笔记-AI-K均值算法_k均值算法怎么算迭代两次后的最大…

图形验证码从设计到实现

验证码的使用场景 图形验证码在我们的日常使用中是非常常见的&#xff0c;比如一些App、小程序、PC网站等。涉及到的业务也比较广泛、例如用户登录流程、注册流程、找回密码。下面我们来大致梳理下上述流程&#xff1a; 登录流程 用户首先在登录界面输入手机号然后通过图形验…

VMware时提示系统尚未修改安装失败

安装VMware安装失败&#xff0c;提示系统尚未修改 有以下解决方案&#xff1a; 1.操作系统不兼容 2.安装文件损坏 3.安装程序错误 4.硬件问题 解决&#xff1a;由于重装系统前&#xff0c;安装过VAware&#xff0c;所以应该操作系统&#xff0c;硬件没有问题。下载一个软件v…

关于Redis集群同步/持久化/淘汰机制的详解

Redis是非常常用的KV数据库, 使用内存以及HashMap进行存储的特点带来了高效的查询. 本文将围绕Redis的常见开发使用场景, 阐述在Redis集群中各个节点是如何进行数据同步, 每个节点如何进行持久化以及在长期使用中如何对数据进行更新和淘汰. 如果对Redis有更多的兴趣, 可以查看我…

Java中方法的使用详解

1.引言 假设有一个美女博主&#xff0c;每次发的照片都特别漂亮 然后该博主的评论区每次都会有很多粉丝的评论&#xff1a; 哇&#xff01;宝宝好漂亮&#xff0c;求上衣链接&#xff01;&#xff01;&#xff01; 老婆亲亲&#xff01;这个口红是什么色号呀&#xff1f; 宝…

【go】内存分配模型

内存是怎么分配给对象的&#xff1f; 内存分配优化的地方是&#xff1f; 讲讲golang内存分配模型&#xff1f; ans: 1.按照对象的大小分配&#xff1a;先算出对象的大小如果是tiny对象&#xff0c;就从tiny block中获取地址和偏移量&#xff0c;将对象打包到mcache;如果是16B以…

Python 在Excel中应用和取消多种不同类型的数据筛选

目录 安装Python Excel处理库 Python 在 Excel 中应用文本筛选 Python 在 Excel 中应用数字筛选 Python 在 Excel 中应用字体颜色、单元格颜色或图标集筛选 Python 在 Excel 中应用日期筛选 Python 在 Excel 中应用动态日期筛选 Python 在 Excel 中筛选空单元格或非空单…

【ArcGIS Pro第一期】界面简介

ArcGIS Pro简介 ArcGIS Pro界面简介1.1 打开工程1.2 使用功能区上的工具 参考 ArcGIS Pro 是一种基于功能区的应用程序。 ArcGIS Pro 窗口顶部的功能区有许多命令可供选择&#xff0c;而根据需要打开的各个窗格&#xff08;可停靠窗口&#xff09;中则提供了更为高级或专用的功…

快速排序(QuickSort)-归并排序(MergeSort)[java编写]

1. 快速排序 1.1 基本概述 快速排序采用分治思想&#xff0c;即在一个无序的序列中选取一个任意的基准元素pivot&#xff0c;利用pivot 将待排序的序列分成两部分&#xff0c;前面部分元素均小于或等于基准元素&#xff0c;后面部分均大于或等于基准元素&#xff0c;然后采用…

参会邀请 | 第二届机器视觉、图像处理与影像技术国际会议(MVIPIT 2024)

第二届机器视觉、图像处理与影像技术国际会议&#xff08;MVIPIT 2024&#xff09;将于2024年9月13日-15日在中国张家口召开。 MVIPIT 2024聚焦机器视觉、图像处理与影像技术&#xff0c;旨在为专家、学者和研究人员提供一个国际平台&#xff0c;分享研究成果&#xff0c;讨论…

算法训练营——day3长度最小子数组

1 长度最小子数组-力扣209&#xff08;中等&#xff09; 1.1 题目&#xff1a; 长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返…

基于orangePi的智能家居系统

目录 一.接线图 1.orangePi接线 2.继电器接线 二.语音模块的配置 1.pin脚的配置 2.命令词自定义信息 三.测试 1.通过gpio指令测试烟雾检测器是否正确连接 2.编写脚本测试其他模组接线是否正常 四.人脸识别方案 1.首先开通人脸搜索识别服务 2. 点击产品控制台,向人…

2024年四川省安全员B证证考试题库及四川省安全员B证试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年四川省安全员B证证考试题库及四川省安全员B证试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试大…

ARM----时钟

时钟频率可以是由晶振提供的&#xff0c;我们需要高频率&#xff0c;但是外部接高的晶振会不稳定&#xff0c;所有使用PLL&#xff08;锁相环&#xff09;来放大频率。接下来就让我们学习用外部晶振提供的频率来配置时钟频率。 一.时钟源的选择 在这里我们选择外部晶振作为时钟…

数据库面试题学习

B树和B树 B树 排好序的 节点内部有多个元素 B树 排好序的 节点内多个元素 叶子节点有指针&#xff08;双向指针&#xff09; 非叶子节点冗余了一份在叶子节点 mysql定义B树 InnoDB B树是B树的升级版~ InnoDB b树是怎么产生的 mysql 页 目录 16KB 自增id uuid 一页最多可以存储…

【精选】文件摆渡系统:跨网文件传输的安全与效率之选

文件摆渡系统可以解决哪些问题&#xff1f; 文件摆渡系统&#xff08;File Shuttle System&#xff09;主要是应用于不同网络、网段、区域之间的文件数据传输流转场景&#xff0c; 用于解决以下几类问题&#xff1a; 文件传输问题&#xff1a; 大文件传输&#xff1a;系统可…

Windows bat脚本学习九(srec_cat)

一、简介 srec_cat是一个在嵌入式开发中&#xff0c;使用非常频繁的软件&#xff0c;这里做个常用功能的介绍。 二、常用参数 文件类型 在使用srec_cat指令时&#xff0c;在输入文件和输出文件时&#xff0c;要指明文件的类型&#xff0c;如&#xff1a; input.hex -intel …

2024国赛数学建模C题完整论文:农作物的种植策略

农作物种植策略优化的数学建模研究&#xff08;完整论文&#xff0c;持续更新&#xff0c;大家持续关注&#xff0c;更新见文末名片 &#xff09; 摘要 在本文中&#xff0c;建立了基于整数规划、动态规划、马尔科夫决策过程、不确定性建模、多目标优化、相关性分析、蒙特卡洛…