使用jspdf库将画布放入PDF时会使图像被切断。
html2canvas(myContainer, {background: 'red'}).then (canvas) ->
imgData = canvas.toDataURL('image/jpeg', 1.0)
window.open(imgData) # this is just a test that opens the image in a new tab and it displays nicely, the entire image
pdf = new jsPDF("l", "pt", "b1") # tried a variety of formats but no luck
pdf.addImage(imgData, 'JPEG', 0, 0)
pdf.save('file.pdf') # the generated pdf that contains the image gets trimmed
有没有人有任何想法如何使画布适合?
答案 0 :(得分:11)
尝试设置图像的宽度和高度(在任何情况下,似乎都没有关于addImage的文档):
var pdf = new jsPDF("l", "mm", "a4");
var imgData = canvas.toDataURL('image/jpeg', 1.0);
// due to lack of documentation; try setting w/h based on unit
pdf.addImage(imgData, 'JPEG', 10, 10, 180, 150); // 180x150 mm @ (10,10)mm
答案 1 :(得分:5)
我有一个解决方案:
function saveImageToPdf(idOfHtmlElement)
{
var fbcanvas = document.getElementById(idOfHtmlElement);
html2canvas($(fbcanvas),
{
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');
var doc = new jsPDF("p", "mm", "a4");
doc.deletePage(1);
doc.addPage(millimeters.width, millimeters.height);
doc.addImage(imgData, 'PNG', 0, 0);
doc.save('WebSiteScreen.pdf');
}
});
}
你要做的事情是:
答案 2 :(得分:1)
在我的用例中,这是最适合我的解决方案:
var canvas = document.getElementById('canvas');
var imgData = canvas.toDataURL("image/png");
var pdf = new jsPDF('p', 'pt', [canvas.width, canvas.height]);
var pdfWidth = pdf.internal.pageSize.getWidth();
var pdfHeight = pdf.internal.pageSize.getHeight();
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save("mypdf.pdf");
答案 3 :(得分:0)
图片的大小和pdf的页面大小似乎不一样。您可以设置页面大小,即。添加具有与图像相似的定义的高度和宽度的页面,或者您可以在将图像添加到pdf时设置图像的选项。
方法1的示例:Answered above
方法2的示例:
classpath 'com.google.gms:google-services:4.1.0'
答案 4 :(得分:0)
我指定了类似的内容。看起来不错。请尝试:
=LEFT(RIGHT(A1,6),1)
答案 5 :(得分:0)
我的全宽自动高度解决方案,可根据需要扩展页面高度
const document = new jsPDF();
const imgProps= document.getImageProperties(imageToAdd);
const width = document.internal.pageSize.getWidth();
const ratio = width/ imgProps.width;
const height = ratio * imgProps.height;
document.internal.pageSize.height = height;
document.addImage(this.doc, 'PNG', 0, 0, width, height);