jspdf 打印多页时两边取消留白_html2canvas+jspdf 完美解决html导出且分页 解决图片显示不全问题...

使用jspdf和html2canvas,解决html内容导出为PDF时的分页和图片显示不全问题。通过调整参数和滚动到指定标签,确保所有内容完整无留白地保存到PDF中。
摘要由CSDN通过智能技术生成

var pages = $(".page_re")functionmakeMpdf() {if (confirm("您确认下载该PDF文件吗?")) {/*1*/

//var pdf = new jsPDF('p', 'pt', 'a4');

设置打印比例 越大打印越小

pdf.internal.scaleFactor = 2.7;

//var options = {

//pagesplit: true, //设置是否自动分页

//"background": '#FFFFFF' //如果导出的pdf为黑色背景,需要将导出的html模块内容背景 设置成白色。

//};

//var printHtml = $('#pdf').get(0); // 页面某一个div里面的内容,通过id获取div内容

//layer.msg('正在生成,请稍等', {

//icon: 16,

//shade: 0.5

//})

$('.operbox a.btn').html('正在生成...')

$('.operbox a.btn').attr("disabled", true);

//pdf.addHTML(printHtml, 15, 15, options, function () {

//pdf.save('报告.pdf');

//});

/*2*/

//layer.msg('正在生成,请稍等', {

//icon: 16

//, shade: 0.5

//})

//var pdf;

//var width;

//var height;

//$(pages).each(function () {

//var mainRight = $(this);

//html2canvas(mainRight, {

//allowTaint: true,

//dpi: 96, // 提升画面质量,但是会增加文件大小

//background: '#FFFFFF',

//onrendered: function (canvas) {

// //var contentWidth = canvas.width;

//var contentHeight = canvas.height;

// //var pageData = canvas.toDataURL('image/jpeg', 1.0);

// //var pdfWidth = (contentWidth + 10) / 2 * 0.75;

//var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白

// //var imgWidth = pdfWidth;

//var imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离

width += pdfWidth;

height += pdfHeight;

//var pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);

//pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight);

//pdf.addPage();

//}

//})

//})

//pdf.save('体检报告_' + new Date().getTime() + '.pdf');

// //console.log(js_getDPI());

//return;

/*3*/layer.msg('正在生成,请稍等', {

icon:16,

shade:0.5})//var element = document.getElementById("pdf");

var pdf = new jsPDF('p', 'mm', 'a4');    //A4纸,纵向

var length =$(pages).length;var img_arr =[];//var pages = $(pages).toArray().reverse();

$(pages).each(function(index,value) {//$(this).scrollTop();

//console.log($(this).offset().top)

//return;

window.scrollTo(0,$(this).offset().top);//最为关键的地方 需要滚动到指定标签 否则图片不全

html2canvas($(this), {//useCORS: true,

//allowTaint:true,

//height: $("#pdf").outerHeight(),

logging: false,//width:window.screen.availWidth,

//height:window.screen.availHeight,

windowWidth:document.body.scrollWidth,

windowHeight:document.body.scrollHeight,

background:'#FFFFFF',

x:0,

scrollY:$(this).offset().top,

async:false,//同步执行

}).then(function(canvas) {//onrendered: function (canvas) {

//var ctx = canvas.getContext('2d');

//var bl = canvas.height/22676;

a4w = 210, a4h = 297;var img = canvas.toDataURL('image/png', 1.0);//$('.images').append('')

pdf.addImage(img, 'PNG', 0, 0, a4w, a4h);//添加图像到页面,保留10mm边距

//renderedHeight += imgHeight;

//if (renderedHeight < canvas.height)

deletecanvas;

console.log(index)if(index == (length - 1)){var name = $('#order_name').val();

pdf.save(name+ '体检报告.pdf');return;

}else{

pdf.addPage();//如果后面还有内容,添加一个空页

}

layer.closeAll();

layer.msg('正在生成第'+(index+2)+'张...')

});

});//console.log(1);

/*后端*/

//var id = $('#order_id').val();

//window.location.href = '/check_site/index/gene_pdf?id='+id;

}

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值