Как установить изображение в соответствии с шириной страницы с помощью jsPDF?

Есть ли способ решить это? Я попытался установить ширину и высоту в мм. Как установить его на полную ширину?

Ответ 1

Вы можете получить ширину и высоту 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

Ответ 2

API изменился с момента его совершения, используя версию 1.4.1.

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

Ответ 3

Мой ответ посвящен более конкретному случаю того, что вы спрашиваете, но я думаю, что из этого можно извлечь некоторые идеи для более общего применения. Кроме того, я бы опубликовал это как комментарий к ответу Пурушота (на котором основан мой), если бы я только мог.

Итак, моя проблема заключалась в том, как вписать веб-страницу в документ 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.
     }
});

Ответ 4

Я обнаружил это, экспериментируя с 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');
    });

Ответ 5

я столкнулся с той же проблемой, но я решаю, используя этот код

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

Ответ 6

Лучшим решением является установка ширины и высоты документа с использованием соотношения сторон вашего изображения.

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>

Ответ 7

Ключ заключается в том, чтобы рассчитать соотношение сторон изображения и относительное соотношение ширины/высоты страницы. Следующий код - это то, что я использовал для преобразования нескольких изображений онлайн в файл PDF. Он будет вращать изображения в зависимости от ориентации изображений/страницы и устанавливать правильное поле. По какой-то причине в функции img.onload i не увеличивается автоматически, а равно urls.length. Буду признателен, если вы придумаете объяснение. Мой проект использовать изображения с онлайн-src. Вы должны быть в состоянии изменить в соответствии с вашими потребностями.

Что касается поворота изображения, если вы видите пустую страницу после поворота, это может быть просто за пределами изображения. Смотрите этот ответ для деталей.

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();
        let j = i;
        img.src = urls[i];
        img.onload = function () {
            const imgWidth = this.width;
            const imgHeight = this.height;
            const imgRatio = imgWidth / imgHeight;
            if (j > 0) { pdf.addPage(); }
            pdf.setPage(j + 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; // why not 2?
                    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 (j == urls.length - 1) {
                pdf.save('Photo.pdf');
            }
        }
    }
}