我正在尝试使用 canvas2image 将整个 html 页面生成为 pdf，然后准备下载。 但遗憾的是，那根本不起作用:(( 如果您有任何关于我做错了什么的信息，请分享。 这是我的代码:
function genPDF() {
html2canvas(document.body, {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test.pdf');
}
});
}<!DOCTYPE>
<html>
<head>
<title>jsPDF</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</head>
<body>
<h1>jsPDF Demos</h1>
<a href="javascript:genPDF()">Download PDF</a>
<div id="testDiv">
<h1>Example Header </h1>
<input type="text" />
<input type="submit" value="button" />
<br><br>
<img src="test.jpg" width="600" height="400" />
</div>
</body>
</html>最佳答案
function genPDF() {
var dom = document.getElementById('testDiv');
html2canvas(dom).then(function(canvas) {
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG', 20, 20);
doc.save('test.pdf');
});
}<!DOCTYPE>
<html>
<head>
<title>jsPDF</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</head>
<body>
<h1>jsPDF Demos</h1>
<a href="javascript:genPDF()">Download PDF</a>
<div id="testDiv">
<h1>Example Header </h1>
<input type="text" />
<input type="submit" value="button" />
<br><br>
<img src="/image/Zgrsf.png?s=328&g=1" width="600" height="400" />
</div>
</body>
</html>关于javascript - 如何使用 jsPDF 和 canvas 生成 PDF？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57641102/