我有以下 html 代码：
<!DOCTYPE html>
<html>
<body>
<p>don't print this to pdf</p>
<div id="pdf">
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
我想要做的就是将 div 中的任何内容打印为 pdf，id 为“pdf”。这必须使用 JavaScript 来完成。然后应自动下载“pdf”文档，文件名为“foobar.pdf”
我一直在使用 jspdf 来做到这一点，但它唯一的功能是“文本”，它只接受字符串值。我想将 HTML 提交给 jspdf，而不是文本。
jsPDF 能够使用插件。为了使其能够打印 HTML，您必须包含某些插件，因此必须执行以下操作：
如果你想忽略某些元素，你必须用一个 ID 标记它们，然后你可以在 jsPDF 的特殊元素处理程序中忽略它。因此，您的 HTML 应如下所示：
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
然后使用以下 JavaScript 代码在弹出窗口中打开创建的 PDF：
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
对我来说，这创建了一个漂亮整洁的 PDF，其中仅包含“将其打印为 pdf”这一行。
请注意，特殊元素处理程序仅处理当前版本中的 ID，这也在GitHub 问题 中说明。它指出：
因为匹配是针对节点树中的每个元素进行的，所以我的愿望是尽可能快地进行匹配。在那种情况下，这意味着“仅匹配元素 ID” 元素 ID 仍然以 jQuery 样式“#id”完成，但这并不意味着支持所有 jQuery 选择器。
因此，用“.ignorePDF”之类的类选择器替换“#ignorePDF”对我不起作用。相反，您必须为每个要忽略的元素添加相同的处理程序，例如：
var elementHandler = {
'#ignoreElement': function (element, renderer) {
return true;
},
'#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
从示例中还说明可以选择像“a”或“li”这样的标签。不过，对于大多数用例来说，这可能有点不受限制：
我们支持特殊的元素处理程序。使用 jQuery 样式的 ID 选择器为 ID 或节点名称注册它们。（“#iAmID”、“div”、“span”等）目前不支持任何其他类型的选择器（类、复合）。
要添加的一件非常重要的事情是您丢失了所有样式信息 (CSS)。幸运的是 jsPDF 能够很好地格式化 h1、h2、h3 等，这对我的目的来说已经足够了。此外，它只会打印文本节点内的文本，这意味着它不会打印 textarea 等的值。例子：
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
这是简单的解决方案。这对我有用。您可以使用 javascript 打印概念并简单地将其另存为 pdf。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnPrint").live("click", function () {
var divContents = $("#dvContainer").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="dvContainer">
This content needs to be printed.
</div>
<input type="button" value="Print Div Contents" id="btnPrint" />
</form>
</body>
</html>
您可以使用 autoPrint() 并将输出设置为“dataurlnewwindow”，如下所示：
function printPDF() {
var printDoc = new jsPDF();
printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
printDoc.autoPrint();
printDoc.output("dataurlnewwindow"); // this opens a new popup, after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}
如果您需要下载特定页面的 pdf，只需添加这样的按钮
<h4 onclick="window.print();"> Print </h4>
使用 window.print() 打印您的所有页面而不仅仅是一个 div
http://...domain.../path.css。它创建单独的 HTML 文档，并且没有主要内容的上下文。这为我服务了多年：
export default function printDiv({divId, title}) {
let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');
mywindow.document.write(`<html><head><title>${title}</title>`);
mywindow.document.write('</head><body >');
mywindow.document.write(document.getElementById(divId).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
当然，这将打开打印对话框，用户必须知道她/他可以选择打印到 pdf 选项，以获取 pdf。可以预先选择打印机，如果用户确认可以实际打印该文件。为了避免这种情况并提供没有任何额外内容的PDF，您需要制作PDF文件。可能在服务器端。您可以使用仅带有发票的小型 html 页面，并将其转换为带有无头 chrome 的 PDF 文件。使用 puppeteer 非常容易。无需安装/配置 chrome，只需安装 npm 包 puppeteer（由 chrome 团队管理）并运行它。请记住，这实际上会在没有 GUI 的情况下启动真正的 chrome，因此您需要为此配备一些 RAM 和 CPU。大多数服务器在流量足够低的情况下都可以。这是代码示例，但这必须在 BACKEND 上运行。节点。它也是缓慢的调用，它是资源密集型调用。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://your-domain.com/path-to-invoice', {
waitUntil: 'networkidle2',
});
await page.pdf({ path: 'invoice-file-path.pdf', format: 'a4' });
await browser.close();
})();
在此处了解更多信息：https : //pptr.dev/