我使用react作为前端应用程序，我想使用jsPdf将react组件的一部分导出为pdf文件。
const handleDownload = () => {
const content = document.getElementById('download-content');
const doc = new jsPDF();
doc.html(content);
doc.save("a4.pdf");
}
反应返回组件为：
return (
<body>
<header id='download-content'>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
</header>
<footer>
<button onClick={handleDownload}>Download</button>
</footer>
</body>
)
点击Download按钮后，我想要一个由header标签数据和样式组成的pdf文件。但这里我得到了一个空白的pdf，这个函数是handleDownload。
我不想使用画布生成图像，然后制作pdf。。如果我使用画布，当页面大小最小化时，pdf就会改变。
如何将html生成的页面精确地转换为pdf？
2件事：
-
在react中访问DOM元素时，应始终使用useRef
-
html方法似乎是异步的，需要回调
一个工作示例如下：
import { useRef } from 'react';
import { jsPDF } from 'jspdf';
export default function PDF() {
const pdfRef = useRef(null);
const handleDownload = () => {
const content = pdfRef.current;
const doc = new jsPDF();
doc.html(content, {
callback: function (doc) {
doc.save('sample.pdf');
}
});
};
return (
<div>
<header ref={pdfRef}>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
<div>l kldfjlkasjfld asjflkajf ljfasd'flksdasjf lsdasjfsadf</div>
</header>
<footer>
<button onClick={handleDownload}>Download</button>
</footer>
</div>
);
}
更新
如果你需要控制大小，你可以根据上面引用的文件添加额外的属性：
选项1-使用html2canvas选项并控制比例：
const handleDownload = () => {
const content = pdfRef.current;
const doc = new jsPDF();
doc.html(content, {
callback: function (doc) {
doc.save('sample.pdf');
},
html2canvas: { scale: 0.5 } // change the scale to whatever number you need
});
};
选项2-使用width和windowWidth:
const handleDownload = () => {
const content = pdfRef.current;
const doc = new jsPDF();
doc.html(content, {
callback: function (doc) {
doc.save('sample.pdf');
},
width: 200, // <- here
windowWidth: 200 // <- here
});
};
// use can you ReactDOMServer.renderToString(element)
import { renderToString } from "react-dom/server";
import { jsPDF } from "jspdf";
export const dow = () => {
let htmlElement = <div>Hello </div>
let elementAsString = renderToString(htmlElement);
var doc = new jsPDF();
doc.html(elementAsString, {
callback: function (doc) {
doc.save("test.pdf");
},
x: 10,
y: 10,
});
};
// use can use this code as function to handle an event
如果我正确理解了你的问题
以下是我解决您问题的方法：
const handleDownload = ()=>{
//content retrieves the element.
let content = document.getElementById("download-content")
/*
content2 retrieves the HTML code using ".outerHTML" as a string ,
then add a line break between two opening tags,
as well as a line break between a closing tag and an opening tag
with the use of .replace and regexp
*/
let content2 = content.outerHTML.replace(/<(w+)>(.*?)/g, 'n<$1>n$2').replace(/(</w+>)/g, 'n$1n')
var doc = new jsPDF()
// This allows adding text to a PDF.
doc.text(content2, 10 , 10)
doc.save("a4.pdf")
}
我希望此回复能满足您的需求