PDF.js：如何在线打开PDF而无需下载或安装插件

2023-05-19 16:53:03

PDF.js：改变在线查看 PDF 的方式

在线查看 PDF 文件不再需要麻烦的下载

在当今快节奏的数字化时代，快速轻松地访问文档至关重要。PDF 作为一种广泛使用的文档共享格式，曾经需要专用的 PDF 阅读器才能查看，但这已经成为过去。得益于 PDF.js 的出现，你现在可以在线查看 PDF 文档，而无需下载或安装任何软件。

什么是 PDF.js？

PDF.js 是一款免费且开源的 JavaScript 库，它利用 HTML5 Canvas 元素将 PDF 文档转换为易于查看的格式。凭借其在各种主流浏览器中的广泛兼容性，PDF.js 让在线查看 PDF 文件变得更加便捷。

PDF.js 的工作原理

PDF.js 利用 HTML5 Canvas 元素，将 PDF 文档呈现为图像，在浏览器窗口中显示。这一过程使你可以直接在网页中查看 PDF 文件，而无需下载或安装任何外部软件。

PDF.js 的优势

使用 PDF.js 在线查看 PDF 文档具有众多优势：

无缝集成： 无需下载或安装额外的软件，直接在网页中打开 PDF 文档。
跨平台兼容性： 支持所有支持 HTML5 的现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。
丰富的查看功能： 提供缩放、滚动、搜索、添加注释和突出显示等多种查看模式和工具。
开源和免费： 作为一款开源且免费的软件，PDF.js 允许用户自由使用、修改和分发。

如何使用 PDF.js？

使用 PDF.js 在线查看 PDF 文档非常简单：

选择一个支持 PDF.js 的网站： 如 Google Drive、OneDrive 或 Dropbox 等网站提供 PDF.js 查看功能。
上传 PDF 文档： 将 PDF 文档上传到支持 PDF.js 的网站。
在线查看： 上传完成后，你就可以在网页中查看 PDF 文档了。

代码示例

要将 PDF.js 集成到你的网站中，可以使用以下 JavaScript 代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.15.349/pdf.js"></script>

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

<script>
  // 创建 PDF 浏览对象
  const pdfjsLib = window['pdfjs-dist/build/pdf'];
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.15.349/pdf.worker.js';

  // 加载 PDF 文档
  const url = 'my_document.pdf';
  pdfjsLib.getDocument(url).then(pdfDoc => {
    // 获取第一页
    const page = await pdfDoc.getPage(1);

    // 使用 Canvas 呈现页面
    const viewport = page.getViewport(1);
    const canvas = document.getElementById('pdf-canvas');
    const context = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    // 渲染页面
    const renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    await page.render(renderContext);
  });
</script>