blocks|key|4423383|text|你可以像下面这样得到PDF文档的宽度和高度，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4423384|var+doc+=+new+jsPDF("p",+"mm",+"a4");

var+width+=+doc.internal.pageSize.getWidth();
var+height+=+doc.internal.pageSize.getHeight();|code-block|syntax|javascript|4423385|然后，您可以对图像使用此宽度和高度，以适合整个PDF文档。|4423386|var+imgData+=+'data:image/jpeg;base64,/9j/4AAQSkZJ......';

doc.addImage(imgData,+'JPEG',+0,+0,+width,+height);|4423387|确保您的图像具有与PDF文档相同的大小(分辨率)。否则它将看起来扭曲(拉伸)。|4423388|如果要将px转换为mm，请使用此链接http://www.endmemo.com/sconvert/millimeterpixel.php|offset|length|style|CODE|4423389|entityMap|0|LINK|mutability|MUTABLE|url|http://www.endmemo.com/sconvert/millimeterpixel.php^0|0|0|0|0|0|4|2|9|2|I|1F|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@$O|16|P|17|Q|R]|$O|18|P|19|Q|R]]|9|@$O|1A|P|1B|1|1C]]|A|$]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>You can get the width and height of PDF document like below,</p>

<pre><code>var doc = new jsPDF("p", "mm", "a4");

var width = doc.internal.pageSize.getWidth();
var height = doc.internal.pageSize.getHeight();
</code></pre>

<p>Then you can use this width and height for your image to fit the entire PDF document.</p>

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

doc.addImage(imgData, 'JPEG', 0, 0, width, height);
</code></pre>

<p>Make sure that your image has the same size (resolution) of the PDF document. Otherwise it will look distorted (stretched).</p>

<p>If you want convert <code>px</code> to <code>mm</code> use this link <a href="http://www.endmemo.com/sconvert/millimeterpixel.php" rel="noreferrer">http://www.endmemo.com/sconvert/millimeterpixel.php</a></p>


blocks|key|4423317|text|我的回答涉及到你所问的一个更具体的案例，但我认为人们可以从中得出一些想法，以适用于更普遍的情况。此外，如果我可以的话，我会把这篇文章作为对Purushoth的答案(我的答案是基于这个答案)的评论。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4423318|好的，所以我的问题是如何在不丢失宽高比的情况下将网页放入pdf文档中。我把jsPDF和html2canvas结合使用，根据我的div的宽度和高度来计算比例，我把同样的比例应用到pdf文档上，页面完全适合页面，没有任何变形。|style|CODE|4423319|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.
+++++}
});|code-block|syntax|javascript|4423320|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/2090459/purushoth^0|1X|9|0|0|1R|3|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>My answer deals with a more specific case of what you are asking but I think one could draw some ideas from this to apply more generally. Also, I would post this as a comment to <a href="https://stackoverflow.com/users/2090459/purushoth">Purushoth</a>'s answer (on which mine is based), if only I could.</p>

<p>Ok, so my problem was how to fit a web page into the pdf document, without losing the aspect ratio. I used jsPDF in conjuction with html2canvas and I calculated the ratio from my <code>div</code>'s width and height. I applied that same ratio to the pdf document and the page fit perfectly onto the page without any distortion.</p>

<pre><code>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.
     }
});
</code></pre>


blocks|key|4423452|text|我也遇到过同样的问题，但我使用下面的代码解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4423453|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');
++++++++++++++++}
++++++++++++})+|code-block|syntax|javascript|4423454|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>i faced same problem but i solve using this code </p>

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


blocks|key|4423491|text|更好的解决方案是使用图像的纵横比设置文档的宽/高。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4423492|​|4423493|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_'+%2B+currentTime+%2B+'.pdf');

++++++}
++++});
++},
}|code-block|syntax|javascript|4423494|<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>|4423495|4423496|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>A better solution is to set the doc width/height using the aspect ratio of your image.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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');

      }
    });
  },
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="Scripts/html2canvas.js"&gt;&lt;/script&gt;
&lt;script src="Scripts/jsPDF/jsPDF.js"&gt;&lt;/script&gt;
&lt;script src="Scripts/jsPDF/plugins/canvas.js"&gt;&lt;/script&gt;
&lt;script src="Scripts/jsPDF/plugins/addimage.js"&gt;&lt;/script&gt;
&lt;script src="Scripts/jsPDF/plugins/fileSaver.js"&gt;&lt;/script&gt;
&lt;div id="my_mm" style="height: 1mm; display: none"&gt;&lt;/div&gt;

