赞
踩
技术的应用而生都是基于需求!崇尚技术积累经验!
如何运用开源js库来实现需求,是快速开发的目的!结合自己开发功能的经历来说!使用插件能更好的的解决解决交互的平滑顺畅!由于项目时间限制,只能采用开源的js库技术来实现!
基于两个开源的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为表格的获取的片段 /* 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; };
let wb = XLSX.utils.table_to_book(table, { raw: true }) //table字段是同上 // let wbout = XLSX.write(wb, { // bookType: 'xlsx', // bookSST: true, // type: 'array', // }) var ws = wb.Sheets["Sheet1"];//设置角页 // XLSX.utils.sheet_add_aoa(ws, [["Created " + new Date().toISOString()]], { origin: -1 });//此处是在xls表格区域下添加文字时间戳 console.log('-------', wbout) //Blob 对象表示一个不可变、原始数据的类文件对象。 // //Blob 表示的不一定是JavaScript原生格式的数据。 // //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 // //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 try { XLSX.writeFile(wb, "Report.xls")//此处是XlSX的导出,刚刚看了源码是创建a标签导出不再使用FileSaver.js // saveAs(//这个接口就是FileSaver.js的导出接口,是需要配合XLSX使用,主要是他操作了Blob,看官自行决定选择使用,我推荐只用XLSX这一个文件,减小项目体积 // new Blob([wbout], { type: 'application/octet-stream' }), // //设置导出文件名称 // nametype // ) } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) } return wbout
最终效果 :☆☆☆☆☆
基于两个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语言调取微软接口,对于数据安全来说,不建议深入研究!所以代码不再展示,对此不做结果评判
本次说两种方法!
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 = realWidth canvas.height = realHeight // 画图片到画布 ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, realWidth, realHeight) // ctx.drawImage(img, 0, 0); // 画布转为 base64 let 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 = url canvas.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/
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。