Ng2-pdf-viewer: URL scheme "file" is not supported.

[manojbhardwaj]

Fetch API cannot load file:///data/user/0/com.testapp/files//admin/images/question-paper/class-10/Mathematics/2011/Class%20X%202011.pdf. URL scheme "file" is not supported.
I m not able to open File:/// how fixed this error and pass into src

[VadimDez]

Are you trying to render preview for local pdf ?
If so - take a look on the demo project, it has such example
https://github.com/VadimDez/ng2-pdf-viewer/blob/master/src/app/app.component.ts#L48-L62

[manojbhardwaj]

Great Issue is resolved thank you

[zepedrorocha]

For future readers.

I stumble upon this problem today. I was using v1.2.x just loading the local url file straight forward but since 2.x.x , @VadimDez started using Fetch api which doesn't support 'File' scheme eg: 'file:///my-file.pdf'

Here's my curently workaround:

async loadPdf(path: string) {
  return new Promise<string>((resolve, reject) => {

    const request = new XMLHttpRequest();
    request.open('GET', path, true);
    request.responseType = 'blob';

    request.onload = () => {
      const reader = new FileReader();

      reader.onload = (e: any) => resolve(e.target.result);
      reader.onerror = err => reject(err);
      reader.readAsDataURL(request.response);
    };

    request.send();
  });
}

// ...
this.pdfSrc = await this.loadPdf('file:///path/to/file.pdf');

I'm building a desktop app (Electron+Angular)

[johnking]

withdraw previous issue due to my local settings.

[qwerqwermhc]

@manojbhardwaj How do you solve it? Can you show me your relevant code snippet?
I don't understand very well. For local files such as ‘file:///D:/pdftest/HGH-18123.pdf’ I don’t know how to do this to open with this plugin.
Can you show me your code? Forgive my dullness. Will you help me?

[qwerqwermhc]

@zepedrorocha Failed to load file:///D:/pdftest/HGH-18123.pdf: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

[mrcoles]

@zepedrorocha looks like loadPdf should also have:

request.onerror = err => reject(err);

Separately I’m seeing that you’re building a desktop app (Electron+Angular), I don’t think a website or even a Chrome extension can download local files. When I try from within a Chrome extension, I get:

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

cc @qwerqwermhc