&lt;div id="exportToPDF"&gt;
  Your html here.
&lt;/div&gt;

&lt;button id="export_btn" onclick="ExportModule.ExportToPDF();"&gt;Export&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4423580|text|今天早上，我在试用html2canvas时发现了这一点。虽然这不包括打印多页的规定，但它确实将图像缩放到页面宽度，并根据调整后的宽度重新设置高度的比例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4423581|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');
++++});|code-block|syntax|javascript|4423582|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I discovered this while experimenting with html2canvas this morning. While this doesn't include provisions for printing multiple pages it does scale the image to page width and reframes the height in ratio to the adjusted width:</p>

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


blocks|key|4423631|text|自此commit以来，API发生了变化，使用了1.4.1版，现在是|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4423632|var+width+=+pdf.internal.pageSize.getWidth();
var+height+=+pdf.internal.pageSize.getHeight();|code-block|syntax|javascript|4423633|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/MrRio/jsPDF/commit/4ed1b24da50818ed9a6c8363a7df7dd02b3aef00^0|2|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>The API changed since this <a href="https://github.com/MrRio/jsPDF/commit/4ed1b24da50818ed9a6c8363a7df7dd02b3aef00" rel="noreferrer">commit</a>, using version 1.4.1 it's now</p>

<pre><code>var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
</code></pre>


blocks|key|4423543|text|这就是我在Reactjs中实现的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4423544|主要的问题是比例和比例如果你做一个快速的window.devicePixelRatio，它的默认值是2，这是导致半图像问题的原因。|4423545|const+printDocument+=+()+=>+{
++const+input+=+document.getElementById('divToPrint');
++const+divHeight+=+input.clientHeight
++const+divWidth+=+input.clientWidth
++const+ratio+=+divHeight+/+divWidth;

++html2canvas(input,+{+scale:+'1'+}).then((canvas)+=>+{
++++const+imgData+=+canvas.toDataURL('image/jpeg');
++++const+pdfDOC+=+new+JSPDF("l",+"mm",+"a0");+//++use+a4+for+smaller+page

++++const+width+=+pdfDOC.internal.pageSize.getWidth();
++++let+height+=+pdfDOC.internal.pageSize.getHeight();
++++height+=+ratio+*+width;

++++pdfDOC.addImage(imgData,+'JPEG',+0,+0,+width+-+20,+height+-+10);
++++pdfDOC.save('summary.pdf');+++//Download+the+rendered+PDF.
++})
}|code-block|syntax|javascript|4423546|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This is how I've achieved in Reactjs.</p>
<p>Main problem were ratio and scale If you do a quick window.devicePixelRatio, it's default value is 2 which was causing the half image issue.</p>
<pre><code>const printDocument = () =&gt; {
  const input = document.getElementById('divToPrint');
  const divHeight = input.clientHeight
  const divWidth = input.clientWidth
  const ratio = divHeight / divWidth;

  html2canvas(input, { scale: '1' }).then((canvas) =&gt; {
    const imgData = canvas.toDataURL('image/jpeg');
    const pdfDOC = new JSPDF(&quot;l&quot;, &quot;mm&quot;, &quot;a0&quot;); //  use a4 for smaller page

    const width = pdfDOC.internal.pageSize.getWidth();
    let height = pdfDOC.internal.pageSize.getHeight();
    height = ratio * width;

    pdfDOC.addImage(imgData, 'JPEG', 0, 0, width - 20, height - 10);
    pdfDOC.save('summary.pdf');   //Download the rendered PDF.
  })
}
</code></pre>


blocks|key|4423559|text|适用于所有屏幕尺寸和动态方向的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4423560|import+html2canvas+from+'html2canvas'
import+jsPDF+from+'jspdf'

