CODEWITHSUNDEEP
angularpdfreaderpdf-viewerngx-extended-pdf-viewer
The.Wolfgang.Grimmer
The.Wolfgang.Grimmer

Reputation: 1351

How do i display local pdfs using ngx-extended-pdf-viewer?

On my sample app, I'm letting a user pass a URL such as this one https://www.test.com?file:///path/filename.pdf

I'm extracting that file query and passing it inside the component:

<ngx-extended-pdf-viewer
  [src]="sourceUrl"
  [handTool]="false"
  [showFindButton]="true"
  zoom="100%"
  height="100vh"
  [useBrowserLocale]="true"
></ngx-extended-pdf-viewer>

I'm getting error of "Message: Missing PDF". Is there a way to convert a local path starting with file:/// to be displayed as PDF?

Upvotes: 0

Views: 1630

Answers (1)

The.Wolfgang.Grimmer
The.Wolfgang.Grimmer

Reputation: 1351

For anyone that may stumble upon this question, i was able to determine how to do it. Basically, use xhr and set the response type to arraybuffer

Idk, if there's anything i need to do other than the code below, but it works.

  function downloadLocalFile(url: string, cb: (response: Uint8Array) => void) {
    var xhr = new XMLHttpRequest();
    xhr.onload = () => {
      const response = new Uint8Array(xhr.response);
      cb(response);
    };

    xhr.onerror = (error) => {
      console.log(error);
    };

    xhr.open("GET", decodeURIComponent(url));
    xhr.responseType = "arraybuffer";
    xhr.send();
  }

You can use it like this:

downloadLocalFile('file:///path/file.pdf', (arrayBuffer) => {
  console.log(arrayBuffer);
});

I haven't tried it with fetch, i'm not quite sure if you can set the response to arraybuffer

Upvotes: 1

Related Questions