vue项目导出导出word

冯浩(grow up)

已于 2024-06-08 21:07:24 修改

阅读量941

点赞数 3

分类专栏： vue 文章标签： vue.js word 前端 javascript vue 开发语言

于 2024-05-30 22:51:22 首次发布

本文链接：https://blog.youkuaiyun.com/m0_50207524/article/details/139335601

版权

本文档介绍了如何在Vue.js项目中通过docxtemplater和相关库将数据填充到word模板并导出为word文档。详细步骤包括安装依赖、创建和存放word模板，以及在页面中调用工具类进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本章主要讲解通过对word模板数据填充后然后导出为word文档

效果图

在这里插入图片描述

1、安装依赖

– docxtemplater是一种邮件合并工具，它以编程方式使用，处理条件、循环，并且可以扩展为表格、HTML、图像等。

npm install docxtemplater pizzip --save

– jszip-utils是与jszip一起使用的跨浏览器的工具库

npm install jszip-utils --save

– jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。

npm install jszip --save

– FileSaver 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。

npm install file-saver --save

– 引入处理图片的插件1

npm install docxtemplater-image-module-free --save

2、将word模板放到项目上

2.1、创建word模板

{变量名} => 包含的为属性变量；

{#数组名}{数组里面对象的字段}{/数组名}=>循环的写法为以{#数组名}开头，中间为{循环体的变量名}，以{/数组名}结尾；

{#数组名}{%数组里面对象的字段}{/数组名}=>对于循环展示图片，中间变量名需要添加%——{%变量名}

在这里插入图片描述

2.2、存放目录

对于模板的存放位置，如果模板文件使用vue-cli2的时候，放在static目录下。
使用vue-cli3的时候，放在public目录下

3、创建工具类

import PizZip from 'pizzip'
import docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import {
   saveAs} from 'file-saver'
 
/**
 * 将base64格式的数据转为ArrayBuffer
 * @param {Object} dataURL base64格式的数据
 */
function 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;
}
 
/**
 * 导出word,支持图片
 * @param {Object} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {Object} fileName 导出文件名
 * @param {Object} imgSize