技术的应用而生都是基于需求！崇尚技术积累经验！

如何运用开源js库来实现需求，是快速开发的目的！结合自己开发功能的经历来说！使用插件能更好的的解决解决交互的平滑顺畅！由于项目时间限制，只能采用开源的js库技术来实现！

以下文档内容已经封装，已在上传码云，有需要可以直接使用

1.基于vue导出xls文档

基于两个开源的js库
1、FileSaver.js
import FileSaver from “file-saver”; //FileSaver文件生成包
FileSaver是前端人员常用的一个下载导出js库，可以导出多种文档类型，word，pdf，text，ppt，xls等
个人感觉这个js库类似于壳，且是以数据驱动的文档，所以FileSaver所需要的的数据必须由自己转换再放入FileSaver.saveAs()函数中，实现各种文件类型的导出，而转换数据的过程可以自己实现，也可以使用js库实现，自己实现需要深入了解更多知识！例如本行代码使用的就是XLSX.js转换成我们需要的数据
2、xlsx.js
import XLSX from “xlsx”; //xls文件数据转换
xls.js对应的就是xls的文档数据化在传递给FileSaver.saveAs()函数，实现日常使用的xls文档

代码：

function exportExcel(val, name, status) {let table = document.querySelector(val).cloneNode(true);// 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉if (status) {table.removeChild(table.querySelector(".el-table__fixed"));}let wb = XLSX.utils.table_to_book(table, { raw: true }); //mytable为表格的id名/* get binary string as output */// let excName = name;// if (this.dataEndDate) {//   excName += '('+this.dataEndDate+')'// }// /* 获取二进制字符串作为输出 */let wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array"});//Blob 对象表示一个不可变、原始数据的类文件对象。//     //Blob 表示的不一定是JavaScript原生格式的数据。//     //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。//     //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。try {FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),//设置导出文件名称name + ".xls");} catch (e) {if (typeof console !== "undefined") console.log(e, wbout);}return wbout;
};

最终效果：☆☆☆☆☆

基于vue导出word文档

第一种方法

基于两个js库
1、FileSaver.js
import FileSaver from “file-saver”; //FileSaver文件生成包
使用FileSaver.js导出word文档

2、jquery
这个就不用了说了把！想要深入自行百度

2、jquery.wordexport.js
这个是jquery团队开发word数据化js库，使用快速方便是基于jQery的组件

这word这块相对来说比较灵活，页面可以随意书写转换成word文档，不受限与docx后缀的文档模板，稍后继续介绍其他两种word文档导出下载方法
代码：

