大家好,我正在使用 jsPDF 和 html2canvas。我在 add.HTML
中看到您可以隐藏一些 div。 html2canvas有没有可能有这个能力。
我实际上正在制作一个 pdf,但我希望主 div 的一些 div 不打印在 pdf 中。
这是我的 html2canvas 代码。
html2canvas(quotes, {
onrendered: function(canvas) {
//! MAKE YOUR PDF
var pdf = new jsPDF('p', 'pt', 'A4');
for (var i = 0; i <= quotes.clientHeight/980; i++) {
//! This is all just html2canvas stuff
var srcImg = canvas;
var sX = 0;
var sY = 980*i; // start 980 pixels down for every new page
var sWidth = 900;
var sHeight = 980;
var dX = 0;
var dY = 0;
var dWidth = 900;
var dHeight = 980;
window.onePageCanvas = document.createElement("canvas");
onePageCanvas.setAttribute('width', 900);
onePageCanvas.setAttribute('height', 980);
var ctx = onePageCanvas.getContext('2d');
// details on this usage of this function:
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);
// document.body.appendChild(canvas);
var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);
var width = onePageCanvas.width;
var height = onePageCanvas.clientHeight;
//! If we're on anything other than the first page,
// add another page
if (i > 0) {
pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
}
//! now we declare that we're working on that page
pdf.setPage(i+1);
//! now we add content to that page!
pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));
}
//! after the for loop is finished running, we save the pdf.
pdf.save('Test.pdf');
}
});
如有任何帮助,我们将不胜感激。提前致谢。
最佳答案
我最终通过搜索更多关于 html2canvas
解决了这个问题。
你只需要添加
data-html2canvas-ignore="true"
在您的 html 元素中隐藏该 div 以防止呈现。
像这样
<div class="anyclass" data-html2canvas-ignore="true">any data</div>
关于javascript - 如何在html2canvas中隐藏div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43253343/