Embed Pdf Viewer In Html

Posted on by admin

Active11 months ago

I have used the tag to embed a pdf file.

Google Docs is able to convert virtually any presentation.ppt file and other documents like Word or Excel spreadsheet into Google Docs and you can embed the PowerPoint viewer in any HTML page. Embeddable Google Documents viewer is a free tool that you can use.

This works fine in Chrome, IE8+, Firefox etc, but for some reason, when some people are viewing it in IE8, the files are downloading instead of embedding. I know this browser is outdated but it is the standard browser within my office and as such, the website has to be designed for this.

Does anyone have any ideas on why this is happening, how I can fix it or else put an error message instead of letting the files download?

Luke Girvin
11.1k8 gold badges53 silver badges75 bronze badges
user2931470user2931470

3 Answers

It's downloaded probably because there is not Adobe Reader plug-in installed. In this case IE (it doesn't matter which version) doesn't know how to render it and it'll simply download file (Chrome, for example, has its own embedded PDF renderer).

That said. <iframe> is not best way to display a PDF (do not forget compatibility with mobile browsers, for example Safari). Some browsers will always open that file inside an external application (or in another browser window). Best and most compatible way I found is a little bit tricky but works on all browsers I tried (even pretty outdated):

Keep your <iframe> but do not display a PDF inside it, it'll be filled with an HTML page that consists of an <object> tag. Create an HTML wrapping page for your PDF, it should look like this:

Webpage

Of course you still need the appropriate plug-in installed in the browser. Also take a look to this post if you need to support Safari on mobile devices.

1st. Why nesting <embed> inside <object>? You'll find answer here on SO. Instead of nested <embed> tag you may (should!) provide a custom message for your users (or a built-in viewer, see next paragraph). Nowadays <object> can be used without worries and <embed> is useless.

2nd. Why an HTML page? So you can provide a fallback if PDF viewer isn't supported. Internal viewer, plain HTML error messages/options and so on...

It's tricky to check PDF support so you may provide an alternate viewer for your customers, take a look to PDF.JS project, it's pretty good but rendering quality - for desktop browsers - isn't as good as a native PDF renderer (I didn't see any difference in mobile browsers because of screen size, I suppose).

Community♦

Pdf Viewer Download

Adriano RepettiPdfAdriano Repetti
52.6k15 gold badges111 silver badges172 bronze badges

If the browser has a pdf plugin installed it executes the object, if not it uses Google's PDF Viewer to display it as plain HTML:

Embed Pdf Viewer In Html Free

mguttmgutt

Pdf Viewer Windows 10

3,4791 gold badge34 silver badges52 bronze badges
Muddasir AbbasMuddasir Abbas

Not the answer you're looking for? Browse other questions tagged htmlpdfiframeinternet-explorer-8 or ask your own question.

I cannot use viewer.html for a binary PDF

@capegreg there is no such thing as a 'binary PDF'. If you want to display base64 encoded string you need to decode it yourself, since only few browsers can decode it. The base64 encoding and decoding is very inefficient operation (for servers and client) -- we don't believe supporting it will be beneficial for PDF.js.

iframe.src = 'data:application/pdf;base64,' + pdfbytesData +

Keep in mind that there is a limit in some browsers on length of URL, and this out of control of PDF.js

Pdf Viewer Online

Thanks yurydelendik. I am decoding it. I just need to know how to implement the viewer.html. My binary pdf is currently rendered in a Canvas element, but I guess that's not supported with viewer.html. I suspect that all I need to do is assign the pdfData to the iframe src, as shown in your iframe.src example.

Pdf On Webpage

// data is already decoded
var pdfData = data;
// get my iframe document and set the src
iframe.src = 'data:application/pdf;base64,' + pdfData;

Google Docs Viewer Iframe To Embed Pdf In Html

// don't need part this anymore
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.worker.min.js';
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
var scale = 0.9;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions
var canvas = document.getElementById('trimCanvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});