推荐一款免费开源的JavaScript读取、显示PDF文档的工具库——PDF.js

通常来说，要阅读PDF文档，我们通常需要专门的PDF阅读器软件。然而，有了PDF.js，我们可以在浏览器中直接查看和处理PDF文档，无论是进行在线浏览、存档还是其他基于PDF的功能，都可以轻松实现。下面给大家介绍一款免费开源的JavaScript读取、显示PDF文档的工具库——PDF.js

什么是PDF.js

PDF.js是一个使用HTML5技术的前端JS工具库，使得网页能够读取、解析和显示PDF文档。这个项目由知名的Mozilla组织开发和维护，没错，就是那个开发了火狐浏览器的Mozilla。因此，PDF.js也内置在Firefox的19+版本中，成为火狐浏览器的默认PDF处理工具。

PDF.js免费开源说明

Mozilla 是一个非营利性组织，始终致力于推动浏览器的良好发展。PDF.js 也不例外，是一个免费开源的项目，其源码基于 Apache 2.0 许可托管在 Github 上。任何人都可以免费下载和使用 PDF.js，将其用于商业项目也是完全可以的。

PDF.js的技术特性

1、功能强大，内置了很多实用的 api，几乎可以对 PDF 文件“为所欲为”；
2、兼容性超好，不仅支持现代浏览器，对于旧版本的浏览器也有很好的支持；
3、易于上手，官方也提供了很多代码例子。

PDF.js代码上手

npm 安装的方式：

npm i pdfjs-dist -S

项目demo

<template>
<div class="hello">
    <input
      type="file"
      name="file"
      id="file"
      accept="application/pdf"
      single
      placeholder="请选择pdf文件"
      @change="handleFile"
    />
    <canvas id="viewer" ref="viewer" :width="width" :height="height"></canvas>
  </div>
</template>
<script>
import { getDocument } from "pdfjs-dist/webpack"; // 注意这里的引入方式

// 省略无关代码...
// methods:
    handleFile(e) {
      const reader = new FileReader();
      reader.onload = (evt) => {
        this.init(evt.target.result);
      };

      reader.readAsDataURL(e.target.files[0]);
    },
    async init(path) {
      // 读取pdf
      let pdf = await getDocument(path).promise; //返回一个pdf对象
      const page = await pdf.getPage(0); // 获取第一页
      const viewport = page.getViewport({ scale: 1 });
      const textContent = await page.getTextContent();
      console.log(textContent.items); // 页面的文章内容在这

      const context = this.canvas.getContext("2d");
      // 设置canvas的尺寸
      this.width = viewport.width;
      this.height = viewport.height;
      await page.render({ canvasContext: context, viewport: viewport }).promise; // 渲染第一页内容
    },
</script>

除了提取文章和转成图片，PDF.js还具有许多强大的功能。例如，它可以实现页面导航，在预览时加入缩放、滚动、旋转和手写等注释，以及实现打印、另存为等操作。

进入PDF.js官网