Wie wird das Bild mit jspdf auf die Breite der Seite eingestellt?

Question

Gibt es einen Ausweg, um das zu lösen? Ich versuchte widht und Höhe in mm einzustellen, wie ich es auf volle Breite

einstellen

Answer 1

Sie die Breite und Höhe des PDF-Dokuments wie unten,

var doc = new jsPDF("p", "mm", "a4"); 

var width = doc.internal.pageSize.width;  
var height = doc.internal.pageSize.height; 

Dann können Sie diese Breite nutzen und erhalten können Höhe, damit Ihr Bild in das gesamte PDF-Dokument passt.

var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJ......'; 

doc.addImage(imgData, 'JPEG', 0, 0, width, height); 

Stellen Sie sicher, dass Sie ein Bild mit der gleichen Größe (Auflösung) des PDF-Dokuments haben. Sonst sieht es verzerrt (gestreckt) aus.

Wenn Sie konvertieren px-mm verwenden Sie diesen Link http://www.endmemo.com/sconvert/millimeterpixel.php

Answer 2

Meine Antwort beschäftigt sich mit einem spezielleren Fall von dem, was Sie fragen, aber ich denke, man könnte einige Ideen ziehen daraus allgemein anzuwenden. Auch würde ich dies als Kommentar auf die Purushoth Antwort (auf der meine basiert) posten, wenn ich nur könnte.

Ok, also mein Problem war, wie man eine Webseite in das PDF-Dokument einpasst, ohne das Seitenverhältnis zu verlieren. Ich benutzte jsPDF in Verbindung mit html2canvas und berechnete das Verhältnis von meiner div 's Breite und Höhe. Ich habe das gleiche Verhältnis auf das PDF-Dokument angewendet und die Seite passt perfekt auf die Seite ohne jegliche Verzerrung.

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.width;  
      var height = doc.internal.pageSize.height; 
      height = ratio * width; 
      doc.addImage(image, 'JPEG', 0, 0, width-20, height-10); 
      doc.save('myPage.pdf'); //Download the rendered PDF. 
    } 
}); 

Answer 3

i konfrontiert gleiche Problem, aber ich diesen Code solve mit

html2canvas(body,{ 
       onrendered:function(canvas){ 
        var pdf=new jsPDF("p", "mm", "a4"); 
        var width = pdf.internal.pageSize.width;  
        var height = pdf.internal.pageSize.height; 
        pdf.addImage(canvas, 'JPEG', 0, 0,width,height); 
        pdf.save('test11.pdf'); 
       } 
      }) 

Answer 4

Eine bessere Lösung, um die doc Breite/Höhe mit dem Seitenverhältnis des Bildes einzustellen ist.

var ExportModule = { 
 
    pxTomm: function() { 
 
    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>

Answer 5

entdeckte ich diese, während sie mit html2canvas heute Morgen zu experimentieren. Während dies zum Drucken mehrerer Seiten keine Bestimmungen enthalten tut es das Bild auf Seitenbreite skalieren und neue Rahmen für die Höhe im Verhältnis zu der eingestellten Breite:

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'); 
    });