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.
Related
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!
I have built an HTML5 creative that will be served via the Google Doubleclick environment. It utilizes CSS3 transforms / 3d animations etc. that aren't supported by IE8/9/10.
I would like to use Modernizr and checked the documentation but couldn't find any info as to how to reference an independent Flash(swf) file as a fallback. I don't mean within the same html document - like when you would hide or display a div, depending on what the browser supports, but instead just having a separate Flash file served?
Ideally I would just upload the swf, along all other HTML5 files into the same directory within the Doubleclick Studio environment, reference the swf via relative path and then have it served to IE8/9/10.
Any suggestions are welcome.
Thanks!
check out the latest version of yepnope, which is what powered Modernizr.load
I've been playing around with different methods of displaying PDFs with the goal of finding a way of changing the grey background to white.
Here is a simple example using object tags (I get the same result with embed and iframe tags):
http://jsfiddle.net/5CALy/7/
HTML
<object data='https://dl.dropboxusercontent.com/u/58922976/test.pdf#view=FitH&scrollbar=0&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='84%'
height='110px'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='https://dl.dropboxusercontent.com/u/58922976/test.pdf'>click here to download the PDF file.</a></p>
</object>
Thanks!!
The OP Link actually now succeeds by default, here is the view of requesting no pdf where response is with image on white background
https://dl.dropboxusercontent.com/u/58922976/test.pdf
However it is normal to use a dark or light presentation background for images PowerPoints pdf other viewing
It is entirely up to the viewer
This browser only opens files in external mode
Or why not rainbow friendly?
But for the answer, ask users to do it themselves
For Firefox users there is a hack see How can I enable dark mode when viewing a pdf file in firefox https://stackoverflow.com/a/74564207/10802527
You can but cannot!
I mean,
Every browser (Chrome, Edge, Firefox, Safari, etc.) use their own PDF engine for displaying embedded PDF Files. You can use JavaScript or jQuery to detect the element which has the grey color and change it to white but you'll have to do this for every browser available in the market which is nearly impossible. Moreover, Web Browsers do not provide you an API for this.
The only better solution for this is to make your own PDF Viewer:
You can use this https://mozilla.github.io/pdf.js/ opensource package (By Mozilla) to get it done.
Welcome!
I am trying to make a site available offline in a web browser (specifically: Mobile Safari and/or Google Chrome), using a manifest file to load the offline content into the application cache.
This works just fine for images, html content and even font files. But not so for the videos I am trying to store. Mobile Safari is asking to increase storage to 50MB (just as it should) to accomodate the videos, but when going offline the videos are not displayed. All in all the cached content amounts to 37MB.
I am using JWPlayer to show the videos (setting the HTML5 player version as the preferred player), but I have also tried the HTML5 video tag on its own to no avail. The JWPlayer is returning the "Could not load video file" message, just as if the URL was invalid, when going offline (but they work fine online). The videos are H264 encoded in MP4 containers.
Is Mobile Safari on iPad at all capable of storing and retrieving MP4 (or other video) files? Is there any special trick that needs to be employed?
The problem is that Safari itself doesn't play the videos. They're played by the QuickTime plugin, which ignores the browser's caches. See this article.
I don't know of any workaround (other than PhoneGap etc.), but I would certainly love to have one!
You could not use the JWplayer in offline (at least with your current version). In their script (swf), it is fetching some external script from their server (include their logo) such as
http://p.jwpcdn.com/ ... /jwpsrv_frq.js
http://p.jwpcdn.com/...../jwpsrv.js
http://p.jwpcdn.com/...../logo.png (JwPlayer text)
I think it's all about their authorization and license checking. It would take you an amount to get away that logo for the paid version, they may ask your domain and they will add it into their list of the customer's valid website domain, and they also give you a script in the static link and you can add it into your cache file.
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