From all I read here at SO about this subject, I still haven't got enough information on:
When displaying a PDF in a browser view:
Why isn't <iframe> recommended?
Between <iframe> and <document>, which one is more secure (I don't want my PDFs to run any scripts on them, as I understand is enabled by default in the PDF document)?
Should I even consider <embed>? Why?
I just want to display a PDF on the view and nothing else. Please help me understand the best route.
Related
I am looking to embed a HTML5 file on a webpage and keep its source hidden.
Originally, I used an iframe, however, anyone could go directly into the webpage's source code and copy the iframe's src, and then paste it as a webaddress, and be taken directly to the non-embedded version. The embedded version is important to me for the site's layout.
Is there a way for me to disable access to the iframe's src file (which I seriously doubt as then the iframe presumably wouldn't work), or do you have a recommended alternative?
Thank you
The short answer is no. This is not possible.
Even if there was a possibility to prevent the browser from displaying the source code, it would still be possible to view the raw HTML code by just sending a raw HTTP request.
The only possibility is to just not sending the HTML-Code. But without HTML, no content is displayed. The browser can only display any content based on the HTML code.
I am trying to include a file (that's in html) inside of my HTML code. When i test it by opening it in my browser i can view the text fine, however when I upload it it does not appear. In chrome nothing appears and in IE it says that this content cannot be displayed.
<p><object src="resume-kylerschnaible.html"><embed src="resume-kylerschnaible.html" height="1300px"></embed></object></p>
http://jsfiddle.net/rd7yqo6m/
HTML isn't really the tool of choice for including files, there are countless security settings that are dependent upon browser and server configuration so these kind of include methods are generally seen as unreliable. I would suggest moving to php or asp.net if you need this kind of functionality. Failing that you might find that the iframe method is slightly more flexible.
<iframe src="resume-kylerschnaible.html"></iframe>
Is there a way to embed a PDF document on a webpage and at the same time disabling download? If possible I would prefer an html5/css3 solution. If no other way is possible I'd go with something else.
just add #toolbar=0 to the url of the pdf
Yes. Yes there is:
<div id="pdf">
<object width="100%" height="650" type="application/pdf" data="[ImageURLHere]#zoom=85&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content" style="pointer-events: none;">
<p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>
</div>
The pointer-events: none styling will also prevent users from right-clicking the PDF and downloading.
Actually, it is possible, you can adjust in your Google Drive option "Prevent viewers from downloading"
Then set PDF file public, so everyone can view PDF in Viewer, but none can download it.
I hope, that this will help for some.
Short answer is, it can't be done. The only way to view a PDF document without any kind of conversion is via the adobe PDF plugin, and that invariably allows the document to be saved. On top of that, it's trivial to use various tools to get the url of the PDF and download it from there.
If you want to avoid sending the actual PDF document, you could create a server-side script that converts the PDF document to a series of PNG or JPG images behind the scenes. You can do this with ghostscript for example.
But then, the actual content of the document still reaches the user, only in a different format. If this is not satisfactory for you, there are various techniques you can use to prevent most users from saving the images, but these are easily circumvented by a sufficiently technically savvy user.
You can use SlideShare, you can set a read password, prevent users from downloading in the settings, and even create a secret link so only users with it can open it. I am sure there are ways to circumvent this, but at least it's not immediate.
You can download the PDF.js and modify these 2 files: viewer.html and viewer.js, remove/modify the corresponding buttons/actions in order to disable downloading/printing, and you can furtherly disable right click menu items.
2017 Note: this feature has moved locations and the implementation has changed since it was originally answered.
Google Viewer offers a solution.
Use the iframe it generates for you.
I simply want to embed a PDF file in a web site.
The best solution I've found is Google Docs Viewer (http://docs.google.com/viewer), but it does not work for IE and obviously that is not going to work for me.
Anyone have a clean, easy solution to this?
Update: I should add that one of the benefits of embedding the PDF file the Google viewer way is that as the PDF file I link to gets updated (and it could without notice to me), my site would automatically be holding the same PDF file (provided the full pathname doesn't change, which it does not). For this reason converting the file to an image is not preferred while.
Well since you obviously don't want to force someone to download the bloated insecure pdf plugin, why not let them use the bloated insecure flash player?
http://flexpaper.devaldi.com/
But really it is just a simple as
<iframe src="path/to/pdf" width="500" height="700">
If you do stick with the pdf embedded option, Byron is right although embedded pdf files don't look so great on a webpage. Anyway, be sure to be strict about the coding. Hence:
<iframe src="path/to/pdf" width=500 height = 700>
Should be
<iframe src="path/to/pdf" width="500" height="700">
Small alteration.
Updated answer for HTML5:
<object data="filename.pdf" type="application/pdf">
Your browser does not support pdfs, <a href="filename.pdf">click here to
download the file.</a>
</object>
You can read about it here:
http://www.w3schools.com/tags/tag_object.asp
How long is the pdf file? Can't you convert it to a very long image and display that in a div with a scrollbar?
Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.
Online demo: http://mozilla.github.com/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.js
enter link description here
You can also use Google PDF viewer for this purpose. As far as I know it's not an official Google feature (am I wrong on this?), but it works for me very nicely and smoothly. You need to upload your PDF somewhere before and just use its URL:
<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
I just ftp mine, I do not use Google or any other s/w
you must have some need other than a PDF file sitting in a directory, what is it?
Also, why would you convert the image (and reduce PDF resolution and clarity) ?
Response to Comments
That is the ugliest thing I have seen since my last trip to Africa. You are not seriously thinking of posting that much information on a single page, are you. No one can read it, and I tried every magnification.
For that amount of info, you need to take an architectural approach.
Put a few controls on the front page, and feed the user a small amount of manageable info, about the area that they chose. Only.
Get the info from the source website/database and feed it into your website/database. Only needs to change when the source data changes. The whole linkage can be automated.
Then you just create nice clean pages, with a reasonable quantity of info, in a readable form, on each page.
This is a 20th Century Timetable. Note, not a 21st century timetable (look at Berlin or München for one of those). You really can't just scan an intense doc and provide it as an embedded PDF.
Note that you do not need the elaborate controls of CityRail. you can have just a few to allow select of the line and timetable.
then produce a page that is a simple form of the CityRail page.
or (the absolute minimum) one fully viewable, full size PDF per web page.
.
Like this simple viewable PDF. That example could be served up in one PDF for page 1 and 4 separate PDF pages for the rest; PDFs already have basic navigation, so I have used that feature and produced one 5-pager instead. Make sure you find and use the blue glass buttons and follow the navigation hints on the left top and bottom of each page.
Second to demonstrating the PDFs and navigation, look at the folder: the files are all PDFs.
Back to the original question. Now you can embed PDFs, but if you do, please do not mess with them. All the controls you have on the linked page are redundant; any browser facilitiates that even now, and will be doing so better in future. Eg. in simple viewable PDF, use your browser controls to increase/decrease magnification, move around the doc, etc.
Let's assume you finish your Google Maps page, that's the first or index page. Draw all the train lines in; when the user clicks on a train line, it takes them to either (a) a clean page produced from your db as per (1) which will look like (2), or (b) a single clean PDF in readable form as per (3). You could do the whole project just by manipulating files in directories.
A lot less work. No Google docs; no intermediate s/w to constrict you or work around. You can forget about IE and its multiple incarnations and strangulations; any other browser and its limitations. Concentrate on the data, and getting it out there in presentable form, not on the pitiful s/w and its fits and starts.
Cheers
From HTML5 :
<embed src="url" type="media-type" height="" width=""/>
For media-type refer, http://www.iana.org/assignments/media-types/media-types.xhtml
Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don't have to be uploaded to Google Docs, but they need to be available online.
Here's the code I used to embed the PDF file:
but you should replace the bold URL with your own address. As I mentioned, the document viewer works for PDF and PPT files.
http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html
I've edited this quite a bit and bolded my question at this point. I realize that PDF won't be fully controllable in the browser, but that's not my issue here. My problem is, well, below in bold.
<div>
<object
data="${pageContext.request.contextPath}/UB04.xml"
type="application/vnd.adobe.xdp+xml"
width="415" height="500"/>
</div>
The XML is actually an XDP file; it gives dynamic data and a URL for a static PDF, and combines them in Adobe Reader. This displays in the browser as desired if it's a PDF, but when put in as an XDP, it takes control of the window and opens itself fullscreen to display the PDF. Serving an all-in-one XDP (with the PDF embedded as base64) has the same issue.
Help me make the XDP behave the same as a PDF?
Alternatively, if I can use iText to glue together the XDP XML and the static PDF template, I can serve the PDF directly, which seems to work just fine. Just not sure how to create PDF that route, which is somewhat underwhelmingly documented online.
This behavior is dictated by the user agent (client), and that is how it should remain. Sorry.
One possible solution: use iText to join the data into the PDF, skipping XDP entirely.
What you are looking for is called Adobe Flashpaper:
http://www.adobe.com/products/flashpaper/examples/
Otherwise you cannot dictate how the user will view the PDF.