Range requests are not working.

[AliOsm]

Hello everyone, I'm using pdfjs-dist version 3.11.174 using Yarn, and I have the following StimulusJS controller in my Rails application:

import { Controller } from "@hotwired/stimulus"
import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist/build/pdf'
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry"

// Connects to data-controller="pdf-reader"
export default class extends Controller {
  static targets = ["canvas", "pageNumber"]
  static values = { url: String }

  async connect() {
    this.currentPage = 1
    this.pageNumberTarget.value = this.currentPage

    GlobalWorkerOptions.workerSrc = pdfjsWorker

    const loadingTask = getDocument({
      url: this.urlValue
    })

    this.pdf = await loadingTask.promise

    this.renderPage()
  }

  async renderPage() {
    const page = await this.pdf.getPage(this.currentPage)
    const viewport = page.getViewport({ scale: 1 })
    const canvas = this.canvasTarget

    canvas.width = viewport.width
    canvas.height = viewport.height

    const context = canvas.getContext("2d")

    await page.render({
      canvasContext: context,
      viewport: viewport
    })
  }

  firstPage() {
    this.currentPage = 1
    this.renderPage()
    this.pageNumberTarget.value = this.currentPage
  }

  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage -= 1
      this.renderPage()
      this.pageNumberTarget.value = this.currentPage
    }
  }

  nextPage() {
    if (this.currentPage < this.pdf.numPages) {
      this.currentPage += 1
      this.renderPage()
      this.pageNumberTarget.value = this.currentPage
    }
  }

  lastPage() {
    this.currentPage = this.pdf.numPages
    this.renderPage()
    this.pageNumberTarget.value = this.currentPage
  }

  changePage() {
    let requestedPage = Number(this.pageNumberTarget.value)

    if (requestedPage > 0 && requestedPage <= this.pdf.numPages) {
      this.currentPage = requestedPage
      this.renderPage()
    } else {
      alert(`Invalid page number (Max: ${this.pdf.numPages})`)
      this.pageNumberTarget.value = this.currentPage
    }
  }
}

The controller uses PDF.js library to load and display PDF files. It is working fine, with 1 issue, the PDF.js library is not using range requests, so it is loading the whole PDF file at once, which is an issue for big PDF file. How to solve this?

I'm searching for a solution for 2 days now, I tried all suggestions related to disableAutoFetch and disableStream, with no success.

[Priestch]

@AliOsm You have to implement all by yourself to support Range Request unless you use the default viewer somehow. Even if you use the default viewer, the server must also be configured to support Range Request correctly.

For those who use the default viewer and still suffer this issue, go through the checklist to ensure your server was configured correctly:

• Make sure you didn't set the disableRange option
• Make sure the first get request that downloads the pdf return 200 or 206.
• Make sure the first get request has the right Content-Length, Accept-Ranges and Content-Encoding header
  • The Content-Length should be larger then 2 * rangeChunkSize, the default rangeChunkSize is 65536
  • The Accept-Ranges should be bytes and the server must really support it
  • The Content-Encoding should be identity if present

If you ensure all these were configured correctly, then you can debug the code block step by step to find out what's the real issue.

pdf.js/src/display/fetch_stream.js

Lines 130 to 168 in f6b356e

	fetch(
	url,
	createFetchOptions(
	this._headers,
	this._withCredentials,
	this._abortController
	)
	)
	.then(response => {
	if (!validateResponseStatus(response.status)) {
	throw createResponseStatusError(response.status, url);
	}
	this._reader = response.body.getReader();
	this._headersCapability.resolve();
	const getResponseHeader = name => response.headers.get(name);
	const { allowRangeRequests, suggestedLength } =
	validateRangeRequestCapabilities({
	getResponseHeader,
	isHttp: this._stream.isHttp,
	rangeChunkSize: this._rangeChunkSize,
	disableRange: this._disableRange,
	});
	this._isRangeSupported = allowRangeRequests;
	// Setting right content length.
	this._contentLength = suggestedLength || this._contentLength;
	this._filename = extractFilenameFromHeader(getResponseHeader);
	// We need to stop reading when range is supported and streaming is
	// disabled.
	if (!this._isStreamingSupported && this._isRangeSupported) {
	this.cancel(new AbortException("Streaming is disabled."));
	}
	})
	.catch(this._headersCapability.reject);

[catmanjan]

I finally got mine working, I can probably help you - how are you setting disableAutoFetch and disableRange? I recently discovered that the URL hash params are not read by default

[MarkNwilliam]

i keep getting pdf invalid structure when I get a range of data from the pdf

[AliOsm]

Actually I changed from the code above to use the default viewer. It is better and handles more functionalities. Thanks for your help all!