问题描述
我正在制作一个简单的pdf生成react应用程序,
使用的库:
- 解决方案
pdf.text()
函数需要附加的x
和y
参数: http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html#text像这样使用它:
pdf.text('Some header content',10,10);
如果要在每个其他页面中都包含标题,请在while()循环中也添加此行.
I am making a simple pdf generation react application,
Libraries used:
The following is the code that I have tried,
index.js:
<div className="App"> <button onClick={exportToPdf}>Export</button> <div id="toRender"> . . . Some lengthy content . . . </div> </div>
So here on click over the export button, the pdf generation happens.
const exportToPdf = () => { let elem = document.getElementById("toRender"); elem.scrollIntoView(); h2c(elem).then((canvas) => { const img = canvas.toDataURL("image/png", 1); //console.log(`"data:image/png;base64,${img}"`) const pdf = new jsPDF("p", "mm"); const imgWidth = pdf.internal.pageSize.getWidth(); const pageHeight = pdf.internal.pageSize.getHeight(); const imgHeight = (canvas.height * imgWidth) / canvas.width; let heightLeft = imgHeight; let position = 10; pdf.addImage(img, "PNG", 0, position, imgWidth, imgHeight, 100, 90); heightLeft -= pageHeight; // pdf.rect(5, 5, 200, 285).line(5, 45, 205, 45); // pdf.line(3, 35, imgWidth - 3, 35) while (heightLeft >= 0) { position = heightLeft - imgHeight; pdf.addPage(); pdf.addImage(img, "PNG", 0, position, imgWidth, imgHeight); // pdf.rect(5, 5, 200, 285).line(5, 45, 205, 45); heightLeft -= pageHeight; } //pdf.addImage(img, 'PNG', 0, 0) pdf.save("export.pdf"); }); };
The pdf generation works fine.
I need to implement header for all the dynamically generated pages. I have tried adding like
pdf.text("<header> Some header content </header>")
, but it doesn't work.How to add header in all the pages while generating pdf?
解决方案The
pdf.text()
function requires an additionalx
andy
parameter:http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html#textuse it like this:
pdf.text('Some header content', 10, 10);
If you want to have the header in every additional page add this line in the while() loop as well.
这篇关于在pdf中添加标题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!