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

2024-09-04 05:44

本文主要是介绍【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

这篇关于【word导出带图片】使用docxtemplater导出word,通知书形式的word的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1135164

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文