vue + docxtemplater 实现前端生成并下载word

文章目录

vue + docxtemplater 实现前端生成并下载word
前言
- 平时工作中需要将多条数据以word形式下载，手动去实现太麻烦，耗时又耗力，然后在网上查了下，发现有符合我需求的插件，记录一下实现过程。
一、docxtemplater介绍
- 基础语法
二、使用步骤（包含图片）
- 1.导入包
- 2.页面引用
- 3.制作模板
- 4.实现代码
总结

前言

平时工作中需要将多条数据以word形式下载，手动去实现太麻烦，耗时又耗力，然后在网上查了下，发现有符合我需求的插件，记录一下实现过程。

一、docxtemplater介绍

docxtemplater是一款强大的 Word、Powerpoint 和 Excel生成插件，它以编程方式使用并处理条件、循环，并且可以插入图像、html或表格。

基础语法

普通标签：{name}

**循环标签(“#”开始， “/”结束)**：{#table}{/table}

图片标签：{%img}

二、使用步骤（包含图片）

1.导入包

npm install docxtemplater
npm install pizzip
npm install file-saver
npm install jszip-utils
npm install docxtemplater-image-module-free

2.页面引用

import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";

3.制作模板

模板：

实现：

4.实现代码

//测试数据
let item = {nzy:'',Illegal:'',imgPath:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',imgPath1:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}
let docxData = {nzy:item.nzy,Illegal:item.Illegal,imgPath: await that.getBase64Sync(item.imgPath),  //图片转base64需要解决异步 async awaitimgPath1: await that.getBase64Sync(item.imgPath1)
}
var ImageModule = require('docxtemplater-image-module-free');   //没有图片可以去掉这一段
//*注*模板文件存放位置：vue-cli2在static文件夹下，vue-cli3在public文件夹下，文件后缀名为'.docx'
JSZipUtils.getBinaryContent('file.docx', function (error, content) {if (error) {throw error};// 图片处理开始let opts = {}opts = {//图像是否居中centered: false};opts.getImage = (chartId) => {return that.base64DataURLToArrayBuffer(chartId);}opts.getSize = function(img, tagValue, tagName) {//自定义指定图像大小return [200, 150];}//图片处理结束    没有图片可去掉这一段var zip = new PizZip(content);var doc = new docxtemplater()doc.attachModule(new ImageModule(opts));  //没有图片可以去掉这一段doc.loadZip(zip);//获取数据doc.setData({...docxData});try {doc.render()} catch (error) {var e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties,}console.log(JSON.stringify({error: e}));throw error;}var out = doc.getZip().generate({type: "blob",mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",}) saveAs(out, "文件名.docx")
})
}

base64DataURLToArrayBuffer(dataURL) {const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/;if (!base64Regex.test(dataURL)) {return false;}const stringBase64 = dataURL.replace(base64Regex, "");let binaryString;if (typeof window !== "undefined") {binaryString = window.atob(stringBase64);} else {binaryString = new Buffer(stringBase64, "base64").toString("binary");}const len = binaryString.length;const bytes = new Uint8Array(len);for (let i = 0; i < len; i++) {const ascii = binaryString.charCodeAt(i);bytes[i] = ascii;}return bytes.buffer;}

getBase64Sync(imgUrl) {var xhr = new XMLHttpRequest();xhr.open("get", imgUrl, true);// 至关重要xhr.responseType = "blob";xhr.onload = function () {if (this.status == 200) {//得到一个blob对象var blob = this.response;console.log("blob", blob)// 至关重要let oFileReader = new FileReader();oFileReader.onloadend = function (e) {// 此处拿到的已经是 base64的图片了let base64 = e.target.result;let image = new Image();image.src = base64;let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);//返回resolve(base64);};oFileReader.readAsDataURL(blob);}else {console.log(imgUrl)}}xhr.send();},

总结

以上就是今天要讲的内容，本文仅仅简单介绍了部分功能的使用，而docxtemplater提供了大量能使我们快速便捷地处理各类型文件的方法。
https://docxtemplater.com/docs/get-started-node/
https://www.jianshu.com/p/0de31429b12a

vue + docxtemplater 实现前端生成并下载word相关推荐

vue：实现前端生成并下载二维码（使用qrcodejs2插件）
需求点击按钮下载二维码,并命名为"奶绿走糖-二维码". HTML <button @click="getPersonCode()">下载二维码&l ...
vue如何在线预览及下载word文档
最近遇到个需求,说要在线预览及下载word文档,尝试了很多方法以后,发现有一个方法是比较好用的,故来分享一波,希望大家也可以在评论中告知更多实现的方法~ https://view.officeapps ...
前端生成、下载二维码
前台生成.下载二维码点击查看按钮,弹出二维码弹框查看按钮 <el-button type="text" @click="useqrcode(scope.row) ...
【xlsx+vue】前端生成可下载的xlsx表格
组件引入: <script type="text/javascript" src="./xlsx.core.min.js"></script ...
php实现生成并下载word文件到本地
要给最常用出租屋管理系统增加个合同功能,mark下知识点.要生成合同就需要使用phpword. 安装phpword包通过composer安装phpword包.因为是使用thinkphp架构,安装挺方 ...
前端生成pdf 下载
前端实现HTML转PDF下载的两种方式 - 简书方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的bas ...
vue 中通过 ajax 生成form 下载表格
recordsClick(){ //导出表格 var params = {// 参数 smartWatermeterId: this. $route. query. watermeterId, sta ...
Java预览下载word文档（poi-tl、thymeleaf模板）
主要功能预览word文档生成并下载word文档实现前端Vue代码预览功能主要使用的是docx-preview下载方式如下: npm install docx-preview --save & ...
纯前端vue利用docxtemplater实现生成word文档下载 word模板，勾选框的默认勾选。。
首先需要下载如下工具: cnpm i docxtemplater pizzip jszip-utils file-saver -S 然后将它们引入: import JSZipUtils from &q ...

vue + docxtemplater 实现前端生成并下载word

vue + docxtemplater 实现前端生成并下载word

文章目录

前言

平时工作中需要将多条数据以word形式下载，手动去实现太麻烦，耗时又耗力，然后在网上查了下，发现有符合我需求的插件，记录一下实现过程。

一、docxtemplater介绍

基础语法

二、使用步骤（包含图片）

1.导入包

2.页面引用

3.制作模板

4.实现代码

总结

vue + docxtemplater 实现前端生成并下载word相关推荐

最新文章

热门文章