html
<div id="targetDiv1" onclick="exportPdf_1()">内容</div>
<div id="targetDiv" onclick="exportPdf_2()">
<div class="content">内容</div>
<div class="content">内容</div>
</div>
引用插件
<script type="text/javascript" src="../plugins/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../plugins/html2canvas.js" charset="utf-8"></script>
<script type="text/javascript" src="../plugins/jspdf.debug.js" charset="utf-8"></script>
导出一张pdf js代码
//打出pdf
function exportPdf_1() {
html2canvas(document.getElementById("targetDiv1"), {
allowTaint: true,
scale: 2 // 提升画面质量,但是会增加文件大小
}).then(function (canvas) {
// 得到canvas画布的单位是px 像素单位
var contentWidth = canvas.width
var contentHeight = canvas.height
// 将canvas转为base64图片
var pageData = canvas.toDataURL('image/jpeg', 1.0)
// 设置pdf的尺寸,pdf要使用pt单位 已知 1pt/1px = 0.75 pt = (px/scale)* 0.75
// 2为上面的scale 缩放了2倍
var pdfX = (contentWidth + 10) / 2 * 0.75
var pdfY = (contentHeight ) / 2 * 0.75
// 设置内容图片的尺寸,img是pt单位
var imgX = pdfX;
var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
// 初始化jspdf 第一个参数方向:默认''时为纵向,第二个参数设置pdf内容图片使用的长度单位为pt,第三个参数为PDF的大小,单位是pt
var PDF = new jsPDF('', 'pt', [pdfX, pdfY])
// 将内容图片添加到pdf中,因为内容宽高和pdf宽高一样,就只需要一页,位置就是 0,0
PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
PDF.save('content.pdf')
})
}
分页导出pdf js代码
function exportPdf_2 () {
layer.msg('导出中', {icon: 16,shade: 0.01});
var pdf = new jsPDF('', 'pt', 'a4'); //A4纸,纵向
var length = $("#targetDiv .content").length;
var img_arr = [];
$("#targetDiv .content").each(function(index,value){
window.scrollTo(0,$(this).offset().top);
html2canvas($(this), {
allowTaint: true,
scale: 2 ,// 提升画面质量,会增加文件大小
async:false,//同步执行
scrollY:$(this).offset().top,
}).then(function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//pdf页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 555.28;
var imgHeight = 555.28/contentWidth * contentHeight ;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
//添加图像到页面,保留10mm边距
delete canvas;
if(index == (length - 1)){
var timestamp = new Date().getTime();
pdf.save(projectForm+timestamp+'.pdf')
layer.closeAll('loading');
return;
}else{
pdf.addPage();//如果后面还有内容,添加一个空页
}
});
})
}