Embedding a PDF file in an HTML webpage allows users to view or download the file directly from the browser. Here are a few methods to embed a PDF file in your HTML:
1. Using the <iframe> Tag
The <iframe> tag is one of the easiest ways to embed a PDF file.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Embed PDF</title>
</head>
<body>
<h1>PDF Viewer</h1>
<iframe src="yourfile.pdf" width="600" height="500" style="border: none;"></iframe>
</body>
</html>
src: Specifies the location of the PDF file.widthandheight: Set the dimensions of the PDF viewer.
2. Using the <embed> Tag
The <embed> tag is another simple method for embedding PDFs.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Embed PDF</title>
</head>
<body>
<h1>PDF Viewer</h1>
<embed src="yourfile.pdf" width="600" height="500" type="application/pdf">
</body>
</html>
type="application/pdf": Ensures the browser treats the file as a PDF.
3. Using the <object> Tag
The <object> tag provides more flexibility for embedding PDFs and allows fallback content if the file fails to load.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Embed PDF</title>
</head>
<body>
<h1>PDF Viewer</h1>
<object data="yourfile.pdf" type="application/pdf" width="600" height="500">
<p>Your browser does not support PDFs. <a href="yourfile.pdf">Download the PDF</a>.</p>
</object>
</body>
</html>
data: Specifies the location of the PDF file.- The fallback content (inside
<object>) provides an alternative link for unsupported browsers.
4. Using a Link for Download or Open
If embedding isn’t necessary, you can provide a direct link to the PDF file.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Download PDF</title>
</head>
<body>
<h1>Download or View PDF</h1>
<a href="yourfile.pdf" target="_blank">Open PDF</a>
</body>
</html>
target="_blank": Opens the PDF in a new tab.
5. Using JavaScript PDF Viewers (Advanced)
For a more interactive experience, you can use a JavaScript library like PDF.js (developed by Mozilla).
Example:
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Viewer</title>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
<h1>PDF Viewer</h1>
<canvas id="pdf-render"></canvas>
<script>
const url = 'yourfile.pdf';
const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.getDocument(url).promise.then(pdfDoc => {
pdfDoc.getPage(1).then(page => {
const scale = 1.5;
const viewport = page.getViewport({ scale });
const canvas = document.getElementById('pdf-render');
const context = canvas.getContext('2d');
canvas.width = viewport.width;
canvas.height = viewport.height;
const renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
</script>
</body>
</html>
Things to Note:
- Replace
yourfile.pdfwith the actual path to your PDF file. - Ensure the PDF file is accessible from the server where your HTML is hosted.
- Use HTTPS to avoid browser warnings for insecure content.
Conclusion
Depending on your needs, you can choose a simple method like <iframe> or <embed> for basic embedding or use a more advanced solution like PDF.js for enhanced interactivity.