vue导出word文档

首先安装相应插件

npm i docxtemplater

npm i pizzip

npm i jszip-utils

npm i file-saver

创建一个js文件

tempDocxPath 是word模板例如 “/xxxx.docx”

fillname 原本是作为导出的word的名字变量的后来作废了，写在了data里面

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'export const exportDocx = (tempDocxPath,data) => {// 点击导出word// 读取并获得模板文件的二进制内容JSZipUtils.getBinaryContent(tempDocxPath,(error, content) => {// 抛出异常if (error) {throw error;}// 创建一个PizZip实例，内容为模板的内容let zip = new PizZip(content);// 创建并加载docxtemplater实例对象let doc = new docxtemplater();doc.loadZip(zip);// 设置模板变量的值doc.setData(data);try {// 用模板变量的值替换所有模板变量doc.render();} catch (error) {console.log(error);// 抛出异常let e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties};throw error;}// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）let out = doc.getZip().generate({type: "blob",mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"});// 将目标文件对象保存为目标类型的文件，并命名saveAs(out,data.fillname + ".docx");});
}

WORD模板

word模板放在public文件下

data 为对象

data: {

name: name,

sex: sex,

shuzu: [ {age : 18}, {age : 20}]

}

table为数组多个数据，table为自定名称，数组书写为

{#xxx} 内容 {/xxx}

数组每一行数据写完会换行

对象里面的数据直接写 {名称} 即可

导出word方法页面

引入方法

import {exportDocx} from 路径

exportDocx ( ' /文件名.docx ' , data)

导出word的名称可以动态写出在data里，也可以在外面单出穿个变量，看自己的喜好

vue导出word文档相关推荐

vue 导出word文档（包括图片）
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
vue 导出word文档，支持表格和图片
一.导入包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm ins ...
番外-vue 导出word文档（包括屏幕截图）
在线效果(用户名:liu:密码:12345) 点击数据管理统计->数据管理->导出模板按钮参考 1,安装包 npm install docxtemplater pizzip --save ...
vue页面导出Word文档（含图片）
引用插件安装 npm i docxtemplater@3.17.6 npm i pizzip npm i jszip-utils@0.1.0 npm i jszip@2.6.1 npm i file ...
vue 生产word_nodejs(officegen)+vue(axios)在客户端导出word文档
前言我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写 ...
vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...
「Vue To Words」 - 教你在Vue项目中导出Word文档（包含表格合并，图片修改大小）
前言:最近在项目中遇到了,vue页面需要导出word文档,今日就进行记录一下,如有不对的地方,还请见谅 ^^ 简单说一下需求:需要导出的页面是表格页面,因为包含表格的嵌套和合并,其实最主要的就是导出页 ...
vue实现导出word文档（含多张图片）
一.实现效果以填写并导出房屋出租审批表为例,首先填写表格相应内容后,点击" 导出 "按钮实现word文档的导出功能,界面如下所示: 最后导出word文档如下所示: 二.所需插件 ...
java导出word表格_使用PowerDesigner16.5 逆向数据库导出word文档
在上一篇<使用PowerDesigner16.5 逆向数据库生产表结构或导出word文档二>中,我们学会了使用PowerDesigner16.5怎么连接数据库,逆向生成表结构.有时候,我们 ...
easypoi导出word表格_Java导出word文档(POIamp;Spire.Doc)
导出Word文档整理前言业务需要将数据库中存的图片导出成word文档,并给这些图片按照文件名生成目录.以下为解决方案,通常在导出文件时,poi使用的频率较高,可以导出各类模板类的和非模板类的文 ...

vue导出word文档

vue导出word文档相关推荐

最新文章

热门文章