要将HTML页面(包括文本、图像等内容)保存为PDF格式,可以使用jQuery结合一些专门的JavaScript库。以下是几种实现方法:
这是最常用的方法,通过html2canvas将HTML转换为canvas,然后使用jsPDF将canvas转换为PDF。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
$(document).ready(function() {
$('#saveAsPdf').click(function() {
// 获取要转换为PDF的元素
const element = $('#contentToConvert')[0];
// 使用html2canvas将HTML转换为canvas
html2canvas(element, {
scale: 2, // 提高分辨率
logging: false,
useCORS: true, // 允许跨域图片
allowTaint: true // 允许污染图片
}).then(canvas => {
// 创建PDF对象
const pdf = new jsPDF('p', 'mm', 'a4');
const imgData = canvas.toDataURL('image/png');
// 计算PDF页面大小和图片比例
const imgWidth = pdf.internal.pageSize.getWidth();
const imgHeight = canvas.height * imgWidth / canvas.width;
// 添加图片到PDF
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
// 保存PDF
pdf.save('download.pdf');
});
});
});
pdfmake可以直接从HTML生成PDF,不需要经过canvas转换。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/vfs_fonts.min.js"></script>
$(document).ready(function() {
$('#saveAsPdf').click(function() {
// 获取HTML内容
const htmlContent = $('#contentToConvert').html();
// 定义PDF文档
const docDefinition = {
content: [
{
text: 'HTML to PDF',
style: 'header'
},
{
text: htmlContent,
style: 'content'
}
],
styles: {
header: {
fontSize: 18,
bold: true,
margin: [0, 0, 0, 10]
},
content: {
fontSize: 12
}
}
};
// 创建PDF
pdfMake.createPdf(docDefinition).download('download.pdf');
});
});
如果不需要复杂的PDF生成,可以使用浏览器的打印功能:
$(document).ready(function() {
$('#saveAsPdf').click(function() {
window.print();
});
});
useCORS: true
和allowTaint: true
,但某些情况下可能仍然无法正常工作。如果需要更复杂的PDF生成功能(如目录、页眉页脚等),可以考虑使用服务器端解决方案,如Node.js的puppeteer等工具。
以上方法都可以实现将HTML页面保存为PDF的功能,选择哪种方法取决于你的具体需求和项目环境。