function eword(tag){// console.log(fb);$("#"+tag).wordExport(tag);}

这个比较简单一些不愧是jQuery，就是导出的图片清晰度不尽人意，但是对于页面导出比较灵活，待探索
最终效果 ☆☆☆☆

第二种方法

**基于三个开源的js库1个docx后缀模板**

import docxtemplater from ‘docxtemplater’//邮箱html图像生成工具
import PizZip from ‘pizzip’//跨浏览器的工具库
import JSZipUtils from ‘jszip-utils’//跨浏览器的工具库

创建template.doc模板
Vue data函数中声明一下代码：

 data: {user_name: "XXX",remark: "XXX的外出申请",form: [{val: "私事"},{val: ["2020-09-23", "2020-09-25"]},{val: "市内"},{val: "回家"},{val: "回家吃饭"}]},

这种方法适合固定格式的报表类，不适合新增需求的扩展
代码：
data中代码如上

exportclick(e) {// wordexport(e,'printcontent')let docxsrc = "../../../../static/peopleout.docx"; //模板文件的位置let docxname = e.remark; //导出文件的名字// 读取并获得模板文件的二进制内容JSZipUtils.getBinaryContent(docxsrc, function(error, content) {// docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据// 抛出异常if (error) {throw error;}// 创建一个PizZip实例，内容为模板的内容let zip = new PizZip(content);// 创建并加载docx templater实例对象let doc = new docxtemplater().loadZip(zip);// 设置模板变量的值doc.setData({...e, // e中的数据可以再模板中直接使用cause: e.form[4].val,arrive: e.form[2].val,starttime: e.form[1].val[0],endtime: e.form[1].val[1]});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;}// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）let out = doc.getZip().generate({type: "blob",mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"});// 将目标文件对象保存为目标类型的文件，并命名saveAs(out, docxname);});},

适用于固定报表，扩展交麻烦，但是确实是不错的
效果：☆☆☆☆☆

第三种方法

基于两个开源的js库
1.基于html-docx-js、FileSaver.js
1.1、html-docx-js将文档传入微软，再讲文档数据转换成需要的数据，再下载
2.2、FileSaver.js的FileSaver.saveAs()方法接收到数据，导出

测试失败，调取接口时使用Node后台中‘fs’模块调取失败，又经过
coffee语言调取微软接口，对于数据安全来说，不建议深入研究！所以代码不再展示，对此不做结果评判

vue导出pdf文档

本次说两种方法！
1、使用vue的打印插件或者window自带的打印可以实现存储pdf文档
但有点不符合我们的需求，想一键导出pdf不在弹出打印页面，里边节点转数据化可以探索一下！
2.使用htmlcanvas.js、jspdf.js
2.1、htmlcanvas.js转换节点中的canvas内容转为best64的图片
2.2、jspdf.js将处理的数据导出
import html2Canvas from ‘html2canvas’;//引入html2canvas
import JsPDF from ‘jspdf’;//引入jspdf

代码：

function downloadPDF(element){let ele = document.getElementById(element),pdfName = '用户报告';let eleW = ele.offsetWidth;// 获得该容器的宽let eleH = ele.offsetHeight;// 获得该容器的高let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离var canvas = document.createElement("canvas");var abs = 0;let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）if(win_out>win_in){// abs = (win_o - win_i)/2;    // 获得滚动条长度的一半abs = (win_out - win_in)/2;    // 获得滚动条宽度的一半// console.log(a, '新abs');}canvas.width = eleW * 2;    // 将画布宽&&高放大两倍canvas.height = eleH * 2;var context = canvas.getContext("2d");context.scale(2, 2);context.translate(-eleOffsetLeft -abs, -eleOffsetTop);// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此// translate的时候，要把这个差值去掉// html2canvas(element).then( (canvas)=>{ //报错// html2canvas(element[0]).then( (canvas)=>{html2Canvas( ele, {dpi: 300,// allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。} ).then( (canvas)=>{var contentWidth = canvas.width;var contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / 592.28 * 841.89;//未生成pdf的html页面高度var leftHeight = contentHeight;//页面偏移var position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高var imgWidth = 595.28;var imgHeight = 595.28/contentWidth * contentHeight;var pageData = canvas.toDataURL('image/svg', 1.0);var pdf = new JsPDF('', 'pt', 'a4');//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);} else {    // 分页while(leftHeight > 0) {pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= 841.89;//避免添加空白页if(leftHeight > 0) {pdf.addPage();}}}//可动态生成pdf.save(pdfName);})
}

这里实现的是对word数据的处理，使用html2canvas.js中转换的方法
也可以自己处理一下canvas的代码块
代码：

// 转换图片为 base64
function convertImagesToBase64(contentDocument) {// 找到所有的图片let imgs = contentDocument.querySelectorAll('img')// 图片转换用let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')imgs.forEach((img, i) => {if (img.src.startsWith('data:image')) return// img表现尺寸let realWidth = parseInt(img.style.width)let realHeight = parseInt(img.style.height)// 清空画布并调整为 img 的大小ctx.clearRect(0, 0, canvas.width, canvas.height)canvas.width = realWidthcanvas.height = realHeight// 画图片到画布ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, realWidth, realHeight)// ctx.drawImage(img, 0, 0);// 画布转为 base64let dataURL = canvas.toDataURL()img.setAttribute('src', dataURL)})canvas.remove()
}
//canvas节点内容转换，以前博客内有提到过
function convertChartsToBase64(contentDocument) {// 找到所有的图表 （echart）let canvases = contentDocument.querySelectorAll('canvas')// 遍历图表，转换为 base64 静态图片canvases.forEach((canvas, i) => {let url = canvas.getDataURL()let img = document.createElement('img')img.src = urlcanvas.parentNode.replaceChild(img, canvas)})
}

导出的图片比较模糊，想要高清的图片不能使用echarts、hcharts，echarts、hcharts会将后台传输的数据转换成canvas展示，如果将图片导出为svg相对来说比png等格式清晰一点，但是还是达不到要求，最高清的还是页面的echarts使用d3.js将趋势图柱状图等转成页面内镶的svg效果会特别清晰，D3.js我就不在此赘述，自行百度
效果：☆☆☆☆

#以上代码已经封装，稍后上传gitee开源，代码集成了word、pdf、xls的导出，有需求的可以随时下载
如果是vue的话，使用那个js库需要先npm下载对应的数据
**
主文件exportscoffee.js
###下载依赖包
npm i FileSaver.js --s
npm i docxtemplater.js --s
npm i pizzip.js -s
npm i jszip-utils.js --s
npm i jquery.wordexport.js- -s
npm i html2canvas.js --s
npm i jspdf.js --s
npm install vue-print-nb --save
#导出的函数参数使用方法，可自行优化
exportExcel(tag, name, status)
tag:标签的id名称
name：要导出文件设定名称
status：状态需要true，此项是基于自身项目做的，可自行修改

wordexport(e,docname)
e:触发点击下载文件按钮的Event
docname:文件名称,当前使用固定的名称，自行修改

exportword(tag,docname)
e:触发点击下载文件按钮的Event
docname:文件名称

downloadPDF(element)
element:标签的id名
**
打印的js文件utils/print.js‘’可以保存pdf文档
连接地址https://gitee.com/onlyloveliu/exportscoffee/tree/master/

基于公司需求的探索vue导出word、xls、pdf相关推荐

使用Vue导出word(纯前端，异步处理图片)
项目需要导出word,于是乎又是查阅资料.然后自己写. 参考链接 https://github.com/evilc0des/docxtemplater-image-module-free https: ...
vue 导出word文档（包括图片）
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
Java通过IText导出word和pdf
最近做的项目中需要用到导出word和pdf的功能(还有图表),在网上找了很多资料,最后敲定用了IText组件,下面是我项目中的一个Demo,记录了一下,希望对需要的人有帮助. 相关jar包下载地址:h ...
Magicodes.IE已支持导出Word、Pdf和Html
关于Magicodes.IE 导入导出通用库,通过导入导出DTO模型来控制导入和导出,支持Excel.Word.Pdf和Html. GitHub地址:https://github.com/xin-la ...
vue导出word纯前端实现
最近项目有个需求导出word,纯前端实现,查了查资料,用docxtemplater简直不要太简单. 直接把官网例子拿过来就可以了.!!! 官网地址首先,新建一个docx文件,把模板先写好. 注意!! ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
vue 导出word带图片
下载依赖包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm in ...
vue 导出word文档，支持表格和图片
一.导入包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm ins ...
前端react，vue导出word的几种方法（可以导出图片）
方法一:mhtml-to-word导出word 方法一详情请看这里 1.安装环境 npm install mhtml-to-word 2.引入使用 import { exportWord } from ...

基于公司需求的探索vue导出word、xls、pdf