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

Question

I wanna download the current page into pdf by button click , I used the html2canvas concept and here is the sample code

$("#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');
        },

    });

});

and works fine.I am getting the borders for image of current page in pdf only when you open the pdf in chrome but I didnt get any border in pdf while opening in adobe,firefox etc.But the problem is in chrome. Please any suggestions , how to remove the border for the images in pdf opened in chrome. Thanks in advance

Answer 1

i think your real question is:

How to control html style when save it as pdf by chrome "print page"?

Maybe, you can first set img style through chrome "Element" pannel or by javascript, remove img border, then calling save api.

PS:

As far as i know, what chrome doing when print page as pdf is complex.

For example, it need transform page content(pixels) to pdf size(a4/a3/a2), that decides pdf typograph.

Some web designers do adjusting work of print things by add a <link> element with attribute media="print". So this style file will effects only when printing.