Is there is PDF viewer which I can embed into my HTML and which I can style as I want.
Actually I need to show some page of PDF file and customize my own UI (few buttons to turn over the pages and commenting).
And if there is any Ruby solution (It's not actually about programming, as I understand) it will be great.
I want to show pdf because:
User can copy text
Text is in original layout
So I don't want to show it as images or as a converted text. But I want to show page in simple design. Without Flex or whatever.
Yes, it is possible, with HTML5!
https://github.com/mozilla/pdf.js/
This is a pure-javascript library that uses HTML5 functions to open a PDF file and render it in the page.
I successfully test the library in following browsers:
IE9 and current version of Google Chrome, Firefox, Safari
IE8 and lower do not support pdf.js (lacking HTML5 functions)
Usage
Include the javascript libraries in the HTML file and add an -element ( is HTML5 element, so it will work only in HTML5 browsers):
<body>
<canvas id="the-canvas" style="border:1px solid black;"/>
</body>
Use a javascript call similar to this to render the PDF inside this canvas:
PDFJS.getDocument('your-file-goes-here.pdf').then(function(pdf) {
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
Other than a few browsers that have PDF viewers built in (Chrome comes to mind), PDF display is handled by external plugins, over which you have no control. You can't embed a PDF into a page, other than via iframes, and even then it's a completely external app from the browser, and not subject to css styling rules.
I don't see what Ruby has to do with this, as that'd be a server-side operation, and you're talking about client-side preparing. You could use Ruby (or most any other language) to extract the PDF's text, but you explicitly say you don't want to do that.
The closest thing to what you're asking would be Google Doc Viewer. It at least doesn't require anything more than JavaScript.
You could alternatively convert the PDF into HTML5 and display those pages using the PDF2HTML5 product by IDRSolutions. The output can be placed inside your own CMS and you can add your own GUI or you could use the existing options. You can have a look at potential output on the free converter and trial it if you like, it's a 100% Java library though which may or may not be a problem.
Note: For the sake of transparency it's worth mentioning I am currently a developer on said product so am very familiar with it's capabilities.
It's also worth noting pdf.js doesn't always perfectly match the actual pdf but it is very difficult to get an exact match and still preserve some of the key features you want. However it does do quite a good job most of the time.
The only thing that I know of that would help you do that is Adobe Flashpaper (there could be open source alternatives? Not sure).
http://www.adobe.com/products/flashpaper/
Examples here:
http://www.adobe.com/products/flashpaper/examples/
Considering compatibility, the best is to use a genuine adobe software for rendering pdf. Third party renderers work most of the times, but occasionally have trouble with some aspect of formatting. You can just download pdf reader from the adobe website, do a simple setting on the web browser, and let the browser open a pdf file using the genuine pdf renderer. At least on Firefox, you can do that.
If you want to progmatically display a pdf file without using a web browser, that means you need a GUI toolkit that works with a pdf renderer. All I know is poppler on ruby/gnome2. I once was able to use it with ruby 1.8, but since I have moved to ruby 1.9, I have not tried it. Other standard GUI toolkits for ruby are wxruby, fxruby, ruby/qt, shoes etc., but I am not sure which of them has a pdf renderer.
Sorry if not helpful.
No need for external libraries. Much browsers support already multiple ways to vies the pdfs. Like object, iframe, embed. You can use an object, with an iframe fallback, which in return fallbacks on a download:
<object data="/pdf/sample-3pp.pdf#page=2" type="application/pdf" height="100%" width="100%">
<iframe src="/pdf/sample-3pp.pdf#page=2" style="border: none;" height="100%" width="100%">
This browser does not support PDFs. Please download the PDF to view it: Download PDF
</iframe>
</object>
Source
Related
in this video they recommend using an iframe that calls the GView (google viewer). Is it of any use? Can't you simply reference the pdf in the iframe? what's the benefit of adding the GView?
https://www.youtube.com/watch?v=visxQbQIySg
Most of browsers are expected to manipulate standard web extension such HTML,CSS,JS etc. however they may optionaly support non-web extension (as well as PDF,SWF etc.).
If you push a PDF directly to the browser and the browser does not support PDF extension the file will be downloaded and no defference if you push it inisde an iframe. When you use GView or other Document Viewers they convert the target file to HTML tags or other supported formats for all browsers (like canvas) and so you make sure that the file will be displayed on screen rather than being downloaded. Also they have extra tools like zooming, paging etc. that improves the user experience.
Can anyone suggest me how to create a PDF thumbnail which shows a miniature preview of the pdf file in html5. Something similar to the behaviour seen in Gmail while uploading pdf files.
Currently am using embed element, but it gives me unnecessary scrolls and not able to zoom in the file,which works across all browsers. If I set #zoom it works only in chrome.
This can be achieved using https://mozilla.github.io/pdf.js/
If the thumbnails are not compatible in browsers like IE, including compatibility.js from the same library would solve the problem.
We have to create a canvas and use the library utility to get the thumbnail in the canvas.
I have the code below which is a perfect solution to what I need, which would essentially be embedding any of JPG, GIF, PNG or PDF files in my webpages. It works perfectly in PC browsers, but a critical requirement for the pages is to have them compatible in mobile browsers due to its target users.
<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>
Although image files work fine, PDF files are opened separately in the mobile browser and not embedded inline in the web page. What would be an alternative solution or implementation to this?
You can use PDFJs library. Using just JS you can render pdf files.
Please , check here : https://mozilla.github.io/pdf.js/
One simple option is that the the object element provides a fallback, so you can do:
<object data='some.pdf'>
<p>Oops! Your browser doesn't support PDFs!</p>
<p>Download Instead</p>
</object>
Then, when the mobile browser can't get the item, it'll just show this and you'll be all set, kinda.
Here is my solution to this problem.
<object data="mypdf.pdf" type="application/pdf" frameborder="0" width="100%" height="600px" style="padding: 20px;">
<embed src="https://drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing" width="100%" height="600px"/>
</object>
Explanation:
<object> tag has a feature that when it is unable to load item, it loads the content inside itself i.e tag.
Since object tag cannot load on mobile view, therefore on mobile devices, embed tag will become active.
Q) Why can't we directly use tag for all cases?
You can actually, but since the embed tag is loading file from
drive, it does not gives any user controls for the pdf that we see
with object tag (zoom, page no., etc.). So our code will give the user pdf view controls atleast in the desktop mode instead of not giving any controls at all.
Q) Direct drive links don't work....so why this solution?
In the above google drive URL, view is changed to preview.
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/view?usp=sharing
becomes,
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing
So, we can make direct drive links work with this little modification
Google Docs viewer offers a feature, that lets you embed PDF files and PowerPoint presentations on a web page.
<iframe src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:100%; height:650px;" frameborder="0"></iframe>
replace the URL(http://infolab.stanford.edu/pub/papers/google.pdf) with your own address, It's worked for me but it takes more time to load on
src:http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html?utm_source=pocket_mylist
The only way I have found, which allows you to embed pdf is using Google drive, then select the menu button once you have opened your file, and select get embed code, you can only use a Google drive or Google docs reference. And you must also turn public sharing on otherwise others won't be able to view it without permission.
Using Adobe PDF Embed API solved my problem.
Adobe PDF Embed API
I ran into the same issue. As a new developer, I wasn't aware that mobile browsers have issues embedding PDF files in iframes. I am now... lol
I racked my resources trying to get this to work when it dawned on me that mobile browsers do not have an issue displaying PNG files in a new window. So, in my infinite wisdom, I opened the PDF files in Gimp 2.0 then exported them as PNG files. And then I created buttons for the user to click and now it opens the graphic instead of trying to embed the PDF.
Looks like this:
<input class="AG" id="UnityBtn" type="button" value="Unity" onclick="location.href='../Meeting_Info/Unity.png'" />
I don't know if this is possible for you, but it worked beautifully for me.
Use an object tag with a iframe tag inside your object tags.
The object data can be a pdf or png file by changing the type and can use any link you want stored wherever, however the I frame is the one which will be loaded for mobiles which has to be a link from Google drive or Google docs you also need to allow the files to be shared public otherwise others won't be able to view them.
I would share the code but this site has some rubbish rules about code and won't let me share them so I'll leave you to Google how object and iframe tags work by viewing better sites that actually wants the help from developers.
Have fun guys!
How can I display a pdf within a web browser on an .html page?
I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.
<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
instead of using iframe and depending on the third party`think about using flexpaper, or pdf.js.
I used PDF.js, it works fine for me. Here is the demo.
preffered using the object tag
<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'
type='application/pdf'
width='100%'
height='700px'>
note that you can change the width and height to any value you please visit
http://www.w3schools.com/tags/tag_object.asp
The simplest way is to create an iframe and set the source to the URL of the PDF.
(ducks mad HTML designers) Done it myself, works fine, cross browser (crawls into bunker).
The browser's plugin controls those settings, so you can't force it. However, you can do a simple <a href="whatver.pdf"> instead of <a href="whatever.pdf" target="_blank">.
As long as you host the PDF the target attribute is the way to go. In other words, for relative files, using the target attribute with _blank value will work just fine.
<e>
<a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>
For absolute paths engines will go to the Unified Resource Locator and open it their. So, suppress the target attribute.
<e>
<a alt="StackExchange Handbook" title="StackExchange Handbook"
href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>
Browsers will make a rely good job in both cases.
I did a careful evaluation of providers on this space:
free solutions
iframe: Just use an iframe, however, this is not what most people search here.
Pdf.js is the open source solution without external dependencies
Adobe offers a 'free' PDF Embed API
Commercial Providers
Pdf.js Express is commercialized extension to Pdf.js
PSPDFKit - Provder from Austria with rather good business support
Foxit - Chinese company providing a PDF web solton as well.enter link description here
PDFTron - US-based competitor to PSDPDFkit - more costly but also mot advanced.
Hope this helps. I might publish more detailed information in a blogpost, if this is helping people (let me know in comments).
You can also embed using JavaScript through a third-party solution like PDFObject.
You can use this code:
<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
Or use Google Docs embeddable PDF viewer:
<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
If you don't want to use some third party, you can use the <embed> tag with the source of the file in the src attribute. This uses the native browser PDF viewer, and offers more browser support than the object tag.
<embed src="your_pdf_src" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
Live example:
<embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
Loading the PDF inside a snippet won't work, since the frame into which the plugin is loading is sandboxed.
Tested in Chrome and Firefox. See it in action.
Update - Adobe PDF Embed API
Adobe released their Adobe PDF Embed API which is completely free. Since they created the PDF format itself, their API is probably the best for this.
It delivers the highest quality PDF rendering available.
You can fully customize user experience and choose how to display a PDF.
You will also have analytics on PDF usage so you can understand how users interact with PDFs, including time spent on a page and searches.
All you have to do is create an api_key and use it in the code snippet.
Displaying PDF as buffer
Here is the example of the code snippet that you can just add to your HTML and take advantage of their API for displaying PDF if you have the buffer (local file for example). You would have to add { promise: <FILE_PROMISE> } config.
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
Displaying PDF by file_url
Here is the example of the code snippet that you can just add to your HTML and take advantage of their API for displaying PDF by file_url. You would have to add { location: { url: "url_of_the_pdf" } } config.
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { location: { url: "url_of_the_pdf" } },
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
The simple solution is to put it in an iframe and hope that the user has a plug-in that supports it.
(I don't, the Acrobat plugin has been such a resource hog and source of instability that I make a point to remove it from any browser that it touches).
The complicated, but relative popular solution is to display it in a flash applet.
You can also have this simple GoogleDoc approach.
<a style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>
This would create a new page for you to view the doc without distorting your flow.
By far the simplest method to avoid cross site and or server load Issues is include the cover icons in the page and provide a DownLink. It is minimal demand rendering a page of several covers / icons. The second best method is show a single iFrame with your adjoining commentary.
However many modern browser users a weary of exploits may have turned PDF display OFF and blocked any attempts to pop-up or window.open inline runnable embedment objects like SWF or PDF.
Note the snippet is a small icon but you can use larger front cover like Amazon Books (within the browser datauri limits)
<center>
<h4>Click on the below icon to download pdf file :<br>If blocked by Security Refresh to show Cover and Right Click to Download</h5>
<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAABBVBMVEUAAABTwd7O7PUAAAC35PEAAAAAAABTwd5Twd5Swd5Twd5Swd5RwN7A6POw4fBUwd5Xwt9bxOCS1+pTwd5Vwt9Wwt9dxeCC0ecAAABXw99bxOBcxOAAAABUwd4AAABWwt8AAABkx+Juy+MAAABUwd5Uwd5Vwt9Wwt9Yw99gxuFryeJoyeN/0OeZ2utXwt9Wwt9Wwt9bxOBWwt9Yw99gxuEAAABNv91Uwd5Uwd5Vwd5Yw98AAABaw+BbxOBYxOAAAAByzeVVwt9Vwt9Zw+BfxeBKvt1oyeIAAAAAAABVwt9Yw98AAABTwd5bxOBaxOBpyOKC0eYAAACN1emD0OZUwd5RwN4AAADkCLpdAAAAVHRSTlMA/QK/BICP+fby7fv4CgbjjlAK58KhPg7PgF5JQMevnmAiFxDf0rWxfDkwKBIIrqmUiIZ3WlDz6NvLpZ9oQzQwHNe/dGI6LO/fuphwz2xWNiEgFybn7OvoAAADuUlEQVRIx91U15baMBCVbNwNtjHdgOm9l9A7IQu72bQh//8pkcCGTXE2D8lLxufYM5LuaO7oWujfGPP76WB3MrEt3315tVMstOrI2wIlkCQQJlUnzoYxSCYeHbwhPTAY5J9rUFrTBHFF3eUYdJCKnohmQb58GzouHFCjhbe1SxzGUS9IHU+dAq2xtgsJleY1NCDiBXkLcdfNjkHcu72qnefekL7rNp7AvKX+eO6/vkvzKFQK8tKJvpx3XpDl+eR4XdxjDCXkHFAVEl6Qz+r26jxDizAfiPaVzQCWXhBfYURe/pqlgd05nXoj3F9+9tHj8mwyM4V2aCwBwPkNNfUMoGqhckHy/RrQmG8FULRj7widz35qDUsdxadjFaAYX/8MOPRMeOrKhENuPGm421bUBPINyN6CHF4w35eUUHErwqCwGWVsqXbXqWauUVfKEYGKwuklo6aubA2axIJERLDp6ffKeoQwmAuVqFmmSQ9lZZK7QyoQvhL0ScWUVEfowwgAcIUMlM24EnEqEVNBF7GWS25LpgAdBjEhoKb5CViBTcCZTOCb1t7Drfq6YhLuWQUutiAjNujINTHleoO7uKuKtCbbqhcErpJyymDfjlo9um7OTLnESgBhUlj7AtkQ1SwUKDgMmDgeINcSkIpemypsS0KEJKFkZIv0clIY4Ksogx2wfXdx6dKTQXMZ8FwVafeC/baepTTxrlmkig5EtvjobOdw0KC4jzKlQgDFBeM2HBU3QbTDH4LGE8iJH260nC6CdhLDZNm4eDvmOCbwBYRMUKdZ9JP5jbYIWN20QlC2IrXah6q1E+TWRsQApUTQQ/1T3AlJGAOV//l86TOWQ3oKPMRPRTgir+xykYLufr8faOJ8mQ3So/a8LtdqyWkGpnTmWL8SjoDhBamdO+5/gnXfgqrw9Uup4rpdbGujrNuYN/E/uPoCKZAj6E8g3VuNJhb0wOu3ZV1pO55hykbZ/e+QBZZnkzey75I1LI6XqNFVis+XZpRxA3nZe+j5/XVdxu0cXTqQcHvhD1hCyhNB9S3JitB6ZpxKifBkTZ3UkbcxCXvarzMv1LoPlypR9FeMjT1wL8JPNGBZlGSdiP0FJJlJr2azfJJLr4ZsOvYuQ9Mkk7NP3CxDIjbJoXSe5zN3CFmVf+BZjuTl3q3yHH9JE+M4tOJZEpHZFZuJcV/vkNinB/QuT76Z9NCFxNDjA8fzHHnyLJqlh4/8d4UhLjmccXn+kaeFDdkkHUPpTIZ/zAxZsjiZRvkZN0T/l30D1xyHzxgRNCEAAAAASUVORK5CYII=" alt="react">
<br><b> Download Dummy.pdf</b></a>
I recently needed to provide a more mobile-friendly, responsive version of a .pdf document, because narrow phone screens required scrolling right and left a lot. To allow just vertical scrolling and avoid horizontal scrolling, the following steps worked for me:
Open the .pdf in Chrome browser
Click Open with Google Docs
Click File > Download > Web Page
Click on the downloaded document to unzip it
Click on the unzipped HTML document to open it in Chrome browser
Press fn F12 to open Chrome Dev Tools
Paste copy(document.documentElement.outerHTML.replace(/padding:72pt 72pt 72pt 72pt;/, '').replace(/margin-right:.*?pt/g, '')) into the Console, and press Enter to copy the tweaked document to the clipboard
Open a text editor (e.g., Notepad), or in my case VSCode, paste, and save with a .html extension.
The result looked good and was usable in both desktop and mobile environments.
[this is a very old answer, from when other options mentioned now didn't exist]
Back in 2011, we used to render the PDF file pages as PNG files on the server using JPedal (a java library). That, combined with some javascript, gave us high control over visualization and navigation.
Displaying content saved in PDF/DOC/DOCX file format is ideal for displaying the pdf/doc/docx file on your web page
Have you tried using a simple img tag?
<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">
I'm building a WSS site which has to show SVG files stored on WSS.
I'm trying to use <object> tag to show it and it doesn't show, however, if I use <embed> it works ok. Im'using IE8 and IE7
I've been reading and everyone tells IE prefers <Object> over <embed>, but in WSS it doesn't work this way.
To display the file I'm using a web content editor webpart with this code:
<object type="image/svg+xml" data="/samples/sample.svg"
name="owMain" width="400" height="150">
</object>
Any clue??
I've found that it's not actually necessary to embed SVG as an object.
If you use the SVGWeb JavaScript library, you can actually put your SVG into a normal Content Editor Web Part via the Source Editor, and manipulate the SVG elements via JavaScript.
The library can also work with a referenced SVG file as an object, but I haven't tried that option.
The library is hosted on code.google.com
You cannot add object tags to the html content of a page in WSS. The issue is that the object tag can be used in lots of very bad ways, so it is stripped out by the underlying engine.
You have found that the content editor webpart does not suffer from the same limitations.
The first step, if you haven't already, is to confirm that the HTML content in the response is as you expect (e.g. view source). If it isn't then you've found your issue. If it is, the next step might be to use a debugging proxy like Fiddler to confirm that all of the related requests are being made and handled as you expect. If they're not then you've found your issue (e.g. security). If they are then by the process of elimination you can safely conclude that either the markup or the browser is lacking.
Is it me or IE does not support SVG? Well, it kinda does but it is tricky and it's to draw, not to show svg files. ... If you open with FF can you see what you are expecting?
added
I made an svg draw in IE ... it's not the same, I know, but it's something that you can read and test: stackoverflow.com/questions/536676
I managed to do this on IE7/8 with the following Html:
<embed width="600" height="450" id="objMapView" src="http://XXXXXXXX/file.svgz"
type="image/svg+xml" name="objMapView" border="1"/>
It works Ok bur requires adobe's SVG Plugin