html导出的pdf,html页面 导出成pdf

html

内容

内容

内容

引用插件

导出一张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();//如果后面还有内容，添加一个空页

}

});

})

}