以下のように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
私の答えはあなたが尋ねているもののより具体的なケースを扱っていますが、より一般的に適用するためにこれからいくつかのアイデアを引き出すことができると思います。また、私ができる限り、これを Purushoth の回答（私のベース）にコメントとして投稿します。
さて、私の問題は、アスペクト比を失わずにWebページを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.
}
});
APIはこれ以降変更されました commit 、バージョン1.4.1を使用するようになりました
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
今朝、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');
});
PDFファイルのwidth 100％およびauto height 'getImageProperties'プロパティを使用できます。
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'landscape',
});
const imgProps= pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('download.pdf');
});
私は同じ問題に直面しましたが、このコードを使用して解決します
html2canvas(body,{
onrendered:function(canvas){
var pdf=new jsPDF("p", "mm", "a4");
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
pdf.addImage(canvas, 'JPEG', 0, 0,width,height);
pdf.save('test11.pdf');
}
})
画像が1つしかない場合は、ページに簡単に合わせることができます。さらに難しいタスクは、さまざまなサイズの画像をPDFファイルに収めることです。アーカイブの鍵は、画像の縦横比とページの相対的な幅/高さの比率を計算することです。次のコードは、複数の画像をオンラインでPDFファイルに変換するために使用したものです。画像/ページの向きに基づいて画像を回転させ、適切なマージンを設定します。私のプロジェクトでは、オンラインsrcで画像を使用しています。ニーズに合わせて変更できる必要があります。
画像の回転に関しては、回転後に空白のページが表示される場合、単に画像が範囲外である可能性があります。詳細については、こちらをご覧ください answer .
function exportPdf(urls) {
let pdf = new jsPDF('l', 'mm', 'a4');
const pageWidth = pdf.internal.pageSize.getWidth();
const pageHeight = pdf.internal.pageSize.getHeight();
const pageRatio = pageWidth / pageHeight;
for (let i = 0; i < urls.length; i++) {
let img = new Image();
img.src = urls[i];
img.onload = function () {
const imgWidth = this.width;
const imgHeight = this.height;
const imgRatio = imgWidth / imgHeight;
if (i > 0) { pdf.addPage(); }
pdf.setPage(i + 1);
if (imgRatio >= 1) {
const wc = imgWidth / pageWidth;
if (imgRatio >= pageRatio) {
pdf.addImage(img, 'JPEG', 0, (pageHeight - imgHeight / wc) / 2, pageWidth, imgHeight / wc, null, 'NONE');
}
else {
const pi = pageRatio / imgRatio;
pdf.addImage(img, 'JPEG', (pageWidth - pageWidth / pi) / 2, 0, pageWidth / pi, (imgHeight / pi) / wc, null, 'NONE');
}
}
else {
const wc = imgWidth / pageHeight;
if (1 / imgRatio > pageRatio) {
const ip = (1 / imgRatio) / pageRatio;
const margin = (pageHeight - ((imgHeight / ip) / wc)) / 4;
pdf.addImage(img, 'JPEG', (pageWidth - (imgHeight / ip) / wc) / 2, -(((imgHeight / ip) / wc) + margin), pageHeight / ip, (imgHeight / ip) / wc, null, 'NONE', -90);
}
else {
pdf.addImage(img, 'JPEG', (pageWidth - imgHeight / wc) / 2, -(imgHeight / wc), pageHeight, imgHeight / wc, null, 'NONE', -90);
}
}
if (i == urls.length - 1) {
pdf.save('Photo.pdf');
}
}
}
}
これに従うのが少し難しい場合は、
.addPage([imgWidth, imgHeight])を使用することもできます。これはより簡単です。この方法の欠点は、最初のページがnew jsPDF()で修正されることです。詳細については、 この回答 を参照してください。
より良い解決策は、画像のアスペクト比を使用してドキュメントの幅/高さを設定することです。
var ExportModule = {
// Member method to convert pixels to mm.
pxTomm: function(px) {
return Math.floor(px / $('#my_mm').height());
},
ExportToPDF: function() {
var myCanvas = document.getElementById("exportToPDF");
html2canvas(myCanvas, {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/jpeg', 1.0);
//Get the original size of canvas/image
var img_w = canvas.width;
var img_h = canvas.height;
//Convert to mm
var doc_w = ExportModule.pxTomm(img_w);
var doc_h = ExportModule.pxTomm(img_h);
//Set doc size
var doc = new jsPDF('l', 'mm', [doc_w, doc_h]);
//set image height similar to doc size
doc.addImage(imgData, 'JPG', 0, 0, doc_w, doc_h);
var currentTime = new Date();
doc.save('Dashboard_' + currentTime + '.pdf');
}
});
},
}<script src="Scripts/html2canvas.js"></script>
<script src="Scripts/jsPDF/jsPDF.js"></script>
<script src="Scripts/jsPDF/plugins/canvas.js"></script>
<script src="Scripts/jsPDF/plugins/addimage.js"></script>
<script src="Scripts/jsPDF/plugins/fileSaver.js"></script>
<div id="my_mm" style="height: 1mm; display: none"></div>
<div id="exportToPDF">
Your html here.
</div>
<button id="export_btn" onclick="ExportModule.ExportToPDF();">Export</button>