import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

PDF 工具

如何在JavaScript中查看PDF文件

发布 2023年六月13日

简介

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.创建一个名为 generatePDF 的函数，用于将目标网页部分转换为 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() {
   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 软件包中的 open 函数，使用系统默认应用程序打开 PDF 文件。这通常会在系统安装的默认 PDF 查看器中打开 PDF 文件，或者在默认浏览器中打开 PDF 文件。

有关 PDF 相关任务的更多代码示例，请访问此处代码示例 page.

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

输出结果将生成并显示如上图所示。要了解有关 IronPDF 的更多信息，请参阅这里.

3.0 结论

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

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

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

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

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