如何在javascript中使用html2pdf从div HTML制作PDF，但对于移动和PC视图相同

Question

I need export a div tag as PDF, and I am using html2pdf, but when I export from mobile devices the view is different that when export pc (in mobile devices is smaller).

My Code HTML y JS:

      <div id="contentToExport" >
        <div class="row">
            <div class="col-lg-8 col-xs-12 mt-10" >
                          <canvas id="chartPie" width="1300" height="600"></canvas>
            </div>
        </div>
        <div class="row">
          <div class="col-lg-6 col-lg-offset col-xs-offset-1 mt-10" style="border: none">
            <div class="panel panel-default card-view">
                <div class="panel-heading">
                <div class="pull-left">
                  <h6 class="panel-title txt-dark">Elements list</h6>
                </div>
                <div class="clearfix"></div>
              </div>
                <div class="panel-wrapper collapse in">
                  <div class="panel-body row">
                    <div class="">
                        ...List elements   
                      <hr class="light-grey-hr mt-0 mb-15"/>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>

Mi JS code:

  var element = document.getElementById('contentToExport');
  var opt={
    margin:     [2,1],
  filename:     'Report.pdf',
  image:        { type: 'png', quality: 1.0 },
  html2canvas:  { scale: 2 },
  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
   }
  html2pdf(element).set(opt).save();

Answer 1

I am using a node lib for converting html to pdf html-pdf . However, my env. is node and express.

 var pdf = require('html-pdf);

router.route("/pdf/:templateName")
    .post(jsonParser, function(req, res) { //create pdf + upload to AWS + retrun the url.
        var doc = req.body;
        var html = fs.readFileSync('./views/' + req.params.template, 'utf8');
        var buf = ejs.render(html, doc);

        var options = {
            format: "Letter", // allowed units: A3, A4, A5, Legal, Letter, Tabloid 
            orientation: "portrait", // portrait or landscape  
            header: {
                height: '30mm',
                contents: ''
            },
        footer: {
            height: '16mm',
            contents: '<div style="border-top:1px solid grey;margin: 0 auto;width:558px;"></div><div style="width:720px;margin:0 auto;padding-top:2mm;">' + addressBar + '</div>'
        }
    };
    pdf.create(buf, options).toFile('./tempateName.pdf', function(err, res) {
        if (err) return console.log(err);
        console.log(res); // { filename: '/app/businesscard.pdf' }
      });
});

let me know if it works or not.

Answer 2

I had a similar problem. I was able to solve it by passing properties for

html2canvas: {scale: 2, scrollX: 0, scrollY: 0, width: 596}

to remove the scroll, when the screen is resized by media queries or width, to prevent this scaling.
In my case, the pdf A4 design needed to be the same for both desktop and mobile.

library: html2pdfjs

version: 0.9.2

const exportToPDF = (fileName) => {
    let opt = {
      margin: 0.5,
      filename: `${fileName}.pdf`,
      image: {type: 'jpeg', quality: 1},
      html2canvas: {scale: 2, scrollX: 0, scrollY: 0, width: 596},
      jsPDF: {unit: 'in', format: 'A4', orientation: 'portrait'}
    };

    html2pdf().set(opt).from(pdfContainerRef.current).save();
}