I wonder if you can view the PDF in an HTML page. I do not want a link to open the PDF
Or do I have to switch from PDF to an image?
View PDF in HTML page
9
asked by anonymous 19.01.2015 / 16:28
3 answers
8
Put a iframe with the PDF file link:
<iframe src="http://devsa.info/teste.pdf"width="600" height="780" style="border: none;"></iframe>
UPDATE (2 iframes):
<table cellpadding="0" cellspacing="0" align="center" width="100%" height="100%">
<tr>
<td><iframe src="http://devsa.info/teste.pdf"width="600" height="780" style="border: none;"></iframe></td>
<td><iframe src="http://devsa.info/teste.pdf"width="600" height="780" style="border: none;"></iframe></td>
</tr>
19.01.2015 / 18:54
11
The use of <iframe> brings some incompatibilities, especially if the browser does not have the plugin, sometimes the file downloads the PDF instead of opening or showing an error message. Otherwise the use of <table> to organize the layout is not good, prefer grids or bootstrap grids.
You can use object:
<object data="meuarquivo.pdf" type="application/pdf">
<p>Seu navegador não tem um plugin pra PDF</p>
</object>
Or use PDF.js (Github) that you will not need plugins.
Worker files (required) to run: link
<!DOCTYPE html>
<html>
<head>
<title>PDF canvas</title>
<script src="../../node_modules/requirejs/require.js"></script>
<script>
(function () {
var meuPdf = "meuarquivo.pdf";
// In production, the bundled pdf.js shall be used instead of RequireJS.
require.config({paths: {'pdfjs': '../../src'}});
require(['pdfjs/display/api'], function (api) {
// In production, change this to point to the built 'pdf.worker.js' file.
PDFJS.workerSrc = '../../src/worker_loader.js';
// Fetch the PDF document from the URL using promises.
api.getDocument(meuPdf).then(function (pdf) {
// Fetch the page.
pdf.getPage(1).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions.
var canvas = document.getElementById('the-canvas');
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
};
page.render(renderContext);
});
});
});
})();
</script>
</head>
<body>
<canvas id="the-canvas"></canvas>
</body>
</html>
29.02.2016 / 16:12
0
Using iframe can bring some unwanted results such as just that fragment appearing in the search results of search engines. In the method below, the PDF is embedded directly into the document. This method has worked well for all browsers:
<embed src="http://www.meudominio.com.br//meu_documento.pdf"width="760" height="500" type='application/pdf'>Example: link
29.10.2016 / 07:52