如何使用jsPDF设置适合页面宽度的图像？
如何使用jsPDF设置适合页面宽度的图像？
提问于 2016-04-07 17:32:29
有什么办法可以解决这个问题吗？我尝试以毫米为单位设置宽度和高度。如何将其设置为全宽？
回答 13
Stack Overflow用户
回答已采纳
发布于 2016-04-09 05:28:05
你可以像下面这样得到PDF文档的宽度和高度，
var doc = new jsPDF("p", "mm", "a4");
var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();然后，您可以对图像使用此宽度和高度，以适合整个PDF文档。
var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJ......';
doc.addImage(imgData, 'JPEG', 0, 0, width, height);确保您的图像具有与PDF文档相同的大小(分辨率)。否则它将看起来扭曲(拉伸)。
如果要将px转换为mm，请使用此链接http://www.endmemo.com/sconvert/millimeterpixel.php
Stack Overflow用户
发布于 2016-07-27 15:07:40
我的回答涉及到你所问的一个更具体的案例，但我认为人们可以从中得出一些想法，以适用于更普遍的情况。此外，如果我可以的话，我会把这篇文章作为对Purushoth的答案(我的答案是基于这个答案)的评论。
好的，所以我的问题是如何在不丢失宽高比的情况下将网页放入pdf文档中。我把jsPDF和html2canvas结合使用，根据我的div的宽度和高度来计算比例，我把同样的比例应用到pdf文档上，页面完全适合页面，没有任何变形。
var divHeight = $('#div_id').height();
var divWidth = $('#div_id').width();
var ratio = divHeight / divWidth;
html2canvas(document.getElementById("div_id"), {
height: divHeight,
width: divWidth,
onrendered: function(canvas) {
var image = canvas.toDataURL("image/jpeg");
var doc = new jsPDF(); // using defaults: orientation=portrait, unit=mm, size=A4
var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
height = ratio * width;
doc.addImage(image, 'JPEG', 0, 0, width-20, height-10);
doc.save('myPage.pdf'); //Download the rendered PDF.
}
});Stack Overflow用户
发布于 2018-01-12 00:59:53
今天早上，我在试用html2canvas时发现了这一点。虽然这不包括打印多页的规定，但它确实将图像缩放到页面宽度，并根据调整后的宽度重新设置高度的比例：
html2canvas(document.getElementById('testdiv')).then(function(canvas){
var wid: number
var hgt: number
var img = canvas.toDataURL("image/png", wid = canvas.width, hgt = canvas.height);
var hratio = hgt/wid
var doc = new jsPDF('p','pt','a4');
var width = doc.internal.pageSize.width;
var height = width * hratio
doc.addImage(img,'JPEG',20,20, width, height);
doc.save('Test.pdf');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36472094
复制相关文章
相似问题
腾讯云开发者
