PDF.js Example

创作时间:

作者:

@小白创作中心

PDF.js Example

引用

来源

https://docs.pingcode.com/baike/3460087

要在Web上打印PDF，可以使用浏览器的内置功能、第三方库如PDF.js、以及服务器端生成PDF文件的方法。其中，使用浏览器的内置功能是最简单且普遍的方式，适合大多数用户需求。浏览器内置的打印功能通常能够直接生成PDF文件，通过点击打印按钮，选择“另存为PDF”的选项即可完成。接下来，我将详细介绍这种方法。

使用浏览器内置功能生成PDF文件

大多数现代浏览器如Chrome、Firefox、Edge等都提供了内置的打印功能。这些浏览器不仅能够打印网页内容，还能将其保存为PDF格式。用户只需按下Ctrl+P（Windows）或Cmd+P（Mac），选择“另存为PDF”选项，即可完成PDF文件的生成。尽管这种方法简单易用，但对于需要高度自定义输出的用户来说，可能并不完全满足需求。

一、使用浏览器内置功能

1. 打印网页内容

浏览器内置的打印功能是最简便的方式。几乎所有的现代浏览器都支持将网页内容直接保存为PDF文件。用户只需按下快捷键Ctrl+P（Windows）或Cmd+P（Mac），然后在打印对话框中选择“另存为PDF”即可完成操作。这个功能适用于大多数简单的网页打印需求，尤其是当你不需要对PDF内容进行复杂的调整时。

2. 自定义打印选项

尽管浏览器内置的打印功能较为简单，但它也提供了一些基本的自定义选项。例如，你可以选择页面的范围、纸张尺寸、页眉页脚的显示与否等。这些选项能够满足部分用户对PDF内容的基本需求。如果你需要更多的定制选项，可以考虑使用浏览器的开发者工具进行进一步设置。

二、使用JavaScript库

1. PDF.js

PDF.js是Mozilla开发的一个JavaScript库，可以在网页上直接渲染PDF文件。它不仅能显示PDF文件，还能提供一些基本的交互功能，如缩放、旋转等。通过PDF.js，你可以在网页上直接查看PDF文件，无需下载到本地。这对于需要在网页上展示PDF内容的应用场景来说，非常方便。


<!DOCTYPE html>  

<html>  

  <head>  

    <title>PDF.js Example</title>  

    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>  

  </head>  

  <body>  

    <canvas id="pdf-canvas"></canvas>  

    <script>  

      var url = 'path/to/pdf/file.pdf';  

      var pdfjsLib = window['pdfjs-dist/build/pdf'];  

      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';  

      var loadingTask = pdfjsLib.getDocument(url);  

      loadingTask.promise.then(function(pdf) {  

        console.log('PDF loaded');  

        pdf.getPage(1).then(function(page) {  

          console.log('Page loaded');  

          var scale = 1.5;  

          var viewport = page.getViewport({ scale: scale });  

          var canvas = document.getElementById('pdf-canvas');  

          var context = canvas.getContext('2d');  

          canvas.height = viewport.height;  

          canvas.width = viewport.width;  

          var renderContext = {  

            canvasContext: context,  

            viewport: viewport  

          };  

          page.render(renderContext);  

        });  

      }, function(reason) {  

        console.error(reason);  

      });  

    </script>  

  </body>  

</html>

2. jsPDF

如果你需要在客户端生成PDF文件，那么jsPDF是一个非常好的选择。jsPDF是一个JavaScript库，允许你在浏览器中生成PDF文件。你可以使用它来创建包含文本、图像、表格等内容的PDF文件，并且可以自定义页面布局。


<!DOCTYPE html>  

<html>  

  <head>  

    <title>jsPDF Example</title>  

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>  

  </head>  

  <body>  

    <button id="generate-pdf">Generate PDF</button>  

    <script>  

      document.getElementById('generate-pdf').addEventListener('click', () => {  

        const { jsPDF } = window.jspdf;  

        const doc = new jsPDF();  

        doc.text('Hello world!', 10, 10);  

        doc.save('sample.pdf');  

      });  

    </script>  

  </body>  

</html>

三、服务器端生成PDF

1. 使用Node.js生成PDF

对于需要生成复杂PDF内容的应用场景，可以考虑在服务器端生成PDF文件。Node.js提供了多个生成PDF的库，如pdfkit、puppeteer等。这些库可以帮助你生成包含复杂内容的PDF文件，并且可以在生成过程中进行各种自定义设置。

2. 使用Python生成PDF

Python也提供了多个生成PDF的库，如ReportLab、FPDF等。通过这些库，你可以在服务器端生成包含文本、图像、表格等内容的PDF文件，并且可以对页面布局进行各种自定义设置。


from reportlab.lib.pagesizes import letter  

from reportlab.pdfgen import canvas  

def create_pdf(filename):  

    c = canvas.Canvas(filename, pagesize=letter)  

    c.drawString(100, 750, "Hello World")  

    c.save()  

create_pdf("sample.pdf")

四、使用第三方服务

1. Google Cloud Print

Google Cloud Print是一种方便的打印方式，支持将文档发送到云端进行打印。尽管Google已经停止了该服务，但仍有其他类似的第三方服务提供类似的功能。

2. Adobe Document Cloud

Adobe Document Cloud提供了强大的PDF生成和管理功能。通过该服务，你可以在云端生成、编辑、管理PDF文件，并且可以通过API与其他应用进行集成。

五、总结

在Web上打印PDF文件的方法有很多，选择合适的方法取决于你的具体需求和应用场景。对于简单的打印需求，使用浏览器内置的打印功能是最方便的方式；对于需要展示或生成复杂PDF内容的场景，可以考虑使用JavaScript库或在服务器端生成PDF文件；对于需要集成到项目管理系统的场景，可以考虑使用PingCode或Worktile等工具。无论选择哪种方式，都需要根据实际需求进行权衡和选择，以实现最佳效果。