It possible to get external pdf file?

[sebastianoktana]

I've tried setting "cors" on my server but still can not get it, can you help me?

Thanks!

[jdryg]

Hi,
As far as I know, it's possible. I've used the directive to load pdf files from S3 and it works correctly. There isn't anything special you need to do to make it work, as far as the library is concerned. Just set the src attribute to the remote URL and it should work (everything is taken care of by pdf.js).

There must be a problem with your CORS setup and the response from your server. I'm not an expert on the subject so I might not be able to help further, but can you post your server response to the OPTIONS method?

I found the following piece of code in my various tests with CORS (unrelated to angular-pdf-viewer) but I don't know if it's safe to use in production (probably not; use with caution). My comments say that it works, so I'll paste it here in case it helps you somehow (PHP on Apache).

if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
        header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    }

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    }

    http_response_code(200);
    die();
}

[jdryg]

There are 2 problems I can see in your case.

1. The URL you posted seems to require authentication.
2. As I understand it, you don't have control over the server serving the PDFs. If the PDF server doesn't support CORS (responds to the OPTIONS method correctly) it won't be able to serve the requested PDF.

So, I'm afraid this won't work. Your best bet is to somehow authenticate against the server on your own, download the PDF as a blob and give to angular-pdf-viewer via the file attribute instead of the src. And this will work if and only if the server support CORS.

Hope that helps somehow. Unfortunately, (as I said) I'm not fully qualified to give you a definitive answer, so don't take my words for granted :)

[sebastianoktana]

Thanks again!

I'm thinking about other alternative, is possible send to the library directly the binary file? example encode in bat64

Thanks!

[jdryg]

The directive supports setting either a URL in the src attribute or a File in the file attribute. See setFile function for details.

It creates a FileReader at line 376 and calls its readAsArrayBuffer method (at line 434) with the supplied File as parameter. According to MDN, readAsArrayBuffer accepts either a File or a Blob.

In your case you can try downloading the PDF from the remote server, converting it into a Blob and giving that to angular-pdf-viewer. It should work. No need to convert to base64. In case you already have the file as a base64 string, you should be able to convert it to a Blob.

[ssaravananerd]

Hi, we are using this plugin for our project. It works fine in Chrome browser, but IE 11 the pdf file is not getting viewed. We are not getting any error in console. kindly help us to resolve it. Thanks

[jdryg]

Try the fix suggested on the following issue or try updating pdf.js. PRs are welcome :)

mozilla/pdf.js#7216 (comment)

FWIW, I just tried loading the demo on IE11 with the debugger open and it reports an error at the location described in the above issue.