PDF 工具

如何在JavaScript中查看PDF文件

发布 2023年六月13日

介绍

Adobe 创建了便携式文档格式(PDF)以便共享包含大量文本和图形的文档。要在线打开 PDF 文件，需要使用其他程序。 PDF 文件在当今的大量出版环境中不可或缺。这些工具经常用于制作文档和发票。开发人员生成 PDF 文件以满足客户需求。现代库使得创建 PDF 比以往任何时候都更加容易。在为生成自己渲染的 PDF 文件的项目选择合适的库时，需要考虑各个方面，包括构建、阅读和转换功能。

2.0 JavaScript 库

例如，我们希望客户能够下载并查看发票副本。对我们来说同样重要的还有发票的准确布局、打印和页数。在本节中，我们将研究一些最常用的查看 PDF 文档的库。

2.1 html2pdf

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

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

使用 NPM 在本地服务器上安装 html2pdf JavaScript 库，或将其添加到 HTML 代码中，如下例所示。
创建一个名为 "generatePDF "的函数，用于将目标网页部分转换为 PDF。使用 getElementById 功能选择所需的语段。
在将其传递给 html2pdf 之前，请将格式选项添加到 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() {
   const element = 'Hello World!';
   var opt = {
      margin:       1,
      filename:     'Demopdf.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    //html2pdf().set(opt).from(element).save();

    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })

   }
  </script>
  </head>
  <body>
    <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() {
   const element = 'Hello World!';
   var opt = {
      margin:       1,
      filename:     'Demopdf.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    //html2pdf().set(opt).from(element).save();

    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })

   }
  </script>
  </head>
  <body>
    <button onclick="viewpdf()">View PDF</button>
</body>
</html>

HTML

如何用 JavaScript 查看 PDF 文件：图 1

2.3 jsPDF

名为 jsPDF 的开源软件仅使用 JavaScript 创建 PDF 文件。它将页面对象生成 PDF 页面，并根据提供的格式进行格式化。 GitHub 上使用最频繁、维护最完善的 PDF 库也叫 jsPDF。它为 Node.js 和网络浏览器提供了简单易用的模块，因为这些模块是按照 AMD 模块标准导出的。

说到 PDFKit，其 API 遵循的是命令式模型，这可能会给构建复杂的布局带来困难。将字体嵌入 JavaScript 所需的唯一额外步骤是将字体转换为 TTF 文件，这是一个简单的步骤。在下面的代码示例中，我们创建了一个 PDF 文件，然后在网络浏览器的单独标签页中打开了创建的 PDF。翻译结果将与上图类似。

<!DOCTYPE html>
 <html>
     <head>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
         <script>
             function viewPDF() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                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() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                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 文档的过程。 IronPDF 由值得信赖的高性能文档处理库提供商 Iron Software 开发，为在 Node.js 环境中生成 PDF 提供了强大的解决方案。它与 Node.js 项目无缝集成，为开发人员提供了强大的工具，可轻松生成、格式化和编辑 PDF。

IronPDF 库具有广泛的功能，包括在新的或现有的 PDF 文档中分割和合并页面，读取和编辑现有的 PDF 文件，从 PDF 文件中提取图像，在 PDF 文件中添加文本、图形、书签、水印、页眉和页脚，所有这些都无需使用 Acrobat Reader。通过 CSS 和 CSS 媒体文件，可以制作 PDF 文档。 IronPdf 允许用户创建、上传和更新新的和已有的 PDF 表单。

IronPDF for Node.js 的主要功能：

多功能 PDF 生成：使用 IronPdf，开发人员可以从各种来源生成 PDF，包括 HTML、CSS、JavaScript、图像和其他文件类型。这种灵活性使其能够根据特定要求创建动态的、具有视觉吸引力的 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 () => {
   // 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 advancedPdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
})();

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

(async () => {
   // 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 advancedPdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
})();

JAVASCRIPT

在此代码中

我们生成 PDF 文档(高级 PDF)从带有资产的 HTML 内容。
我们将 PDF 文档保存到临时文件中(html-with-assets.pdf)使用 saveAs。
我们使用 open 软件包中的打开功能，使用默认的系统应用程序打开 PDF 文件。这通常会在系统安装的默认 PDF 查看器中打开 PDF，或者在默认浏览器中打开 PDF。
有关 PDF 相关任务的更多代码示例，请访问此处IronPDF for Node.js 代码示例page.
输出结果将生成并显示如上图所示。要了解有关 IronPDF 的更多信息，请参见IronPDF for .NET PDF 查看器指南.

3.0 结论

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

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

该库提供各种许可选项，以满足不同开发人员的需求，其中包括免费试用开发人员许可证和额外的购买许可证. Lite 套装售价为 $749，包括永久许可证、一年的产品支持和升级选项，没有经常性费用。这些许可证可用于开发、暂存和生产环境。此外，IronPDF 还可用于其他语言，如C# .NET, Java和Python. 访问IronPDF 网站了解更多详情。

< 前一页
如何用JavaScript创建PDF文件

下一步 >
如何使用JavaScript生成PDF文件