I am looking into putting together a small site that reads a few PDF files and loads them in the PDF.js viewer. (I want to use the viewer specifically) I still want all of the viewer UI and functionality present, just adding a sidebar with a list of files to chose from.
Alas I have not been able to really understand the PDF.js code (or a lot of the Viewer.js code provided for that matter)
Currently I am looking for a way to pass the PDF.js viewer a new file to open. (Without reloading the page and using the url parameter)
With that said that is only the bare minimum functionality to continue with this project.
I am also looking for something that can resemble a function reference for any of the Viewer / PDF.js functions that can be used for interactions:
I/O of the files
moving through pages / headings
scaling the pdf
any event triggers
I haven't been able to find anything direct from Mozzila's Github Wiki. And the recent tutorials that I have been able to find don't make use of the Viewer at all.
To open a file from a url:
PDFView.open(url, 0);
Set page:
PDFView.page = 2;
zoom/scale:
PDFView.zoomIn(10);
PDFView.zoomOut(10);
Basically just look at the PDFView object in viewer.js.
Related
I have been playing around with the file system drag and drop functionality of Electron apps and haven't had any issues getting everything to work with local files. I have not come across anything in the documentation, so I'd like to see if anyone knows if this is possible. I'd like to use the drag-out feature in Electron to drag a remote file outside of the app and onto the file system.
Specific example:
The program I am working on is a remote file management tool - similar to dropbox. I'd like to drag the dom element representing the remote file to a Finder (or Windows Explorer) window and have Electron download the file to that location.
I am able to get this to work as long as the file is stored locally following the Electron documentation.
http://electron.atom.io/docs/all/#dragging-files-out-of-the-window
I can envision two possible solutions:
Does electron have the ability to pass a DownloadItem or a URL to the 'startDrag' event (as referenced in the link above)?
Is it possible to listen for a 'dropped' even of some kind and get the local file system path of where my dom element was dropped? For example, /Users/{proile}/Desktop? I could use my existing download methods to download the file to that specific path.
Any thoughts on how I can accomplish my goal? Thanks so much for your time.
I haven't seen any examples of this sort of functionality – but it doesn't seem like it would be hard to cobble it together (famous last words...)
You have your representations in the UI of the remote files and those are enabled to be "dragged" to the desktop.
You catch the target destination when the user drags one of those representations
You start a download of the associated file and save it to the target destination
At least that is how I would start to approach it.
There are various electron related libs dealing with downloads (e.g. electron-dl). If you get this working, report back and share the details.
I know there are some posts out there, but I have not found a sufficient answer to this fundamental issue.
I want to send my customers an email with an attached PDF file in which they can find a nicely designed overview of their booking.
Problem 1:
That overview is can be rendered by my frontend with AngularJS very easily (including complicated logic with translations, timezones, ...) - the logic exists. Therefore, I want to let my frontend produce the HTML, that I place into the PDF file. I would have to teach my NodeJS server the whole logic too, which I want to avoid.
Problem 2:
How do I get my HTML code (including CSS) displayed in a PDF correctly? I have seen jsPDF and PDFmake but none seemed to work the way I wanted. They rely on html2canvas to create a canvas object from my HTML code and put it on the PDF as an image. If your "image" is bigger than 1 page, it gets even more complicated. In addition to that, the scope did not seem to be correct. The resulting image did not contain the defined div-element completely but other parts of the page instead.
I am sure many more people need something like this so I am looking for a simple, straight forward solution.
Summary: I want my rendered HTML + CSS from the frontend put into a PDF file.
Edit: Having a screenshot of the resulting HTML as html2canvas would do, is not optimal. Because the user cannot interact with the content (e.g. select text).
I'm working on an application that needs to download the source of a web page from a link, with all the internal files, like images, css, javascript.
After, I will need to open this html in a webview, in offline mode, that's why I need to download everything from the page.
I'd download the images using JSOUP, but I haven't ideia how to link them into the downloaded html.
Could you give me some examples, or starting points where to look to start?
Thanks in advance
Essentially, what you'll need to do (and what my app mentioned below does) is go over all the references links to additional additional assets / images / scripts and so on, download them, and then change the HTML document to point to the local downloaded copy. Something like this, with Jsoup:
Find all the img elements on the page,
Get the location / url of the image file from the src attribute of the img elements (with .attr("abs:src:)),
Download all of those images to a local directory
Change each of the image elements src attribute values to point to the location of the downloaded image file, relative to where the main HTML file will be stored, eg with .attr("src", "assets/imagefilename.png"").
Do this for all other assets required by the page, eg. images, CSS, scripts, html5 video, and others. I also did some regex on the CSS (both linked and inline) to extract, download, and rewrite things like background image references and in the css. Webpages also have other linked things like favicons or RSS feeds which you might want too.
Save your Jsoup document (with the modified URLs pointing to your downloaded versions of the assets) to file, by calling .toString() on it and saving the result to a file.
You can then open the local HTML file in webview, and, assuming you have done everything right, it will show with all images and assets, even offline.
I actually wrote an Android app which does exactly this: save a complete HTML file and all of the CSS / images / other assets to a local file / directory, using Jsoup.
See https://github.com/JonasCz/SaveForOffline/ for the source, specifically SaveService.java for the actual HTML page saving / downloading code.
Beware that it's GPL licensed, so you have to comply with the GPL license if you use (parts of) it.
Also beware that it does a lot of things, and is quite messy as a result, (there's also no comments or documentation either...) but it may help you.
You can do it with Jsoup. IMO, it's a lot of work. On the other, you can consider Crawler4j.
There is a tutorial on their website. Have look to the example for crawling images.
I want to be able to show PDF files within my Chrome app using PDF.js but the documentation is non-existent. I've been unable to find any simple examples or tutorials that show the code to load a PDF from a relative URL, show the page, and navigate through the PDF. They have very complex examples where 95% of the code does other things and it's very difficult to parse these and find the relevant functions. I would like to:
Include the relevant code in my app (is this the "pdf.js" created by "node make generic" and nothing else? Or do i need to include other JS files as well?)
Be able to show PDF files that are inside my myapp.crx file
Does pdf.js require "LocalStorage"? Will localStorage continue to be allowed in Chrome extensions/apps or is it deprecated?
Can someone tell me if #2 is possible and how to find some example code or documentation on the proper classes/functions to call and files to include/build?
node make generic outputs to the build/generic directory. This directory contains two subdirectories, "build" and "web".
"build" contains "pdf.js", which is the actual PDF engine.
"web" contains a viewer, similar to the one at http://mozilla.github.io/pdf.js/web/viewer.html.
After copying both of those previous directories to your app, you should be able to load the PDF file using chrome.extensi/web/viewer.html?file=path%2Fto%3Ffile.pdf
PDF.js does not require localStorage.It's used if available for persisting settings such as scroll position, but if unavailable, PDF.just continues to work without it.
There is one significant issue though: PDF.js loads the localization files using synchronous XMLHttpRequest. This is not allowed in a Chrome app. You could solve this issue by serializing all files in the locales, put it in a single JavaScript file, load this in viewer.html, and simplify l10n.js to read the translations from the file I just described.
Just to clarify: normally you should be able to access a file baked into your CRX by providing a relative or absolute path to it within the CRX's internal directory structure, e.g.:
'myfiles/pdfs/example.pdf'
With PDF.js, I guess that's what "path-to-file.pdf" should be in Rob's answer above, verbatim.
I'm displaying PDF file that are generated on-the-fly within a ASP page. The PDF generation (and download to the client) can take some time and I'd like to provide the user with some feedback (a loading message or something).
AFAIK there's no way to know when the PDF is viewed because the DOM events get triggered when the Adobe Reader plugin gets loaded (even though it's not displaying anything yet).
I noticed that there's a Javascript API for the plugin object that I could potentially use. I notivced a LoadFile method on it but unfortunately it doesn't seem to do much.
Adobe's documentation is really useless. It talks of Javascript only as a plug-in writting language or as OLE interaction (and poorly).
Is there any documentation for the API and is it possible to know when the PDF has been loaded? It would be perfect if I could pass on a PDF stream to a PDF viewer of some sort.
I've wanted to the same, found a page that may help you out.
http://www.adobe.com/devnet/acrobat/javascript.html