在 JavaScript 中将 HTML 转换为 PDF
从 Web 应用程序下载大量数据时，PDF 文件格式会派上用场。它使用户能够将动态素材下载为文件以供离线使用。HTML 材料转换为 PDF 文档，并使用导出为 PDF 功能下载为 PDF 文件。服务器端脚本在动态 Web 应用程序中将 HTML 转换为 PDF。
在本教程中，我们将使用 JavaScript 执行此类转换。
在此方法中，我们将使用 jsPDF 库将 HTML 转换为 PDF。它是最好的库之一。jsPDF 库提供了多种自定义 PDF 生成的技术和选项。
参考下面的代码。
HTML<!DOCTYPE html> <html> <body> <div> <p>Convert this text to PDF.</p> </div> <div id="hidden-element">This will not be printed</div> </body> </html>
JavaScriptvar source = window.document.getElementsByTagName("body")[0]; var specialElementHandlers = { '#hidden-element': function (element, renderer) { return true; } }; var doc = new jsPDF({ orientation: 'landscape' }); doc.setFont("courier"); doc.setFontType("normal"); doc.setFontSize(24); doc.setTextColor(100); doc.fromHTML(elementHTML, 15, 15, { 'width': 170, 'elementHandlers': specialElementHandlers });
orientation 属性设置纸张的方向。setFont() 和 setFontType() 选项用于设置文本的字体和字体样式。setFontSize() 和 setTextColor() 函数用于设置文本的字体大小和颜色。
在此方法中，我们将创建一个窗口对象，我们将使用该对象创建关联文档并在文件中写入 HTML 文本以将其导出为 PDF。
看下面的代码
<html>
<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 = $("#text").html();
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Html to PDF</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(text);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
</script>
</head>
<body>
<form id="form1">
<div id="text">
Convert this text to PDF.
</div>
<input type="button" value="Print Div Contents" id="btnPrint" />
</form>
</body>
</html>
在上面的例子中，window.open() 函数将打开一个指定尺寸的文档，document.write() 方法用于在打开的文档中写入文本。
相关文章
在 Angular 中上传文件
发布时间：2023/04/14 浏览次数：71 分类：Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条，并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间：2023/04/14 浏览次数：91 分类：Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间：2023/04/14 浏览次数：139 分类：Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间：2023/04/14 浏览次数：142 分类：Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间：2023/04/14 浏览次数：150 分类：Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间：2023/04/14 浏览次数：107 分类：Angular
-
我们将介绍如何在请求加载时添加加载 spinner，并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时，我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间：2023/04/14 浏览次数：104 分类：Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。
