我想通过单击按钮将当前页面下载为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 中的图像边框。提前致谢
最佳答案
我认为你真正的问题是:
通过chrome“打印页面”保存为pdf时如何控制html样式?
也许,您可以先通过chrome“Element”面板或通过javascript设置img样式,删除img边框,然后调用save api。
附注:
据我所知,chrome 在将页面打印为 pdf 时执行的操作很复杂。
例如,它需要将页面内容(像素)转换为pdf大小(a4/a3/a2),这决定了pdf排版。
一些网页设计师通过添加<link>
来调整打印品的工作。具有属性 media="print"
的元素。所以这个样式文件只有在打印时才会生效。
关于javascript - 删除在 Chrome 中打开的 pdf 中的图像边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46211129/