Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to mimick the '?file=' query parameter via javaScript #9670

Closed
tfierens opened this issue Apr 17, 2018 · 4 comments
Closed

How to mimick the '?file=' query parameter via javaScript #9670

tfierens opened this issue Apr 17, 2018 · 4 comments

Comments

@tfierens
Copy link

tfierens commented Apr 17, 2018

Hi,

How can I mimic the http://localhost/viewer.html?file=abc.pdf' via JavaScript?

I post a message via postMessage from my web app in which host an iFrame which has its source set to the viewer.html.

In the Viewer.html, I capture the message via the addEventListener but I need to load the relevant pdf file via code but I don't understand how to get it to work using the Viewer.html in order to mimic the '?file=' behaviour.

`
<script>
$(document).ready(function () {
window.addEventListener('message', function (event) {
var domain = 'http://' + document.location.hostname;
if (event.origin !== domain) return;
console.log('message received: ' + event.data, event);
var fileName = 'http://localhost/myapp/scripts/pdfjs-dist/web/' + event.data;
var pdfjsLib = window['pdfjs-dist/build/pdf'];

            console.log(pdfjsLib);
        }, false);
 </script>

`

Eventually I want to use a base64 string but I thought I'd try to figure out how the query param works and how to mimic it via code.

All the example I'm finding are using code similar to this:

var loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(function(pdf) {...

and while pdfjsLib.getDocument seems to be setting the file, I'm not sure what to call next to 're-initialize' the viewer displayed in viewer.html.

I was hoping for something like:

`
pdfjslib.getDocument(url);
pdfjsLib.webViewerLoad();

`
or something similar.

Is there a way to set the file and then initialize the viewer?

I hope you can help.

Sorry I know this is not an issue and more a 'how to' but I thought this was probably the best place to ask.

@tfierens
Copy link
Author

tfierens commented Apr 17, 2018

Hi,

I've actually figured it out. I don't know if this is correct or not, but it seems to work ok using the following:

var config = PDFViewerApplication.appConfig;
config.defaultUrl = fileName;
PDFViewerApplication.run(config);

If anyone has a few minutes to spare and confirm that this is ok, that would be great.

Thanks.

Next step is getting this to work hopefully in a similar way with a base64 string or an array :).

@tfierens
Copy link
Author

Note that I've noticed a couple of problem using this method:

  1. Memory leaks: The memory used by the browser keeps on increasing over and over and while it doesn't seem to go over a certain amount i.e. 280Mb/300Mb, it does start at 85Mb and even when calling the 'PDFViewerApplication.cleanup();' it does not seem to have any effect regarding releasing memory.

  2. When flicking from one document to another over and over, it does a weird thing with the Zoom In, Zoom Out and the Zoom dropdown where it moves it out of the toolbar and displays it over the viewer and it remains there until I close the browser.

I've attached a screencast where you can clearly see the issue: Odd toolbar behaviour

I'll revert my code back tomorrow and see if the same happens when using the file query parameter.

@tfierens
Copy link
Author

Please note that the toolbar does not get messed up when opening multiple documents one after the other when using the query string parameter ?file= so something must not be reset when calling the above code event though it is technically the same as what is in the webViewerLoad method which calls the 'pdfjsWebApp.PDFViewerApplication.run'.

@timvandermeij
Copy link
Contributor

timvandermeij commented Apr 17, 2018

You have two options:

  • Create a custom viewer using the viewer components (see the examples/components folder) so you can use the API: var loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(function(pdf) {....
  • Edit the default viewer and check how the default URL is set in code.

Memory leaks may happen if you don't close the file properly when reloading. Hence, it's best to reuse the logic that is already there to open and close files. Refer to:

https://github.com/mozilla/pdf.js/blob/master/web/app.js#L695

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants