web-dev-qa-db-fra.com

Comment configurer l'image pour qu'elle tienne en largeur avec jsPDF?

Y at-il un moyen de résoudre ce problème? J'ai essayé de régler la largeur et la hauteur en mm. Comment puis-je le régler en pleine largeur?

javascriptjspdf
13
sreeraj nyros

Vous pouvez obtenir la largeur et la hauteur du document PDF comme ci-dessous,

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

var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();

Vous pouvez ensuite utiliser cette largeur et cette hauteur pour que votre image s'adapte à l'ensemble du document PDF.

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

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

Assurez-vous que votre image a la même taille (résolution) que le document PDF. Sinon, il aura l’air déformé (étiré).

Si vous voulez convertir px en mm utilisez ce lien http://www.endmemo.com/sconvert/millimeterpixel.php

32
Purushoth

L'API a changé depuis ce commit , en utilisant la version 1.4.1 c'est maintenant

var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
9
Emixam Ninka

Ma réponse traite d'un cas plus spécifique de ce que vous demandez, mais je pense que l'on pourrait en tirer quelques idées pour les appliquer plus généralement. Aussi, je posterais ceci en tant que commentaire dans la réponse de Purushoth (sur laquelle est basée la mienne), si seulement je le pouvais.

Ok, mon problème était donc de savoir comment insérer une page Web dans le document pdf sans perdre le rapport de format. J'ai utilisé jsPDF en conjonction avec html2canvas et j'ai calculé le rapport à partir de la largeur et de la hauteur de ma div. J'ai appliqué le même rapport au document pdf et la page s’adaptait parfaitement à la page sans aucune distorsion.

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.
     }
});
6
zerzevul

J'ai découvert cela en expérimentant avec html2canvas ce matin. Bien que cela n'inclue pas les dispositions relatives à l'impression de plusieurs pages, il redimensionne l'image en largeur et redéfinit la hauteur en fonction du rapport ajusté:

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

j'ai rencontré le même problème mais je résous en utilisant ce code 

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
Ravi Guru

Une meilleure solution consiste à définir la largeur/hauteur du document en utilisant les proportions de votre image.

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>

0
vohrahul

Il est facile d’ajuster la page si vous n’avez qu’une seule image. La tâche la plus difficile est d’adapter des images de différentes tailles à un fichier pdf. La clé pour archiver consiste à calculer le format de l'image et le rapport largeur/hauteur relatif de la page. Le code suivant correspond à ce que j’ai utilisé pour convertir plusieurs images en ligne en un fichier PDF. Il fera pivoter les images en fonction de l’orientation des images/page et définira la marge appropriée. Mon projet utilise des images avec src en ligne. Vous devriez pouvoir modifier en fonction de vos besoins.

En ce qui concerne la rotation de l'image, si vous voyez une page vierge après rotation, il se peut simplement que l'image soit hors limites. Voir cette réponse pour plus de détails.

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

Si cela est un peu difficile à suivre, vous pouvez également utiliser .addPage([imgWidth, imgHeight]), qui est plus simple. L'inconvénient de cette méthode est que la première page est fixée par new jsPDF(). Voir cette réponse pour plus de détails.

0
kakugiki