My web application used PDF.js to load PDFs in the browser. It gets the PDFs from a REST API.
The web app is a single page angularjs affair. You can navigate inside the app and open up one of these PDFs. When you do open one of them, the relative links to other PDFs inside the Outline of the first PDF do not work.
When I access the REST API URL at say, api.example.com/rest/my-pdf.pdf, with firefox (which used PDF.js to render PDFs), the PDF opens and the Outline has the correct relative links.
I suspect that it has something to do with my app being on a different origin than the PDF serving REST API.
Each OutlineItem has an action dictionary with my relative links in there. The action dictionary has an ActionType (S) of Launch and a FileStream (F) value shown below.
I'm using the PDF.js viewer.html file to view PDFs.
This is done by creating an iframe like so:
<iframe src="/path/to/pdfjs/viewer.html?file=http://api.example.com/rest/my-pdf.pdf">
How can I get relative links working here?
P.S. I've scratched out only the actual filenames in red. I've left the path as is if it helps.
try this method
onclick=" window.open('../../assets/python/python.pdf'); return true;"
Hope it works for you.
The problem was that the links in the PDF outline were the "Launch ActionType".
PDF.js can't actually handle "Launch" types because it cannot launch external programs, seeing as it runs in a browser.
So, what PDF.js does is it pretends that the "Launch" type is a "GoToR ActionType" (Go To Remote).
This will work if the URL that the PDF is loaded from is the origin that PDF.js is also loaded from.
If this is not the case, like in my app (where PDF.js is loaded in an iframe inside an angular app), PDF.js is unable to resolve the URLs and so it leaves the links blank.
Section 8.5 of the PDF Reference contains information on Actions in PDFs.
PDF.js source file shows how different ActionTypes are processed.
Related
I'm new to Vue.js and would like to know if there's a way to view PDF files that are stored independently from the Vue project through said Vue application.
Here's what I need:
All PDF files are stored in a folder. I'd like to provide links to access them in the application that I get from the backend server. Upon clicking the link, the PDF should open in a new tab and the URL would simply be something like
file:///C:/Users/user/Downloads/campusmap.pdf
What I have tried so far:
<a :href="fileAddress">View file</a>
When I hover over the link on my browser, It shows the right URL but clicking on it does nothing.
If I right-click to open in a new tab, it says blocked (about:blank#blocked)
Using <router-link> shows
localhost:8080/C:/Users/user/Downloads/campusmap.pdf
when hovered over it.
Is there a way to be able to just view the PDF through a link the way I want? Please note that I can't store all the PDF files in the asset or public folders.
Thanks for your help!
You can't link to a file:// protocol url from a page sourced via the http(s):// protocol - this is a security measure built in to modern browsers. Your only option is to also serve up the local files behind a web server, or run the app locally behind a file:// url.
Good day,
I have a system that renders large amount of data through pdf ( 30mb + ). Now I want the user to view pdf first so he can either download it or just print it right away. as of the moment I am forcing the user to download the file since open( 'datauri here' ) wont work with larger files.. the problem with downloading is that files are multiplying and consumes space over time and also its not necessary for me to download all files that that they want to print right away.
I need a functionality that is similar to chrome's preview when using windows.print
can you please suggest any ideas or other things to do this?
I am currently using javascript library to create pdf (pdfmake). I am also using chrome as my main browser
You would have to make sure that the PDF is optimized for fast web view, and that your server is using the byteserving protocol for serving the file.
If that is the case, a useful PDF viewer (such as the web browser component provided by Acrobat/Reader) understands this protocol and requests (after the first page plus overhead of the PDF) only the data for the pages which are to be displayed.
A quick search did, however, not reveal whether the Chrome PDF viewing component is smart enough to understand the byteserving protocol.
Is it possible to use PDF.js without having the website online? I'm trying to do a simple offline website that reads pdf using pdf.js but it won't work without being online.
Anyone could help?
Yes absolutely you can use it offline. Download the latest version here.
Now extract the zip file and put it on a server(use xampp/wamp/lamp or any other localhost) because the worker is not enabled for file:// urls.
To show the pdf files traverse to web/viewer.html from the localhost and it should load its default pdf.
As to the question about how to show your pdf's use: viewer.html?file=relative/path/to/your/pdf
Say for example inside the web folder(the one in which viewer.html is there) of your pdf.js you create a directory say named pdfFiles and in it you add a pdf named say mypdf.pdf in it then to display it use: viewer.html?file=pdfFiles/mypdf.pdf and it will display it.
Look here for more details on how to dynamically assign PDF file paths to the viewer. If you have any other queries let me know. I have used pdf.js offline and it works wonderfully on almost all the browsers I know.
We have an "application" consisting of a large number of PDF files that link to each other.
Some of the PDF files have links that must be a web URL when running on a PC (or a Mac) but need to open a specific application when running on an iPad.
When not on the iPad, the links look like "http://10.85.1.102".
When on the iPad, they look like "netcam4://2" - which opens the NetCam4 application with camera 2 selected.
NOTE: this is already working but we have to create two versions of the PDF and it would be much better to have only one.
Is there a way using JavaScript (or ActionScript or whatever) for the PDF to determine in which OS it is being displayed and modify the link appropriately?
We don't care if this decision is made when loading the PDF or when the link is clicked.
By the way, so far we have found that GoodReader on the iPad is the only PDF viewer that will properly follow links - including those to the NetCam4 app.
Not really. PDF is generally run through a browser plugin and shouldn't have script running inside of it.
On the other hand, if you are serving these files up over http, you might be able to modify the contents of the PDF based on how they are compressed and what language you have on the server. PHP has PDFLib, for example, as well as Zend_PDF
I am new to extension programming but find making extensions in Chrome much more easier, but now that I am trying to port my test extensions to FF I have a few questions of how to do the same things I do in Chrome... now in FF.
For example:
In Chrome I have a page in my extensions directory called: domains.html
I link to that page from my popup and it has access to all my scripts etc but the "outside" world cannot directly access that.
Is there any such thing in FF so that I can show a page that is in my add on folder and has access to my add-on's JS and other files?
Thanks!
Take a look at some of the docs for opening URLs in new Tabs and manipulating the content of the tab:
https://developer.mozilla.org/en/Code_snippets/Tabbed_browser#Opening_a_URL_in_a_new_tab
Once you get comfortable with that, try opening an HTML page that lives in your add-on. First, you need to be aware of the 'content' package name you registered in your chrome.manifest file. Second, make sure your 'domains.html' file is in the content folder of your add-on. To open the web page in a new tab using a button or menu in Firefox use code like this:
gBrowser.addTab("chrome://mypackagename/content/domains.html");
You can should be able to load other JS and CSS files from your add-on into the web page using similar chrome:// URIs.