主要用到的库有 jspdf，jspdf-autotable，html2canvas，dom-to-image。
在vue中的<script></script>引入上述4个文件
import JsPdf from 'jspdf'; //使用jspdf创建pdf
import autoTable from 'jspdf-autotable'; //生成pdf中的表格
import html2canvas from 'html2canvas'; //将dom生成内容在canvas中画出来
import domtoimage from 'dom-to-image'; //将html生成图片
dom-to-image把html生成图片
<div class="room-wall-outer"></div>
const targetDom = document.querySelector('.room-wall-outer'); //获取dom元素
newImg = await domtoimage.toPng(targetDom); //返回base64编码的图片
var img = new Image();
img.src = newImg;
document.body.appendChild(img);
html2canvas对于不显示的dom，可以把dom中的html生成图片。html2canvas的原理是将Dom节点在Canvas里边画出来.
隐藏 .net-draft-wrapper 跟 .net-draft-wrapper ，等html2canvas返回canvas对象以后net-draft-wrapper设置显示
<div class="net-draft-wrapper">
<div class="net-draft-wrapper" style="width: 227px;"></div>
</div>
// html2canvas 的 第一个参数是要截图的Dom对象，第二个参数是渲染完成后回调的canvas对象。
//await返回的是一个html2Canvas返回的canvas对象 netImg.toDataURL('image/png', 1)；把canvas转化成base64的图片
netImg = await html2canvas(netDraft, {
onclone (doc) {
let e = szScene === '1' ? doc.querySelector('.net-draft-wrapper') : doc.querySelector('.net-draft-wrapper-1');
e.style.visibility = 'visible'; // 设置该元素显示 在外层设置元素隐藏
}
});
用JsPdf创建pdf页面，把上面获取到的截图可以放到pdf页面中再进行统一导出.
\\创建pdf页面，args3 页面大小可以 ‘a3’,'a4',也可以设置具体的长宽 如：new jsPDF('p', 'px', [950, 1000]);
/**解决导出中文不乱码问题，我们需要提供一个编译处理过的js字体文件，给jsPDF设置上字体，就可以了。
*方法：*
1.先去[这里](https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html "这里") 转换你需要的字体（只支持 .ttf格式的字体）
2\. 在上面转换后你会得到一个js文件，打开文件我们只需要保留那很长的字符串，并且把它导出，其他代码可以注释掉。**/
let oJspdf = new JsPdf('p', 'px', 'a3');
f (this.oZhTTF === null) {
this.oZhTTF = await this.jsonFile('zh.json');
}
oJspdf.addFileToVFS('en.otf', this.oZhTTF.zh1); //添加字体库
oJspdf.addFont('en.otf', 'customEn', 'normal'); //添加字体 arg2 定义的字体名字
oJspdf.addFont('enBold.otf', 'customEnBold', 'normal');
let szSortFont = 'customEn';
oJspdf.setFont('customEn');//设置字体
szSortFont = 'customEn';
let pageSize = oJspdf.internal.pageSize; //获取pdf的尺寸
let pageWidth = pageSize.width ? pageSize.width : pageSize.getWidth(); //获取pdf的宽度
let pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight(); //获取pdf的长度
//设置字体
oJspdf.setFont('customEnBold');
oJspdf.autoTable({ //添加表格
startY: 100,
theme: 'grid',
head:[['Model', 'SAP', 'Quantity', 'Remark']],
body: [
[aList[0], aCode[0], val1, type1],
[aList[1], aCode[1], val2, type2],
[aList[2], aCode[2], val3, type3]
],
style: {
overflow: 'linebreak',
font: szSortFont
},
headStyles: {
fillColor: '#c00000'
},
bodyStyles: {
font: 'customEn'
},
columnStyles: {
1: {
cellWidth: 100
},
2: {
cellWidth: 80
}
}
});
oJspdf.addPage();//添加下一页
pdf.addImage(this.signImg.footElement, 'JPEG', 30, pageHeight - 30, width, width / 2264 * 6, '', 'FAST'); //添加图片 // arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
/***
addImage 的第一个参数可以有三个
this.signImg.footElement 图片转成的base64编码变量
setImg
setImg.toDataURL('image/png', 1)
**/
//添加文字跟线
// 标题 y轴开始位置 文字开始位置 线段开始位置 线段宽度
setHeader (pdf, title, beginY, txtX, lineX, lineWidth) { // 设置文件头的方法
let setBeginY = beginY + 30;
this.setHeadSigin(pdf, lineWidth);
// 添加标题
pdf.setFontSize(36);
// pdf.setFontType('bold');
pdf.text(title, txtX, setBeginY);
pdf.setLineWidth(2);
pdf.setDrawColor(0, 0, 0);
pdf.line(lineX, setBeginY + 20, lineWidth + lineX, setBeginY + 20); // arg3-->距离左边距;arg4-->左边距离上面的位置;arg5-->宽度;arg6-->右边距离上面的位置
},
//导出pdf文件
oJspdf.save('save.pdf');
官方文档：
http://html2canvas.hertzen.com/documentation
http://www.rotisedapsales.com/snr/cloud2/website/jsPDF-master/docs/jsPDF.html
https://github.com/simonbengtsson/jsPDF-AutoTable
字体推荐：
1、准备思源黑体的ttf文件，如下
https://github.com/be5invis/source-han-sans-ttf/releases
参考文件 ：
https://www.cnblogs.com/ww01/p/11496213.html
网友评论