PDF.js介绍以及使用

2023-12-23 08:41:19

一、PDF.js是什么

PDF.js是一个JavaScript库，可以在现代Web浏览器中渲染和显示PDF文件。它的主要作用是将PDF文件转换为HTML5格式，以便在浏览器上进行展示和交互。

PDF.js的主要功能包括：

  1. 在浏览器中显示PDF：PDF.js使用HTML5的canvas元素来呈现PDF页面，使得用户可以在浏览器中直接查看PDF文件，而无需依赖外部的PDF阅读器插件。
  2. 支持基本的浏览功能：PDF.js提供了一套用户界面，包括缩放、滚动、翻页等浏览功能，使用户能够方便地导航和浏览PDF文件。
  3. 支持文本搜索：PDF.js可以对PDF文件进行文本搜索，用户可以输入关键字来查找并定位到相应的内容。
  4. 支持页面导航：PDF.js提供了页面导航功能，用户可以跳转到特定的页面，或者在查看多页PDF时进行翻页。
  5. 支持缩放和旋转：PDF.js允许用户调整PDF页面的缩放级别，并可以旋转页面以适应不同的阅读需求。
  6. 支持批注和标记：PDF.js可以让用户在PDF文件中进行批注和标记，例如划线、画框、添加注释等，以便在阅读或共享时进行交流和标记重点。

总的来说，PDF.js提供了一种在Web浏览器中展示和操作PDF文件的解决方案，使用户能够直接在浏览器中浏览和使用PDF，而无需依赖外部的PDF阅读器插件或专门的PDF编辑工具。

二、PDF.js使用

官网
https://mozilla.github.io/pdf.js/
简单显示案例

<!DOCTYPE html>
<html>
<head>
    <title>PDF.js Example</title>
    <style>
        #pdf-container {
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
<div id="pdf-container"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.js"></script>
<script>
    // 指定工作线程脚本的路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.js';

    // 获取容器元素
    var container = document.getElementById('pdf-container');

    // 加载PDF文档
    pdfjsLib.getDocument('./2.pdf').promise.then(function(pdf) {
        // 获取第一页
        pdf.getPage(1).then(function(page) {
            var scale = 1.5;
            var viewport = page.getViewport({ scale: scale });

            // 创建一个<canvas>元素用于显示PDF页面
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            canvas.width = viewport.width;
            canvas.height = viewport.height;

            // 将PDF页面渲染到<canvas>元素中
            page.render({
                canvasContext: context,
                viewport: viewport
            });

            // 将<canvas>元素添加到容器中
            container.appendChild(canvas);
        });
    });
</script>
</body>
</html>

这段代码是使用PDF.js库在浏览器中显示PDF文件的示例。如果你想要修改代码以实现一些功能，可以参考以下示例修改：

  1. 添加翻页功能：
var currentPage = 1;
function renderPage(pageNumber) {
  container.innerHTML = ''; // 清空容器
  pdf.getPage(pageNumber).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale });
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    page.render({
      canvasContext: context,
      viewport: viewport
    });
    container.appendChild(canvas);
    currentPage = pageNumber;
  });
}

// 监听翻页按钮点击事件
document.getElementById('prev-btn').addEventListener('click', function() {
  if (currentPage > 1) {
    renderPage(currentPage - 1);
  }
});

document.getElementById('next-btn').addEventListener('click', function() {
  if (currentPage < pdf.numPages) {
    renderPage(currentPage + 1);
  }
});

在HTML中添加两个按钮：

<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>

这样就可以通过点击按钮来翻页了。

  1. 文本搜索功能：
function search(text) {
  var searchParams = {
    query: text,
    highlightAll: true
  };
  pdf.getPage(currentPage).then(function(page) {
    return page.getTextContent();
  }).then(function(textContent) {
    pdfjsLib.renderTextLayer({
      textContent: textContent,
      container: container,
      viewport: page.getViewport({ scale: scale }),
      textDivs: []
    }, searchParams);
  });
}

// 监听搜索表单提交事件
document.getElementById('search-form').addEventListener('submit', function(event) {
  event.preventDefault();
  var searchText = document.getElementById('search-input').value;
  search(searchText);
});

在HTML中添加搜索表单：

<form id="search-form">
  <input id="search-input" type="text" placeholder="Search">
  <button type="submit">Search</button>
</form>

这样就可以在表单中输入关键字进行文本搜索了。

请注意，以上只是示例代码，实际实现中可能需要根据具体需求进行调整和完善。同时，需要确保PDF.js和相关依赖的正确引入，以及正确指定PDF文件的路径和文件名。

文章来源:https://blog.csdn.net/weixin_39934453/article/details/135131897
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。