我有以下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，而不是文本。
当前回答
如果你需要下载一个特定页面的PDF文件，只需添加这样的按钮
<h4 onclick="window.print();"> Print </h4>
使用window.print()打印整个页面，而不仅仅是一个div
其他回答
如果您想导出一个表，可以查看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" }
]
}
}
}
...
有人试过吗
(function () {
var
form = $('.form'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Bhavdip-html-to-pdf.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
}());
如果你需要下载一个特定页面的PDF文件，只需添加这样的按钮
<h4 onclick="window.print();"> Print </h4>
使用window.print()打印整个页面，而不仅仅是一个div
这个例子效果很好。
<button onclick="genPDF()">Generate PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
function genPDF() {
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');
doc.save('Test.pdf');
}
</script>
不满意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
})