export+default+async+function+downloadComponentInPDF(Component:+HTMLElement)+{
++await+html2canvas(Component).then((canvas)+=>+{
++++const+componentWidth+=+Component.offsetWidth
++++const+componentHeight+=+Component.offsetHeight

++++const+orientation+=+componentWidth+>=+componentHeight+?+'l'+:+'p'

++++const+imgData+=+canvas.toDataURL('image/png')
++++const+pdf+=+new+jsPDF({
++++orientation,
++++unit:+'px'
++})

++++pdf.internal.pageSize.width+=+componentWidth
++++pdf.internal.pageSize.height+=+componentHeight

++++pdf.addImage(imgData,+'PNG',+0,+0,+componentWidth,+componentHeight)
++++pdf.save('download.pdf')
++})
}|code-block|syntax|javascript|4423561|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Solution for all screen sizes and dynamic orientation:</p>
<pre><code>import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export default async function downloadComponentInPDF(Component: HTMLElement) {
  await html2canvas(Component).then((canvas) =&gt; {
    const componentWidth = Component.offsetWidth
    const componentHeight = Component.offsetHeight

    const orientation = componentWidth &gt;= componentHeight ? 'l' : 'p'

    const imgData = canvas.toDataURL('image/png')
    const pdf = new jsPDF({
    orientation,
    unit: 'px'
  })

    pdf.internal.pageSize.width = componentWidth
    pdf.internal.pageSize.height = componentHeight

    pdf.addImage(imgData, 'PNG', 0, 0, componentWidth, componentHeight)
    pdf.save('download.pdf')
  })
}
</code></pre>


blocks|key|4423579|text|我的解决方案是检查需要应用什么比例(高度或宽度)，这取决于pdf方向和图像大小。注意:如果不需要边距，请将边距设置为0。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4423580|+++const+imgData+=+canvas.toDataURL("image/jpeg");

+++const+pdf+=+new+jsPDF({
+++++++orientation:+"portrait",+//+landscape+or+portrait
+++++++unit:+"mm",
+++++++format:+"a4",
+++});
+++const+imgProps+=+pdf.getImageProperties(imgData);
+++const+margin+=+0.1;

+++const+pdfWidth+=+pdf.internal.pageSize.width+*+(1+-+margin);
+++const+pdfHeight+=+pdf.internal.pageSize.height+*+(1+-+margin);

+++const+x+=+pdf.internal.pageSize.width+*+(margin+/+2);
+++const+y+=+pdf.internal.pageSize.height+*+(margin+/+2);

+++const+widthRatio+=+pdfWidth+/+imgProps.width;
+++const+heightRatio+=+pdfHeight+/+imgProps.height;
+++const+ratio+=+Math.min(widthRatio,+heightRatio);
+++
+++const+w+=+imgProps.width+*+ratio;
+++const+h+=+imgProps.height+*+ratio;

+++pdf.addImage(imgData,+"JPEG",+x,+y,+w,+h);|code-block|syntax|javascript|4423581|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>my solution is to check what ratio (height or width) need to apply depending of the pdf orientation and image size. note: set margin to 0 if no margin is required.</p>
<pre><code>   const imgData = canvas.toDataURL(&quot;image/jpeg&quot;);

   const pdf = new jsPDF({
       orientation: &quot;portrait&quot;, // landscape or portrait
       unit: &quot;mm&quot;,
       format: &quot;a4&quot;,
   });
   const imgProps = pdf.getImageProperties(imgData);
   const margin = 0.1;

   const pdfWidth = pdf.internal.pageSize.width * (1 - margin);
   const pdfHeight = pdf.internal.pageSize.height * (1 - margin);

   const x = pdf.internal.pageSize.width * (margin / 2);
   const y = pdf.internal.pageSize.height * (margin / 2);

   const widthRatio = pdfWidth / imgProps.width;
   const heightRatio = pdfHeight / imgProps.height;
   const ratio = Math.min(widthRatio, heightRatio);
   
   const w = imgProps.width * ratio;
   const h = imgProps.height * ratio;

   pdf.addImage(imgData, &quot;JPEG&quot;, x, y, w, h);
</code></pre>


blocks|key|4423733|text|有很多使用.addImage的解决方案，我尝试了其中的许多，但都没有效果。因此，我找到了.html()函数，并在尝试了几次之后使用了html2canvas-scale-option。这个解决方案不是通用的解决方案，你必须调整比例，以便它适合你的pdf，但这是唯一的解决方案，它对我有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4423734|var+doc+=+new+jspdf.jsPDF({
++++orientation:+'p',
++++unit:+'pt',
++++format:+'a4'
});

doc.html(document.querySelector('#styledTable'),+{
++++callback:+function+(doc)+{
++++++++doc.save('file.pdf');
++++},
++++margin:+[60,+60,+60,+60],
++++x:+32,
++++y:+32,
++++html2canvas:+{
++++++++scale:+0.3,+//this+was+my+solution,+you+have+to+adjust+to+your+size
++++++++width:+1000+//for+some+reason+width+does+nothing
++++},
});|code-block|syntax|javascript|4423735|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>There where a lot of solutions with .addImage, I tried many of them, but nothing worked out.
So I found the .html() function and after some tries the html2canvas-scale-option.
This solution is no general solution, you have to adjust the scale so it will fit your pdf, but this is the only solution, which works for me.</p>
<pre><code>var doc = new jspdf.jsPDF({
    orientation: 'p',
    unit: 'pt',
    format: 'a4'
});

