html2canvas: http://html2canvas.hertzen.com/
将html界面转换为canvas,然后导出图片。
【注意】对于导出的图片不完整原因是因为传错了导出的元素,如果该元素所在父容器是可滚动,很多人会习惯性把父容器当做导出对象,导致导出图片空白或不完整,正确的做法是将父容器内元素用一个div裹起来,该div是一个高度超过父容器的元素,导出时就是div内所有元素,那么就可以导出完整图片了。
simple-html2pdf: https://www.npmjs.com/package/simple-html2pdf
将html生成pdf(自动分页,每页大小高约1050px,宽大约800px),之前尝试过使用html2canvas转成图片然后采用jspdf,但无法自动分页,图片压缩了,效果很差,不推荐,所以使用simple-html2pdf比较合适,并自动弹出保存文件
file-saver-fixed: https://www.npmjs.com/package/file-saver-fixed
导出文件
node-xlsx: https://www.npmjs.com/package/node-xlsx
根据数组导出Excel表格,可设置表格格式和运用表格函数,功能强大,但本人比较懒,所以一般采用纯HTML导出表格,EXCEL会在打开是提示格式不匹配是否打开,按确定就好了,而且使用纯html可以爱怎么排版就怎么排版,很自由,宽高会自动根据内容调整,不用设置。
import { saveAs } from "file-saver-fixed";
import html2canvas from "html2canvas";
import html2pdf from 'simple-html2pdf';
import xlsx from 'node-xlsx';
//转换为utf8数据流
function convertBase64UrlToBlob(base64) {
var parts = base64.split(";base64,");
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; i++) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
/***
* obj为要导出内容Element
*/
function exportImage(obj,option) {
var op={
allowTaint: true,//允许加载跨域的图片
tainttest: true, //检测每张图片都已经加载完成
useCORS:true,
width:obj.offsetWidth,
height:obj.offsetHeight,
windowWidth:obj.offsetWidth,
windowHeight:obj.scrollHeight
};
if(option){
for(var key in option){
op[key]=option[key];
}
}
html2canvas(obj, op).then(function(canvas) {
var image = canvas.toDataURL("image/jpeg");
var blob = convertBase64UrlToBlob(image);
saveAs(blob, new Date().getTime() + ".jpg");
});
}
function exportPdf(obj,option) {
html2pdf(obj, {
filename: option.filename?option.filename+ ".pdf":new Date().getTime() + ".pdf", // default 'file.pdf'
margin:option.margin?option.margin:10, // default 40, page margin
save: true, // default true: Save as file
output: '', // default '', jsPDF output type
smart: true // default true: Smartly adjust content width
}, output => {
console.log("导出成功")
});
}
/***
* 导出表格xls
* title格式=>[1,2,3,3,4452354,3434,'hello',true]
* ,tableList格式=>[[11,33,4,54,54545,66],
* [11,33,4,54,54545,66],
* [11,33,4,54,54545,66],
* [11,33,4,54,54545,66]]
* */
function exportTable(title,tableList){
var data = tableList;
data.unshift(title);
var buffer = xlsx.build([{name: "mySheetName", data: data}]); // Returns a buffer
var blob = new Blob([buffer],{type: 'application/vnd.ms-excel,charset=UTF-8',});
saveAs(blob, new Date().format('yyyyMMddhhmmss') + '.xls');
}
//使用node-xls生成表格数据
function exportTable1(title,tableList){
var t=[],list=[];
for(var i=0;i<title.length;i++){
t.push(title[i].name);
}
for(var i=0;i<tableList.length;i++){
var item=[];
for(var j=0;j<title.length;j++){
item.push(tableList[i][title[j].code]);
}
list.push(item);
}
exportTable(t,list);
}
//不使用node-xls,单纯HTML生成表格数据
function exportHTMLTable(title,list,fileName){
var t='',content='';
for(var i=0;i<title.length;i++){
t+='<th>'+title[i]+'</th>';
}
for(var i=0;i<list.length;i++){
var item=list[i],listItem='';
for(var j=0;j<item.length;j++){
listItem+='<td> '+item[j]+'</td>';
}
content+='<tr>'+listItem+'</tr>';
}
if(list.length>0){
var buffer='<table border="1" style="vnd.ms-excel.numberformat:@" ><tr>'+t+'</tr>'+content+'</table>';
var blob = new Blob([buffer],{type: 'application/vnd.ms-excel,charset=utf-8',});
saveAs(blob, fileName?fileName+ '.xls':new Date().format('yyyyMMddhhmmss') + '.xls');
}else{
alert("no data")
}
}
//不使用node-xls,单纯HTML生成表格数据
function exportHTMLTable1(html,fileName){
var blob = new Blob([html],{type: 'application/vnd.ms-excel,charset=utf-8',});
saveAs(blob, fileName?fileName+ '.xls':new Date().format('yyyyMMddhhmmss') + '.xls');
}
function exportFile(file,ex,type){
var blob = new Blob([file],{type: type+',charset=UTF-8',});
saveAs(blob, new Date().format('yyyyMMddhhmmss') + ex);
}
export default{
exportImage,
exportTable,
exportTable1,
exportHTMLTable,
exportHTMLTable1,
exportFile,
exportPdf
};