jquery将网页html文档导出为pdf图片
要使用jQuery将网页内容导出为PDF图片，你可以使用html2canvas库将HTML转换为画布（canvas），然后使用jspdf库将画布保存为PDF。首先，确保在你的项目中包含了这两个库。
以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Export HTML to PDF</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.0.0-rc.7/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.min.js"></script>
</head>
<body>
<div id="content">
<h1>Hello, World!</h1>
<p>This is a sample content to be exported as PDF.</p>
</div>
<button id="exportToPdf">Export to PDF</button>
<script>
$(document).ready(function() {
$('#exportToPdf').click(function() {
html2canvas($('#content')[0]).then(canvas => {
var pdf = new jspdf.jsPDF();
var imgData = canvas.toDataURL('image/png');
pdf.addImage(imgData, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
pdf.save('export.pdf');
});
});
});
</script>
</body>
</html>在这个示例中，当用户点击按钮时，#content 内的内容会被转换为画布，然后这个画布会被添加到新创建的PDF文档中，并保存为export.pdf。确保你的网页内容在用户点击按钮前已经完全加载，否则可能无法正确捕捉所有元素。
评论已关闭