1. Getting Started

  • Principle: ObtainPDFObject to get all ofPagePage, creating one for each pageCanvasThrough thePage 的 renderMethod to render the page to the corresponding pageCanvas
  • Advantages: Ability to dynamically render corresponding pages
  • Cons: His way is to get every page of data in correspondingdivCreate aCanvasFrequent operationDomThe need for separate text Settings results in stutters and is not suitable for large files

Get file objects

var loadingTask = pdfjsLib.getDocument(url)
loadingTask.promise.then(pdf=>{
    # PDF Can obtain the number of pages in the PDF
})
Copy the code

Here the PDF is the information of the document, you can render the corresponding page through the PDF.

Get each page object

pdf.getPage(num).then(page=>{
    # num displays each page
    # page is a PDF per-page data object
})
Copy the code

Render to page

Var scale = 1.5;# zoom size
var viewport = page.getViewport({ scale: scale, });

Create a Canvas 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
};
Render the page information to Canvas
page.render(renderContext);
Copy the code

Dynamically set scaling

      
var desiredWidth = window.devicePixelRatio; # Device pixel ratio
The device pixel ratio makes the rendered page clearer and eliminates the blurring caused by PDF zooming in and out
  const viewport = page.getViewport({ scale: scale * devicePixelRatio });;
Copy the code

usesetDocumentway

  • Principle: By obtaining the displayPDF 的 divusesetDocumentMethod to render to the page
  • Pros: Render pages fast, suitable for large files, no need to render fonts yourself
  • Disadvantages: there is no zoom in or zoom out method for dynamic Settings
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()
Copy the code