doc.html(document.querySelector('#styledTable'), {
    callback: function (doc) {
        doc.save('file.pdf');
    },
    margin: [60, 60, 60, 60],
    x: 32,
    y: 32,
    html2canvas: {
        scale: 0.3, //this was my solution, you have to adjust to your size
        width: 1000 //for some reason width does nothing
    },
});
</code></pre>


blocks|key|4423614|text|++++++++var+width+=+doc.internal.pageSize.width;++++
++++++++var+height+=+doc.internal.pageSize.height;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4423615|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>        var width = doc.internal.pageSize.width;    
        var height = doc.internal.pageSize.height;
</code></pre>


blocks|key|4423620|text|convertPhotoImageToPdf(imgPath){
+++var+doc+=+new+jsPDF(undefined,+null,+null,+true);
+++var+imgData+=+'data:image/jpeg;base64,'%2B+imgPath;
+++doc.addImage(imgData,+'JPEG',10,10,0,0,null,'FAST',0);
+++//if+want+add+one+page+
+++//doc.addPage()
+++doc.save('testPdf.pdf')
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4423621|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>convertPhotoImageToPdf(imgPath){
   var doc = new jsPDF(undefined, null, null, true);
   var imgData = 'data:image/jpeg;base64,'+ imgPath;
   doc.addImage(imgData, 'JPEG',10,10,0,0,null,'FAST',0);
   //if want add one page 
   //doc.addPage()
   doc.save('testPdf.pdf')
}
</code></pre>


blocks|key|4423647|text|上面的一些答案没有涵盖html2canvas的响应页面。如果您需要根据更改的元素尺寸调整图像的大小，请使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4423648|html2canvas(input,+{+scrollY:+-window.scrollY+}).then((canvas)+=>+{
++const+imgData+=+canvas.toDataURL('image/jpeg');
++const+pdf+=+new+jsPDF('p',+'mm',+'a4');
++const+imgProps+=+pdf.getImageProperties(imgData);

++//+doc+and+image+dimensions
++const+pdfWidth+=+pdf.internal.pageSize.getWidth();
++const+pdfHeight+=+pdf.internal.pageSize.getHeight();
++const+imgWidth+=+imgProps.width;
++const+imgHeight+=+imgProps.height;

++//+claculating+right+scale+to+fit+the+page
++const+scale+=+Math.max(pdfHeight+/+imgHeight,+pdfWidth+/+imgWidth);
++const+finalWidth+=+imgWidth+*+scale;
++const+finalHeight+=+imgHeight+*+scale;
++const+leftMargin+=+(pdfWidth+-+finalWidth)+/+2;
++//+add+image+with+alias+and+compression+of+your+choice
++pdf.addImage(+imgData,+'PNG',+leftMargin,+0,+finalWidth,+finalHeight,+'alias',+'FAST');
++pdf.save(+'report-name.pdf'+);
});|code-block|syntax|javascript|4423649|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Some answers above didn't cover responsive pages for html2canvas. If you need to resize your image based on changing element dimensions use this code:</p>
<pre><code>html2canvas(input, { scrollY: -window.scrollY }).then((canvas) =&gt; {
  const imgData = canvas.toDataURL('image/jpeg');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgProps = pdf.getImageProperties(imgData);

  // doc and image dimensions
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = pdf.internal.pageSize.getHeight();
  const imgWidth = imgProps.width;
  const imgHeight = imgProps.height;

  // claculating right scale to fit the page
  const scale = Math.max(pdfHeight / imgHeight, pdfWidth / imgWidth);
  const finalWidth = imgWidth * scale;
  const finalHeight = imgHeight * scale;
  const leftMargin = (pdfWidth - finalWidth) / 2;
  // add image with alias and compression of your choice
  pdf.addImage( imgData, 'PNG', leftMargin, 0, finalWidth, finalHeight, 'alias', 'FAST');
  pdf.save( 'report-name.pdf' );
});
</code></pre>


<p>Is there any way to solve this?
I tried to set width and height in mm. How can I set it to full-width?</p>


How to set image to fit width of the page using jsPDF?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

有什么办法可以解决这个问题吗？我尝试以毫米为单位设置宽度和高度。如何将其设置为全宽？

问如何使用jsPDF设置适合页面宽度的图像？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jsPDF设置适合页面宽度的图像？EN