如何在 JavaScript 中查看 PDF 文件
Adobe 创建了可移植文档格式 (PDF)，以实现包含丰富文本和图形的文档共享。 要在线打开 PDF 文件，需要不同的程序。 在当今环境中，PDF 文件是大规模发布不可或缺的。 它们常用于商业中以制作文档和发票。 开发人员生成 PDF 文件以满足客户需求。 现代图书馆已经使创建 PDF 变得比以往任何时候都容易。 在为项目选择合适的库以生成自己的渲染 PDF 文件时，需要考虑各种方面，包括构建、读取和转换功能。
2.0 JavaScript 库
例如，考虑我们希望客户能够下载和查看我们的发票副本的情况。对我们来说同样重要的其他事项是此发票的准确布局、打印和页数。在本节中，我们将研究一些用于查看 PDF 文档的最流行库。
2.1 HTML2PDF
HTML2PDF 将 jsPDF 和 Html2Canvas 的功能结合到一个模块中，以将网页和模板转换为完整的 PDF 文档文件。
按照以下步骤从您的网站创建 PDF：
- 使用 NPM 在本地服务器上安装 html2pdf JavaScript 库，或将其添加到您的 HTML 代码中，如下面的示例所示。
- 创建一个名为
viewPDF的函数，用于将目标网页部分转换为PDF。 使用getElementById函数选择所需的部分。 - 在传递给
opt变量中来修改格式选项。 这样您就可以为 PDF 生产自定义各种设置。 - 在您的HTML页面中包含一个按钮，当点击时，触发
viewPDF函数。 此函数将生成 PDF 并在单独的浏览器选项卡中打开。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function viewPDF() {
// Select the element to convert to PDF
const element = document.getElementById('content-to-print');
// Define PDF formatting options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Create and open the PDF
let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
.then((data) => {
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
});
}
</script>
</head>
<body>
<div id="content-to-print">
<h1>Hello World!</h1>
</div>
<button onclick="viewPDF()">View PDF</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
function viewPDF() {
// Select the element to convert to PDF
const element = document.getElementById('content-to-print');
// Define PDF formatting options
var opt = {
margin: 1,
filename: 'Demopdf.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Create and open the PDF
let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
.then((data) => {
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
});
}
</script>
</head>
<body>
<div id="content-to-print">
<h1>Hello World!</h1>
</div>
<button onclick="viewPDF()">View PDF</button>
</body>
</html>
2.3 jsPDF
一种名为 jsPDF 的开源软件仅使用 JavaScript 创建 PDF 文件。 它生成一个页面对象作为 PDF 页面，并根据提供的格式进行格式化。 GitHub 上最常用且维护良好的 PDF 库也称为 jsPDF。 它提供了易于使用的模块，适用于 Node.js 和 Web 浏览器，因为它们是根据 AMD 模块标准导出的。
关于 PDFKit，它的 API 遵循命令式模型，这可能会使构建复杂布局变得困难。 使用 JavaScript 嵌入字体的唯一其他步骤是将字体转换为 TTF 文件，这是一个简单的过程。 在下面的代码示例中，我们创建一个 PDF 文件，然后在 Web 浏览器的单独选项卡中打开创建的 PDF。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function viewPDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Open the generated PDF in a new browser tab
window.open(pdf.output('bloburl'));
}
</script>
</head>
<body>
<button onclick="viewPDF()">View Pdf</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
function viewPDF() {
// Create a new instance of jsPDF
var pdf = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a5',
putOnlyUsedFonts: true
});
// Add text to the PDF
pdf.text("Hello World", 20, 20);
// Open the generated PDF in a new browser tab
window.open(pdf.output('bloburl'));
}
</script>
</head>
<body>
<button onclick="viewPDF()">View Pdf</button>
</body>
</html>2.3 IronPDF
IronPDF for Node.js 简化了以编程方式创建和自定义 PDF 文档的过程。 由提供高性能文档处理库的可信赖供应商Iron Software开发，IronPDF为Node.js环境中的PDF生成提供了强大的解决方案。 它与Node.js项目无缝集成，为开发人员提供了强大的工具以轻松生成、格式化和编辑PDF。
IronPDF for Node.js的关键特性：
- 多功能 PDF 生成：使用 IronPDF，开发人员可以从包括 HTML、CSS、JavaScript、图像和其他文件类型在内的不同来源生成 PDF。这种灵活性使得创建根据特定需求量身定制的动态和吸引人的 PDF 文档成为可能。
- 高级文档自定义：IronPDF 使开发人员能够利用页眉、页脚、附件、数字签名、水印和书签等功能增强 PDF 文档。 这允许创建具有丰富内容和交互元素的专业级PDF。
- 安全功能：IronPDF 提供强大的安全功能，以保护 PDF 不受未经授权的访问。 开发人员可以实施安全措施，如密码、数字签名、元数据和其他安全设置，以保护PDF文档中包含的敏感信息。
- 性能优化：IronPDF 旨在实现最佳性能，具有完整的多线程和异步支持。 这确保了高效的PDF生成，使其适合对性能有至关重要要求的应用程序。
- 全面的功能集：IronPDF 拥有超过 50 个功能，用于创建、格式化和编辑 PDF 文档，为所有 PDF 相关任务提供全面的解决方案。 从基本文档生成到高级自定义和安全性，IronPDF提供了一系列功能以满足开发人员的需求。
以下代码示例使用 JavaScript 创建 PDF 文档，然后直接从应用程序查看：
import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";
(async () => {
try {
// Create a PDF from an HTML string
const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
// Save the PDF to a temporary file
const filePath = "html-with-assets.pdf";
await pdf.saveAs(filePath);
// Open the PDF file using the default system application
open(filePath);
} catch (error) {
console.error("Error creating or opening PDF:", error);
}
})();import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";
(async () => {
try {
// Create a PDF from an HTML string
const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");
// Save the PDF to a temporary file
const filePath = "html-with-assets.pdf";
await pdf.saveAs(filePath);
// Open the PDF file using the default system application
open(filePath);
} catch (error) {
console.error("Error creating or opening PDF:", error);
}
})();在此代码中：
- 我们从HTML内容生成PDF文档(
pdf)。 - 我们使用
html-with-assets.pdf)。 - 我们使用
open函数通过默认系统应用程序打开PDF文件。 这通常会在系统中安装的默认 PDF 查看器中打开 PDF，否则在默认浏览器中打开。
有关 PDF 相关任务的更多代码示例，请访问此IronPDF Node.js 代码示例页面。
输出将生成并显示如上图所示。 要了解有关 IronPDF 的更多信息，请参阅IronPDF for .NET PDF Viewer 指南。
3.0 结论
最后，重要的是要注意，上面第一页上显示的 JavaScript 代码可能会被滥用，并可能在被他人使用时构成安全风险。 在将此类代码合并到网页或网站中时，至关重要的是考虑未经授权访问和数据安全漏洞的风险。 此外，应考虑与过时浏览器以及不同操作系统和浏览器的兼容性问题。
相比之下，IronPDF Node.js 库提供增强的安全措施，以抵御潜在威胁。 它不依赖于特定的浏览器，并兼容所有主要的浏览器。 开发人员只需几行代码即可轻松使用 IronPDF 创建和读取 PDF 文件。
该库提供各种许可选项，以满足不同开发人员的需求，其中包括为开发人员提供免费试用许可以及其他可购买许可。 Lite包的价格为$799，包括永久许可证、一年的产品支持和升级选项，无需经常性费用。 这些许可证可以用于开发、测试和生产环境。 此外，IronPDF 还可以用于其他语言，例如 C# .NET、Java 和 Python。 访问 IronPDF 网站了解更多详细信息。
免费开始
免费开始
预定免费现场演示
无需信用卡或创建账户
