如何在javascript中使用html2pdf从div HTML制作PDF，但对于移动和pc视图是相同的
如何在javascript中使用html2pdf从div HTML制作PDF，但对于移动和pc视图是相同的
提问于 2018-07-26 03:15:16
我需要将div标签导出为PDF，并且我使用的是html2pdf，但当我从移动设备导出时，视图与导出pc时不同(在移动设备中较小)。
我的代码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代码：
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();回答 2
Stack Overflow用户
发布于 2018-07-26 04:06:05
我正在使用一个节点库来将html转换为pdf html-pdf。然而，我的env.是node和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' }
});
});让我知道它是否有效。
Stack Overflow用户
发布于 2020-05-07 02:35:47
我也遇到过类似的问题。我可以通过将属性传递给
html2canvas: {scale: 2, scrollX: 0, scrollY: 0, width: 596}在通过媒体查询或宽度调整屏幕大小时删除滚动，以防止此缩放。
在我的例子中，pdf A4的设计需要在桌面和移动设备上都是一样的。
库: html2pdfjs
版本: 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();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51526151
复制相关文章
相似问题