从chrome中打开的pdf中删除图像的边框

时间:2017-09-14 05:24:25

标签: javascript php google-chrome pdf

我想通过按钮点击将当前页面下载到pdf中,我使用了html2canvas概念,这里是示例代码

$("#btnPdf").click(function(){

    var dt    = new Date();
    var day   = dt.getDate();
    var month = dt.getMonth() + 1;
    var year  = dt.getFullYear();
    var hour  = dt.getHours();
    var mins  = dt.getMinutes();
    var postfix = month + "-" + day + "-" + year + "_" + hour + ":" + mins;
    var docs = 'dd'+ postfix;



    html2canvas(document.getElementById("main-div"), {
        onrendered: function(canvas) {

            var width = canvas.width;
            var height = canvas.height;
            var millimeters = {};
            millimeters.width = Math.floor(width * 0.264583);
            millimeters.height = Math.floor(height * 0.264583);


            var imgData = canvas.toDataURL('image/png',1.0);
            console.log('Report Image URL: '+imgData);

            var doc = new jsPDF('p', 'mm', "a4"); //210mm wide and 297mm high
             doc.deletePage(1);
             doc.addPage(millimeters.width, millimeters.height);
            doc.addImage(imgData, 'png',0,0);
            doc.save(docs+'.pdf');
        },

    });

});

并且工作正常。只有当您在chrome中打开pdf时,我才能获得pdf当前页面图像的边框,但是在adobe,firefox等打开时我没有在pdf中获得任何边框。但问题在于chrome。请提出任何建议,如何删除以chrome格式打开的pdf中的图像边框。提前致谢

1 个答案:

答案 0 :(得分:1)

我认为你真正的问题是:

如何通过chrome"打印页面"?

将其保存为pdf时控制html样式

也许,你可以先通过chrome" Element"设置img样式。 pannel或通过javascript,删除img border,然后调用save api。

PS:

据我所知,当打印页面为pdf时,做什么的chrome很复杂。

例如,它需要将页面内容(像素)转换为pdf大小(a4 / a3 / a2),这决定了PDF格式。

一些网页设计师通过添加属性为<link>的{​​{1}}元素来调整打印内容的工作。因此,此样式文件仅在打印时才会生效。