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

1. Getting Started

• 原理：获得 PDF 对象，获取所有的 Page 页面，为每一个页面创建一个 Canvas，通过 Page 的 render 方法把页面渲染到对应的页面 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);

动态设置缩放

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

使用 setDocument 方式

• 原理：通过获得显示 PDF 的 div 使用 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()