Last active
November 20, 2023 16:16
-
-
Save documentprocessing/5b03b5e40a8480a597e37449b406a6d4 to your computer and use it in GitHub Desktop.
Embed PDFs in webpages using JavaScript with the PDFObject library. Check https://products.documentprocessing.com/viewer/javascript/pdfobject/ for more details.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Set the character set and viewport --> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| <!-- Define style for the example container --> | |
| #example1 { | |
| height: 30rem; | |
| border: 1rem solid rgba(0, 0, 0, .1); | |
| } | |
| </style> | |
| <!-- Set the title of the document --> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <!-- Create a div with the ID "example1" to embed the PDF --> | |
| <div id="example1"></div> | |
| <!-- Include the PDFObject library --> | |
| <script src="./node_modules/pdfobject/pdfobject.js"></script> | |
| <script> | |
| // Set options for PDFObject, including a fallback link in case PDF embedding is not supported | |
| var options = { | |
| fallbackLink: "<p>This is a <a href='https://example.com/'>fallback link</a></p>" | |
| }; | |
| // Embed the PDF (1.pdf) into the div with ID "example1" using PDFObject and the specified options | |
| PDFObject.embed("1.pdf", "#example1", options); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Set character set and viewport for better compatibility --> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- Include the PDF.js viewer scripts and styles --> | |
| <link rel="stylesheet" href="http://localhost:8888/web/viewer.css"> | |
| <script src="http://localhost:8888/web/viewer.js"></script> | |
| <!-- Document title --> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <!-- Include the PDFObject library --> | |
| <script src="./node_modules/pdfobject/pdfobject.js"></script> | |
| <script> | |
| // Configuration options for PDFObject | |
| const options = { | |
| // Force the use of PDF.js | |
| forcePDFJS: true, | |
| // URL of PDF.js viewer HTML file | |
| PDFJS_URL: "http://localhost:8888/web/viewer.html", | |
| }; | |
| // Embed the PDF using PDFObject with the specified options | |
| PDFObject.embed("1.pdf", options); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Set character set and viewport for better compatibility --> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| <!-- Add some basic styling for the example container --> | |
| #example1 { | |
| height: 30rem; | |
| border: 1rem solid rgba(0, 0, 0, .1); | |
| } | |
| </style> | |
| <!-- Set the title of the HTML document --> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <!-- Create a container with the id 'example1' to embed the PDF --> | |
| <div id="example1"></div> | |
| <!-- Include the PDFObject library --> | |
| <script src="./node_modules/pdfobject/pdfobject.js"></script> | |
| <script> | |
| // Embed the PDF "1.pdf" in the div with id "example1" and provide additional parameters like pdfOpenParams for customization | |
| PDFObject.embed("1.pdf", "#example1", { pdfOpenParams: { page: 3 } }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Set the character set and viewport --> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| <!-- Define style for the example container --> | |
| #example1 { | |
| height: 30rem; | |
| border: 1rem solid rgba(0, 0, 0, .1); | |
| } | |
| </style> | |
| <!-- Set the title of the webpage --> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <!-- Container for embedding the PDF --> | |
| <div id="example1"></div> | |
| <!-- Include the PDFObject library --> | |
| <script src="./node_modules/pdfobject/pdfobject.js"></script> | |
| <script> | |
| // Check if the browser supports PDF embedding | |
| if (PDFObject.supportsPDFs) { | |
| // If supported, embed the PDF in the specified container | |
| PDFObject.embed("1.pdf", "#example1"); | |
| } else { | |
| // If not supported, display a fallback message | |
| document.getElementById("example1").innerText = "Hello"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment