vue生成word包括，文字和表格

1.下载插件

npm install file-saver
npm install docxtemplater
npm install pizzip
npm install jszip-utils
npm install angular-expressions

2.创建模板文件templater.docx，放在public下面，文件内容如下

标题：{title}
关联数据:
名字  ID  时间
{#tableData}{name}  {ID}    {time}{/tableData}

3.创建ExportDataDocx.js

import Docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';export const ExportDataDocx = (tempDocxPath, data, fileName) => {console.log(tempDocxPath, data, fileName, 111);var expressions = require('angular-expressions');expressions.filters.lower = function (input) {if (!input) return input;// toLowerCase() 方法用于把字符串转换为小写。return input.toLowerCase();};JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {if (error) {console.log(error);}// 创建一个JSZip实例，内容为模板的内容// let zip = new JSZip(content); //用PizZip替代const zip = new PizZip(content);// 创建并加载 Docxtemplater 实例对象const doc = new Docxtemplater();doc.loadZip(zip);// 设置模板变量的值doc.setData(data);try {// 呈现文档，会将内部所有变量替换成值，doc.render();} catch (error) {const e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties};console.log({ error: e });// 当使用json记录时，此处抛出错误信息throw error;}// 生成一个代表Docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）const out = doc.getZip().generate({type: 'blob',mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});// 将目标文件对象保存为目标类型的文件，并命名saveAs(out, fileName);});
};

4.组件中引入调用方法

tem：

<spanclass="blue-text"@click="toDownload(data)">下载</span>

js：

import { ExportDataDocx} from '@/utils/ExportDataDocx.js';// 导出wordtoDownload(data) {ExportDataDocx('/template.docx', data, `${data.title}.docx`);//模板地址，文件数据，文件名ExportDataDocx('/template.docx', data, `${data.title}.docx`);},

5.数据格式

 {title: '测试报告',tableData: [{name: '',ID:''       time: ''},]},

vue生成word包括，文字和表格相关推荐

计算机中文字转换为表格怎么弄,Word中“文字”与“表格”相互转换-word技巧-电脑技巧收藏家...
Word中"文字"与"表格"相互转换在Word 2000及Word 2002中,如果要把"文字"与"表格"互相方便地转 ...
spring使用freemarker生成word文档包含表格、图片（循环插入）
spring使用freemarker生成word文档包含表格.图片(循环插入) 效果图因为测试数据是重复的,所以显示都是重复的数据,替换导入map中的数据可以显示不重复的数据. 操作步骤 1,创建一 ...
SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格、合并单元格)
本编文章继SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格)文章之后介绍Poi-tl导出word的延伸功能: 所需依赖以及word模板所属位置见 SpringBoo ...
java springboot 写入word文档（word模版: 文字，表格，图片）
文章目录前言: 一共找了两个方案,第一个使用比较方便. 方案一 poi-tl 1.1 依赖 1.2 使用 1.2.1 工具类 (先要有模版) 1.2.2 使用 1.3 word模版的创建方案二 f ...
Matlab生成Word文件（含表格和图片插入）
正在做MATLAB方面的东西,看到了这段代码,太赞了,直接可用! % function ceshi_Word %利用MATLAB生成Word文档 filespec_user = [pwd '\测试.d ...
Spire.doc实现对word的操作（包括文字，表格，图片）
1.Spire.doc包的导入 Spire.doc比较小众,因此需要在pom.xml中导入spire.doc的仓库,导入之后直接导包 <repositor ...
java生成word排版_java生成word（文字和图片）
1.整体思路利用xml模板,在模板中预留占位标识(${yourContent}),然后将xml转为ftl文件,通过Map传值填充对应的内容即可,word其实和html一样,也有自己的xml标签,表头 ...
java生成文字与图片_java生成word（文字和图片）
1.整体思路利用xml模板,在模板中预留占位标识(${yourContent}),然后将xml转为ftl文件,通过Map传值填充对应的内容即可,word其实和html一样,也有自己的xml标签,表头 ...
java根据模板动态生成word文档带表格
废话不多说上代码 <dependencies><dependency><groupId>org.springframewor ...

vue生成word包括，文字和表格

vue生成word包括，文字和表格相关推荐

最新文章

热门文章