消息图标
跳至页脚内容
  1. IronPDF
  2. IronPDF博客
  3. Node PDF 工具
  4. JavaScript PDF查看器
PDF 工具

如何在 JavaScript 中查看 PDF 文件

Darrius Serrant
Darrius Serrant
已更新:

Adobe 创建了可移植文档格式 (PDF)，以实现包含丰富文本和图形的文档共享。 要在线打开 PDF 文件，需要不同的程序。 在当今环境中，PDF 文件是大规模发布不可或缺的。 它们常用于商业中以制作文档和发票。 开发人员生成 PDF 文件以满足客户需求。 现代图书馆已经使创建 PDF 变得比以往任何时候都容易。 在为项目选择合适的库以生成自己的渲染 PDF 文件时，需要考虑各种方面，包括构建、读取和转换功能。

2.0 JavaScript 库

例如，考虑我们希望客户能够下载和查看我们的发票副本的情况。对我们来说同样重要的其他事项是此发票的准确布局、打印和页数。在本节中，我们将研究一些用于查看 PDF 文档的最流行库。

2.1 HTML2PDF

HTML2PDF 将 jsPDF 和 Html2Canvas 的功能结合到一个模块中，以将网页和模板转换为完整的 PDF 文档文件。

按照以下步骤从您的网站创建 PDF：

  1. 使用 NPM 在本地服务器上安装 html2pdf JavaScript 库，或将其添加到您的 HTML 代码中，如下面的示例所示。
  2. 创建一个名为 viewPDF 的函数，用于将目标网页部分转换为 PDF。 使用 getElementById 函数选择所需的段。
  3. 在将其传递给 html2pdf 之前，通过将其添加到 opt 变量来修改格式选项。 这样您就可以为 PDF 生产自定义各种设置。
  4. 在您的 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">
        <!-- Content to convert to PDF -->
        <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">
        <!-- Content to convert to PDF -->
        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>
HTML

如何在 JavaScript 中查看 PDF 文件：图 1

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>
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);
  }
})();
JAVASCRIPT

在此代码中：

  • 我们从 HTML 内容生成 PDF 文档 (pdf)。
  • 我们使用 saveAs 将 PDF 文档保存到临时文件 (html-with-assets.pdf)。
  • 我们使用 open 包中的 open 函数，使用默认的系统应用程序打开 PDF 文件。 这通常会在系统中安装的默认 PDF 查看器中打开 PDF，否则在默认浏览器中打开。

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

如何在 JavaScript 中查看 PDF 文件：图 2

输出将生成并显示如上图所示。 要了解有关 IronPDF 的更多信息，请参阅IronPDF .NET PDF Viewer 指南。

3.0 结论

最后，重要的是要注意，上面第一页上显示的 JavaScript 代码可能会被滥用，并可能在被他人使用时构成安全风险。 在将此类代码合并到网页或网站中时，至关重要的是考虑未经授权访问和数据安全漏洞的风险。 此外，应考虑与过时浏览器以及不同操作系统和浏览器的兼容性问题。

相比之下，IronPDF Node.js 库提供增强的安全措施，以抵御潜在威胁。 它不依赖于特定的浏览器，并兼容所有主要的浏览器。 开发人员只需几行代码即可轻松使用 IronPDF 创建和读取 PDF 文件。

The library provides various licensing options to cater to different developer needs, including a free trial license for developers and additional licenses for purchase. Lite 软件包的价格为 $799，包括永久许可证、为期一年的产品支持和升级选项，无需支付经常性费用。 这些许可证可用于开发、过渡和生产环境。 Additionally, IronPDF is also available for other languages like C# .NET, Java, and Python. 访问 IronPDF 网站了解更多详细信息。

Darrius Serrant
Darrius Serrant
  立即与工程团队聊天
全栈软件工程师（WebOps）

Darrius Serrant 拥有迈阿密大学的计算机科学学士学位，目前在 Iron Software 担任全栈 WebOps 市场工程师。从小就被编码吸引，他认为计算机既神秘又易于接触，使其成为创意和问题解决的理想媒介。

在 Iron Software，Darrius 喜欢创造新事物，并简化复杂概念以使其更易理解。作为我们常驻的开发者之一，他还自愿教授学生，与下一代分享他的专业知识。

对于 Darrius 来说，他的工作令人满意，因为它被重视并产生真正的影响。

相关文章

30天试用 → 完整产品。无限制。无卡。 免费试用