我制作的 Js 脚本有点问题，这个脚本背后的想法是将 HTML 中的特定 div 渲染到 CSS。
目前它的工作和做它的工作但不完全像我想要的那样，目前它只渲染屏幕 View 并且只会显示用户当前正在查看的 pdf 中的内容这意味着它会切断任何当前未显示的用户屏幕下方或上方的内容。
有没有办法设置它，使其不采用视点而是采用 div 中的内容并将其呈现出来？这发生在有很多内容的 HTML 文档上(当然)
并且出于某种未知原因，它会将白色背景呈现为黑色。
示例代码
$('#print').click(function() {
var w = document.getElementById("content").offsetWidth;
var h = document.getElementById("content").offsetHeight;
html2canvas(document.getElementById("content"), {
dpi: 300, // Set to 300 DPI
scale: 3, // Adjusts your resolution
onrendered: function(canvas) {
var img = canvas.toDataURL("image/jpeg", 1);
var doc = new jsPDF('L', 'px', [w, h]);
doc.addImage(img, 'JPEG', 0, 0, w, h);
doc.save('sample-file.pdf');
}
});
});body {
background: beige;
}
header {
background: red;
}
footer {
background: blue;
}
#content {
background: yellow;
width: 70%;
height: 100px;
margin: 50px auto;
border: 1px solid orange;
padding: 20px;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
</head>
<body>
<div id="content">
<h1>WorLD HellO</h1>
<h3>Hello WOrld</h3>
</div>
<center>
<button id="print">Click for PDF</button>
</center>
</body>
</html>编辑
我找到了解决我遇到的问题的方法，但仍在尝试弄清楚如何设置质量以及如何删除文档周围不必要的空白。
这是目前的 Js 片段
function getPDF() {
var HTML_Width = $(".canvas_div_pdf").width();
var HTML_Height = $(".canvas_div_pdf").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width + (top_left_margin * 2);
var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
html2canvas($(".canvas_div_pdf")[0], {
allowTaint: true
}).then(function (canvas) {
canvas.getContext('2d');
console.log(canvas.height + " " + canvas.width);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width,
canvas_image_height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4),
canvas_image_width, canvas_image_height);
}
pdf.save("HTML-Document.pdf");
});
};
如果你想使用上面的方法，只需将 onclick='getpdf()' 添加到你的按钮
去除黑色渲染，您需要为您要定位的 div 设置一个 Id 或类，并为其指定一个 CSS 背景色 #ffffff
任何帮助将不胜感激
亲切的问候， 法兹。
最佳答案
您遇到的第一个问题是您的单位设置为 px 并且 jsPDF 正在转换您的单位。主文档始终为 pt，但是当您提供图像 width/height 时，jsPDF 会转换像素到点。我不太清楚他们的算法是什么，但如果你将单位更改为 pt，那么整个图像都会被捕获。
如果可以的话，我对您的代码有一些建议。
- 您使用的是 html2canvas 的过时版本。您使用的版本是
0.4.1，最新版本是1.0.0-rc.5。虽然我在使用该版本时遇到了一些问题，但1.0.0-rc.1似乎对我有用。 - 您不必将图像 URI 传递给
jsPDF，您可以传递 canvas 元素。
如果最终结果是一份简历，它们通常是信纸大小的。我可能会建议使用 pt、em、rem 和 in 单位设计您的内容。尽管您需要将英寸转换为 72dpi 而不是默认的 96dpi。
这是一个沙箱，显示了 to 而非 px 的用法:https://codesandbox.io/s/zen-blackburn-y093n
这是我制作的一个示例，展示了如何制作简单的简历和下载 PDF:https://codesandbox.io/s/laughing-austin-rzlc9
希望这对您有所帮助。
关于jQuery 渲染为 pdf，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59474639/