PDF 工具

如何在JavaScript中打印PDF文件

Name: IronPDF
Brand: Iron Software
Availability: InStock

乔尔迪·巴尔迪亚

2023年五月23日

1.0 简介

便携式文档格式（PDF）是由Adobe开发的，旨在用于共享含有文本和图形的文档。在线打开 PDF 文档需要额外的程序。在当今社会，PDF 文件对于关键信息非常重要。许多企业使用 PDF 文件创建文档和发票。为满足客户需求，开发人员需要制作 PDF 文档。有了现代库，创建 PDF 变得前所未有的简单。

要为使用此类库的项目选择理想的库，我们必须权衡一系列因素，包括构建、读取和转换能力。

在本教程中，我们将介绍用于制作 PDF 的各种 JavaScript 库。我们将分析 JS 库和现实世界中的应用场景，同时关注三个要点：

运行配置
方便打字和自定义字体的模块
易用性
阅读本文后，您将能为自己的 JavaScript 应用程序选择理想的 PDF 库。最后，我们还将介绍 IronPDF，一个实用有效的 PDF 库。
如何用 JavaScript 打印 PDF 文件
1. 在 iframe 标签中嵌入 PDF
2. 访问 iframe 的 PDF 浏览器自带的打印选项
3. 使用 JavaScript 打印当前页面的 PDF
4. 调用printJS方法并将元素 ID 传递给可打印属性
5. 使用替代库通过Print方法在.NET C#中打印

2.0 图书馆

假设我们希望客户能够下载并打印我们的发票副本。我们需要准确并以适当的方式打印发票。在此，我们将详细介绍可用于将此发票从 HTML 文件格式转换为 PDF 的众多库中的几个。

2.1 普通 JavaScript 代码

通常，要打印 PDF 文件的内容，我们需要将其下载到电脑上，打开并选择打印选项。另一方面，JavaScript 使直接从网页打印 PDF 文件变得简单。您只需在网站上安装一个 iframe，或者能够动态构建一个 iframe，然后添加文档并打印。我将演示如何使用 JavaScript 打印 PDF 文件。使用 iframe 显示另一个网页中的网页。要显示网页，iframe 必须知道其来源。

<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>

<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>

HTML

至于打印 PDF，可以使用 iframe 显示文档内容，然后使用 JavaScript 打印内容。在这两种情况下，都需要使用 iframe。在上面的示例中，有一个带有源（PDF）的iframe。还有一个按钮型输入元素。

按钮的onclick属性将调用print方法。

如何在JavaScript中打印PDF文件：图1 - 打印

2.2 Print.js

创建 Print.js 的主要目的是让我们能够在应用程序中打印 PDF 文件，而无需离开应用程序、从用户界面导入和打印文件或使用嵌入式程序。在特殊情况下，用户只需打印 PDF 文件，无需打开或下载。

例如，当用户要求打印服务器端生成的报告时，翻译就会有所帮助。这些报告将以 PDF 文档的形式返还给您。这些文件无需打开即可打印。在我们的应用程序中，Print.js 提供了打印这些文件的便捷方法。

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
        <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
    </head>
    <body>
        <div id="print-area" class="print-main">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>BBB</td>
                    <td>24</td>
                </tr>
            </table>
        </div>
        <button id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
        <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
    </head>
    <body>
        <div id="print-area" class="print-main">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>BBB</td>
                    <td>24</td>
                </tr>
            </table>
        </div>
        <button id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>

HTML

上述代码可用于直接从网站打印 PDF 文件。它显示，打印时将打印 ID 为 "print-area "的 HTML 元素内的所有 HTML 字符串。

如何在 JavaScript 中打印 PDF 文件：图 2 - 打印这些字符串

2.3 IronPDF - Node.js PDF 库

IronPDF 是一个全面的 Node.js PDF 库，在准确性、易用性和速度方面表现出色。它提供了大量功能，可直接从 React 中的 HTML、URL 和图像生成、编辑和格式化 PDF。 IronPDF 支持各种平台，包括 Windows、MacOS、Linux、Docker 以及 Azure 和 AWS 等云平台，可确保跨平台兼容性。其用户友好的 API 使开发人员能够快速将 PDF 生成和操作集成到他们的 Node.js 项目中。

IronPDF for Node.js 的主要功能：

多功能 PDF 生成：使用 IronPdf，开发人员可以从各种来源生成 PDF，包括 HTML、CSS、JavaScript、图像和其他文件类型。这种灵活性使其能够根据特定要求创建动态的、具有视觉吸引力的 PDF 文档。
高级文档定制：IronPDF 允许开发人员使用页眉、页脚、附件、数字签名、水印和书签等功能来增强 PDF 文档。这样才能制作出具有丰富内容和互动元素的专业级 PDF。
安全功能：IronPDF 具有强大的安全功能，可保护 PDF 免受未经授权的访问。开发人员可以实施密码、数字签名、元数据和其他安全设置等安全措施，以保护 PDF 文档中包含的敏感信息。
优化性能：IronPdf 的设计旨在优化性能，具有完整的多线程和异步支持功能。这样才能确保高效生成 PDF，使其适用于性能至关重要的关键任务应用程序。
全面的功能集：IronPDF 拥有 50 多种用于创建、格式化和编辑 PDF 文档的功能，可为所有 PDF 相关任务提供全面的解决方案。从基本的文档生成到高级定制和安全，IronPDF 提供了广泛的功能以满足开发人员的需求。
以下是一个生成和保存PDF文档的示例，来自HTML文件、HTML字符串和URL以保持打印格式：

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();

JAVASCRIPT

有关PDF相关任务的更多代码示例，请访问此IronPDF Code Examples for Node.js页面。

如何在JavaScript中打印PDF文件：图3 - IronPDF

3.0 结论

用户可以看到上面的 JavaScript 代码，但它可能会被其他人滥用。可以通过这种方式使用源代码。此外，在网站上添加危及数据安全的代码并不困难。上述 JavaScript 库在不同浏览器中的显示方式不同。因此，代码在发布前必须在各种系统中运行。由于旧版浏览器不支持某些新功能，我们还需要考虑这些浏览器的兼容性。上述库可以生成 PDF 文件。用户还必须对所使用的脚本有一定的了解。

通过 IronPDF 针对用 JavaScript 构建的框架和库的简单集成过程，优秀的IronPDF Documentation for Node.js和示例代码，以及响应迅速的技术支持，开发人员可以在短时间内上手，使其成为在 Node.js 相关应用程序中生成和打印专业级 PDF 的首选。

IronPDF提供Node.js的免费试用，因此您可以在做出明智决定之前测试其完整功能。它也适用于其他语言，如C# .NET、Java和Python。请访问IronPDF 网站了解更多详情。从IronPDF Node.js 下载页面下载 IronPDF for Node.js。

乔尔迪·巴尔迪亚

立即与工程团队聊天

软件工程师

Jordi 最擅长 Python、C# 和 C++，当他不在 Iron Software 运用技能时，他会进行游戏编程。作为产品测试、产品开发和研究的负责人之一，Jordi 为持续的产品改进增添了极大的价值。多样化的经验让他充满挑战和参与感，他说这是他在 Iron Software 工作中最喜欢的方面之一。Jordi 在佛罗里达州迈阿密长大，并在佛罗里达大学学习计算机科学和统计学。

< 前一页
如何使用JavaScript生成PDF文件

下一步 >
如何在React中将HTML转换为PDF（开发者教程）