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();
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 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();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.