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

【问题标题】：Remove the border for image from pdf opened in chrome从在 chrome 中打开的 pdf 中删除图像的边框
【发布时间】：2017-09-14 05:24:24
【问题描述】：

我想通过单击按钮将当前页面下载为 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 中图像的边框。在此先感谢

【问题讨论】：

标签： javascript php google-chrome pdf

【解决方案1】：

我认为你真正的问题是：

chrome“打印页面”保存为pdf时如何控制html样式？

也许，你可以先通过chrome“元素”面板或者javascript设置img样式，去掉img边框，然后调用save api。

PS：

据我所知，将页面打印为 pdf 时 chrome 的作用很复杂。

例如，它需要将页面内容（像素）转换为 pdf 大小（a4/a3/a2），这决定了 pdf 排版。

一些网页设计师通过添加具有media="print" 属性的<link> 元素来调整打印内容。所以这个样式文件只有在打印时才会生效。

【讨论】：