html2canvas+jspdf完美解决html导出且分页解决图⽚显⽰不全
问题
var pages = $(".page_re")
function makeMpdf() {
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 = DataURL('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();
// }lol转服
/
/ })
// })
// pdf.save('体检报告_' + new Date().getTime() + '.pdf');
//
// console.log(js_getDPI());怎样写新闻
// return;
/*3*/
layer.msg('正在⽣成，请稍等', {
icon: 16,
shade: 0.5
})
/
代办食品许可证/ var element = ElementById("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 = Context('2d');
// var bl = canvas.height/22676;
a4w = 210, a4h = 297;
var img = DataURL('image/png', 1.0);
// $('.images').append('<image src="'+img+'" />')
pdf.addImage(img, 'PNG', 0, 0, a4w, a4h);
//添加图像到页⾯，保留10mm边距
//renderedHeight += imgHeight;
/
/if (renderedHeight < canvas.height)
delete canvas;
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; }
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论