我有以下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>
所有我想做的是打印到pdf，无论在div中找到一个id为“pdf”。这必须使用JavaScript来完成。"pdf"文件会自动下载，文件名为"foobar.pdf"
我一直在使用jspdf来做到这一点，但它唯一的功能是“文本”，只接受字符串值。我想提交HTML到jspdf，而不是文本。
当前回答
这是一个简单的解决方案。这对我很有用。你可以使用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
}
不满意html2canvas的渲染和缺乏现代CSS3/JS和打印特定的CSS支持pdfMake的过时版本的WebKit…
这是一个理论上的解决方案，它是无头的，可以忠实地渲染页面，支持分页符，页边距，不同的页面大小，并且可以自动化。你甚至可以把WebGl渲染成PDF。
Chrome有一个devtools协议…它有printtoPDF函数 摘录:https://gitlab.com/-/snippets/new 官方20k-SLOC规范:https://github.com/ChromeDevTools/devtools-protocol/blob/master/json/browser_protocol.json 你可以使用节点和https://github.com/GoogleChrome/chrome-launcher运行chrome无头…等待它渲染。 利润
在chrome_devtools协议上执行printToPDF命令:
printToPDF({
printBackground: false,
pageWidth: 8.5,
pageHeight: 11,
transferMode: "ReturnAsStream" // or ReturnAsBase64
})
这是一个简单的解决方案。这对我很有用。你可以使用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>
如果您想导出一个表，可以查看Shield UI Grid小部件提供的导出示例。
它是通过像这样扩展配置来实现的:
...
exportOptions: {
proxy: "/filesaver/save",
pdf: {
fileName: "shieldui-export",
author: "John Smith",
dataSource: {
data: gridData
},
readDataSource: true,
header: {
cells: [
{ field: "id", title: "ID", width: 50 },
{ field: "name", title: "Person Name", width: 100 },
{ field: "company", title: "Company Name", width: 100 },
{ field: "email", title: "Email Address" }
]
}
}
}
...
下面的方法对我的案例很有效。
隐藏页面的其他部分，如下例所示
@media print{
body{
-webkit-print-color-adjust: exact; // if you want to enable graphics
color-adjust: exact !important; // if you want to enable graphics
print-color-adjust: exact !important; // if you want to enable graphics
* {
visibility: hidden;
margin:0;
padding:0
}
.print_area, .print_area *{
visibility: visible;
}
.print_area{
margin: 0;
align: center;
}
.pageBreak {
page-break-before : always; // If you want to skip next page
page-break-inside: avoid; // If you want to skip next page
}
}
@page {
size: A4; margin:0mm; // set page layout
background-color: #fff;
}
}
使用javascript的print函数来打印执行。
<button onclick="window.print()">Print</button>
