我正在使用jspdf和html2canvas组合将html页面保存为pdf。单击按钮时,将保存当前页面的 pdf 副本。问题是,如果您放大页面,然后单击按钮,保存的pdf包含当前页面的不完整部分。由于缩放,页面上不可见的大部分部分在保存的pdf页面中被切断。解决方案是什么?下面是单击保存按钮时调用的 js 代码-
var pdf = new jsPDF('l', 'pt', 'a4');
var source = $('#someId')[0];
var options = {
background : '#eee'
};
pdf.addHTML(source, options, function(){
pdf.save('abcd.pdf');
});
编辑
从Saurabh的方法中汲取灵感,我尝试了类似的事情,但没有为任何额外的div元素编写代码。在保存到pdf之前,我将屏幕尺寸设置为固定宽度,打印后我将宽度恢复为默认正常。它工作正常,如果失败,我们也可以随时固定屏幕的高度,这样尽管缩放,但它在生成的 pdf 中看起来很好。以下是我使用的代码:-
var pdf = new jsPDF('l', 'pt', 'a4');
var source = $('#someId')[0];
var options = {
background : '#eee'
};
var width = source.clientWidth;
source.style.width = '1700px';
pdf.addHTML(source, options,
function(){
pdf.save('abcd.pdf');
source.style.width = width+'px';
});
以下是我如何使用 jsPDF 的新.html()
方法在放大页面时设法获得整页 pdf。首先,我强制页面缩放级别恢复为 100%,然后再将其转换为 pdf。在此之后重置缩放html2canvas
选项非常重要,否则它将返回空白页。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->
<script>
function download() {
// Bring the page zoom level back to 100%
const scale = window.innerWidth / window.outerWidth;
if (scale != 1) {
document.body.style.zoom = scale;
}
let pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.getElementById('idName'), {
html2canvas: {
scale: 1 // default is window.devicePixelRatio
},
callback: function () {
// pdf.save('test.pdf');
window.open(pdf.output('bloburl')); // to debug
}
});
}
</script>
更新:更好的方法是根据比例因子调整 html2canvas.scale。
function download() {
let pWidth = pdf.internal.pageSize.width; // 595.28 is the width of a4
let srcWidth = document.getElementById('idName').scrollWidth;
let margin = 18; // narrow margin - 1.27 cm (36);
let scale = (pWidth - margin * 2) / srcWidth;
let pdf = new jsPDF('p', 'pt', 'a4');
pdf.html(document.getElementById('idName'), {
x: margin,
y: margin,
html2canvas: {
scale: scale,
},
callback: function () {
window.open(pdf.output('bloburl'));
}
});
}
我遇到了同样的问题,为此,我所做的是制作打印div的副本,然后单击打印按钮时,我将div副本附加到我的dom,边距顶部:500px
在我得到它的图像后,我隐藏了这个div的副本,并设置了边距顶部:0px
我希望这对你有用。