1、前端页面如何优雅的显示PDF:原理说明

发布于 2022年 02月 11日 13:56

1. Getting Started

  • 原理:获得 PDF 对象,获取所有的 Page 页面,为每一个页面创建一个 Canvas,通过 Pagerender 方法把页面渲染到对应的页面 Canvas
  • 优点:能够动态渲染相应的页面
  • 缺点:他的方式是获得每页数据在相应的 div 中创建一个 Canvas 频繁的操作 Dom 需要单独的设置文字 导致卡顿,不适合大文件

获取文件对象

var loadingTask = pdfjsLib.getDocument(url)
loadingTask.promise.then(pdf=>{
    # PDF 能够获取到PDF的页数
})

这里的PDF就是文件的信息,可以通过PDF渲染相应的页面。

获得每页对象

pdf.getPage(num).then(page=>{
    # num 显示每页
    # page 就是PDF每页数据对象
})

渲染到页面

var scale = 1.5; # 缩放大小
var viewport = page.getViewport({ scale: scale, });

# 创建一个 Canvas 画布
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;

var renderContext = {
  canvasContext: context,
  viewport: viewport
};
# 把 page 信息 render 到 Canvas 中
page.render(renderContext);

动态设置缩放

      
var desiredWidth = window.devicePixelRatio; # 设备像素比例 
# 默认缩放比率 * 设备像素比率 让渲染出来的页面更清晰,解决PDF放大缩小产生的模糊现象
  const viewport = page.getViewport({ scale: scale * devicePixelRatio });;

使用 setDocument 方式

  • 原理:通过获得显示 PDFdiv 使用 setDocument 方法渲染到页面
  • 优点:渲染页面快,适合大文件, 不需要自己渲染字体
  • 缺点:暂时没有找的动态设置放大缩小方法
const open = () => {
    const loadingTask = pdfjsLib.getDocument({
      url,
      maxImageSize: MAX_IMAGE_SIZE,
      cMapUrl: CMAP_URL,
      cMapPacked: CMAP_PACKED,
    });
    pdfLoadingTask = loadingTask;
    // eslint-disable-next-line func-names
    loadingTask.promise.then(_pdfDocument => {
      // Document loaded, specifying document for the viewer.
      pdfDocument = _pdfDocument;
      pdfViewer.setDocument(_pdfDocument);
      pdfLinkService.setDocument(_pdfDocument);
      pdfHistory.initialize({ fingerprint: _pdfDocument.fingerprint });
    });
  };

  const initUI = () => {
    const linkService = new pdfjsViewer.PDFLinkService();
    pdfLinkService = linkService;
    const container = document.getElementById('viewerContainer');
    // eslint-disable-next-line no-underscore-dangle
    const _pdfViewer = new pdfjsViewer.PDFViewer({
      container,
      linkService,
      useOnlyCssZoom: USE_ONLY_CSS_ZOOM,
      textLayerMode: TEXT_LAYER_MODE,
    });
    pdfViewer = _pdfViewer;
    linkService.setViewer(_pdfViewer);
    pdfHistory = new pdfjsViewer.PDFHistory({
      linkService,
    });
    linkService.setHistory(pdfHistory);
  };
  
  initUI()
  open()

推荐文章