title: How to render 20% of a pdf with custom pdf viewer created with pdf.js
body: <p>This is the code that is responsible to get the pdf. It then passes the pdf to the pdf viewer for it to be rendered. I don't want to render the whole pdf. Instead, I want to render just part of the pdf, for example, the first 5 pages, or 20% of the page. The code below uses pdfjs and this code below is available in the PDFJS repo. You can access the entire code via <a href="https://github.com/mozilla/pdf.js/blob/master/examples/mobile-viewer/viewer.js" rel="nofollow noreferrer">https://github.com/mozilla/pdf.js/blob/master/examples/mobile-viewer/viewer.js</a></p>
  
  <pre><code>private open (params) {
      let url = params.url
      let self = this
      this.setTitleUsingUrl(url)
      // Loading document.
      let loadingTask = pdfjsLib.getDocument({
        url: url,
        withCredentials: true,
        maxImageSize: MAX_IMAGE_SIZE,
        cMapPacked: CMAP_PACKED
      })
      this.pdfLoadingTask = loadingTask
  
      loadingTask.onProgress = function (progressData) {
        self.progress(progressData.loaded / progressData.total)
      }
  
      return loadingTask.promise.then(function (pdfDocument) {
        // Document loaded, specifying document for the viewer.
        console.log(pdfDocument); // The pdf object. picture content below
  
        // The document is being passed to the viewer for rendering
        // I want to pass just 15% of the document to the user to view
        self.pdfDocument = pdfDocument;
        self.pdfViewer.setDocument(pdfDocument)
        self.pdfLinkService.setDocument(pdfDocument)
        self.pdfHistory.initialize(pdfDocument.fingerprint)
        self.loadingBar.hide()
        self.setTitleUsingMetadata(pdfDocument)
      }
  </code></pre>
  
  <p>The image below is the structure of the pdf object</p>
  
  <p><a href="https://i.stack.imgur.com/hVFoS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hVFoS.png" alt="enter image description here"></a></p>