技术的应用而生都是基于需求！崇尚技术积累经验！
如何运用开源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为表格的获取的片段
/* 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;
};
xlsx.js不依赖FileSaver导出也是可以导出的！其自身携带下载api
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
最终效果 ：☆☆☆☆☆
基于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 = 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/
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
