通过pdfjs-dist批量渲染在页面渲染pdf

核心逻辑

通过pdfjs-dist渲染pdf页面，如果基于Vue-Cli脚手架搭建的Vue项目，需要根据Vue-Cli的版本找到对应的pdfjs-dist版本。由于最新版本的pdfjs-dist 使用了ES6的语法，需要对项目进行babel配置。更多详细内容可以查看pdfjs-dist 。

// 通过这个方法引入，线上环境会找不到包
// import PDFJS from 'pdfjs-dist'; 

const PDFJS = require('pdfjs-dist');
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry');

// 文件内容流
let fileSrc = null; 
// 总页码
let pageCount = 0;
// PDFJS 通过文件地址获取文件内容、页码等内容
PDFJS.getDocument(fileUrl).then(fileContent => {
  fileSrc = fileContent;
  pageCount = fileContent.numPages;
  const pages = transformNumToArr(1, fileContent.numPages);
  renderThumbnails(pages);
});
/**
参数是渲染的页码，页面需要有对应个数的canvas节点
*/
function renderThumbnails(nums) {
  nums.forEach((item, index) => {
    // 获取页面canvas节点
    let canvas = document.getElementById(`canvas${index}`);
    // 获取上下文
    const ctx = canvas.getContext('2d');
     // 获取每一页的内容
    fileSrc.getPage(item).then(page => {
      // 文件页面的视图
      const viewport = page.getViewport(1);
      // 由于PDF展示格式以A4纸尺寸为参考，因此获取A4高度与文件高度的比例
      const heightPercent = 794 / viewport.height;
      // 将画布宽度设置为视图宽度
      canvas.width = viewport.width;
      // 高度比例大于1，说明内容区域高度不能铺满一张A4，则需要将高度按照比例缩放
      // 高度比例小于等于1，说明内容区域高度可以铺满一张A4，则将视图除以比例计算
      canvas.height =
        heightPercent > 1
        ? viewport.height * heightPercent
        : viewport.height / heightPercent;
      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      // 渲染页面内容：参数是canvas画布上下文，以及文件视图
      page.render(renderContext);
    });
  });
}

引申内容

在实现pdf缩略图的过程中，使用本地上传的文件，但是pdfjs-dist的 getDocument API需要文件URL来获取文件内容，因此需要将上传文件转化成文件URL。
前端可以通过 URL.createObjectURL(file) 方法来将指定的File对象或Blob对象转化为一个指向文件源对象的地址，但是这个URL是不会主动释放的，只有在页面应用程序关闭后才会释放。因为为了性能，我们需要手动释放无效的地址，通过 URL.revokeObjectURL(url) 方法可以手动释放。

参考链接

URL.createObjectURL
URL.revokeObjectURL