javascript - pdfMake / html2canvas 对于 PDF 输出来说太大了,如何调整大小?
问题描述
我正在尝试将我的 HTML 页面的一部分转换为 PDF 文件。我不想要整个页面,因为它包含不必要的按钮等。
所以我创建了一个高度为 0 的 div,并将我需要打印的内容添加到底层 div 中,然后删除元素并打印。我所有的代码都在下面。它工作得很好,但是 pdf 太放大了,我无法修复它。我在下面附上了我的代码和生成的 pdf 输出。我尝试了很多不同的设置。有人有提示吗?
<div style="overflow: hidden; height: 0;">
<div id="mainClone"></div>
</div>
function printPDF()
{
html2canvas($('#mainClone'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
pageSize: {
width: 1000,
height: 'auto'
},
content: [{
image: data,
//width: width,
//height: height,
}],
pageSize: 'letter',
pageOrientation: 'landscape',
pageMargins: [ 5, 5, 5, 5 ],
};
pdfMake.createPdf(docDefinition).download("test.pdf");
}
});
}
$('#PrintPDF').click(function () {
$('#mainClone').html($('#main').html());
$('#mainClone').find(".calendar-prev").hide();
//remove more html elemnent we don't need
printPDF();
});
解决方案
您可以在仍然使用 jspdf 的同时制作它,而不是创建额外的 div,而是使用默认页面和任何不必要的元素(您不希望在 PDF 中添加)添加此
data-html2canvas-ignore="true"
到每个不必要的元素。
这将忽略该元素,并且不会放入您生成的 PDF 中。
推荐阅读
- android - 动态设置文本后如何保持布局的固定位置?
- javascript - 如何自动检查 Mocha 规范中意外留下的“.only”调用?
- javascript - 反应原生 pan 响应者 locationX/Y 不正确
- javascript - 延迟加载的模块可以使用根注入的 canActivate 防护吗?
- lldb - 立即调用 StepOut() 和 EvaluateExpression()
- c# - 在 C# 中的 LIST 我无法赋值
- java - 初始化静态字段(例如 BigDecimal)时如何避免幻数警告?
- angular - 从 V2 -> V7 升级 Angular 项目的正确方法是什么?
- python - Altair 为条形图设置常量标签颜色
- xamarin - Xamarin Forms c# - java 在 VS Studio for Windows 中以代码 1 退出