How can I make PDF from div HTML using html2pdf in javascript, but the same for mobile and pc views

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();

score 1 · Answer 1 · edited May 06 '20 at 19:25

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

score 0 · Answer 2 · answered Jul 25 '18 at 20:06

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.

I shared the code for reference only. I do not know if it works with chart.js or not. But let me know if it does. — jatinder bhola, Jul 26 '18 at 14:02

How can I make PDF from div HTML using html2pdf in javascript, but the same for mobile and pc views

2 Answers2