PDF in HTML

Embed PDF in HTML

For those who want a professional and beautifully designed way to display documents onto their webpages, being able to embed pdf html code onto their website would give them the ability to display interactive documents for users to use. Many companies and individiuals can benefit from being able to embed a pdf inside the html code for their websites, instead of traditional document display. Embedding pdf in the html code allows a more convenient way to display pdf documents which may not have been compatible with browsers before.

It is surely a put-off if you redirect your viewers to a third party application in order to display your pdf documents (such as drive links) and the user is now away from your webpage. The proability of his return is surely reduced if this method is used.

So let’s learn how to efficiently embed pdf documents into your webpage and display them and there.

For the tutorial, I’ll use an online document, which is my resume.
In case you wish to use a local file, replace the link with the name of the file, with the appropriate path, of course.

Method 1: Using Object Tag

The first method to embed pdf in html is by making use of the object tag in html. The object defines the object that is to be embedded in the page, which in this case is the pdf file to be displayed on the web page, of course.The object tag isn’t just used to embed a pdf html code into a webpage; it can also be used to embed ActiveX, Flash, video, audio, and Java applets. The object embed a pdf html tag can be used to attach interactive documents.

Lets see how the code looks for the same:

• As visible above, the data attribute of the object tag is used to specify the name/address of the file that is to be displayed.
• Lets create an HTML file named index.html to test this out:

• Now open the index.html file in your browser and the pdf file should be visible in it.
• We observe that the size of the pdf file which we embedded is not appropriate, thefore we have style it accordingly.
• In this example, I will demonstrate how to display the pdf file in all the space available, by using -webkit-fill-available as the height and width of the object.
• The code for the object will be as follows for that:

• Also, it is always better to specify the file format of the data while using the object tag to eliminate possibilty of inaccurate browser compatibility.

Method 2: Using iframe

The second method to embed a pdf in an HTML web page is the iframe tag.
The iframe tag is widely used by web developers to embed files of various formats and even other webpages inside the concerned web page. Most browsers are compatible with this embed a pdf html code tag which is why this tag is widely used. This tag used to embed a pdf html code can also be used if a browser does not support PDF documents or the object tag.

• The method to use the iframe tag to display pdf in web pages should be clear from this code snippet:

• As visible in the above snippet, the method to use the iframe and object tags is quite similar.
• The data tag is replaced by src tag, the abbreviation of source which, although self-explanatory, specifies the source of the file to be embedded.
• The HTML file should have the following contents:

• Open the file in your browser and it should look like this:
• If you notice carefully, while using this method, a line with a shadow appears on the border of the embedded file. The file is rendered in a container, more accurately a frame.

Method 3: Using embed tag

The embed tag isn’t used as often as the previous tags to embed a pdf html code into a website because when it is used to embed a pdf html code into a website if the browser does not support PDF files, the person using the website will see a blank. embed is used to embed a pdf html code when there is no need for a mechanism to be supplied for fallback content in the embed a pdf html code.

Similar to the previous methods, the syntax can be understood by this example:

Should look like this:

Method 4: Using PDF.js

External libraries can also be used to embed pdf files into html web pages. These are generally used for custom features.
Let us try it out with PDF.js .

PDF.js is a JavaScript library written by Mozilla. Since it implements PDF rendering in vanilla JavaScript, it has cross-browser compatibility and does not require additional plugins to be installed.

With PDF.js, PDFs are downloaded via AJAX and rendered onto a canvas element using native drawing commands. To improve performance, a lot of the processing work happens in a web worker.

To get started, all you need to do is to download a recent copy of PDF.js and you’re good to go.

(For this tutorial, go for the stable version)

Once you have downloaded the file, extract it. You will see two folders, namely
web and build.

The HTML file needs to point to the pdf.js source code and to our custom application code (simple.js). We also create a ‘canvas’ element, which we want the first page of the PDF to be rendered into:

       Now all that’s missing is our simple.js code that leverages the PDF.js API to render the first page. 
Here, I am assuming that you need to embed a pdf file which is named test.pdf

var loadingTask = PDFJS.getDocument("/test.pdf"); loadingTask.promise.then( function(pdf) < // Load information from the first page. pdf.getPage(1).then(function(page) < var scale = 1; var viewport = page.getViewport(scale); // Apply page dimensions to the element. var canvas = document.getElementById("pdf"); var context = canvas.getContext("2d"); canvas.height = viewport.height; canvas.width = viewport.width; // Render the page into the element. var renderContext = < canvasContext: context, viewport: viewport >; page.render(renderContext).then(function() < console.log("Page rendered!"); >); >); >, function(reason) < console.error(reason); >); 

We can now work on the integration. To do this, we create a simple HTML file that will include the viewer via an iframe. This allows us to embed the viewer into an existing webpage very easily. The viewer is configured via URL parameters, a list of which can be found here. For our example, we will only configure the source PDF file. For more advanced features (like saving the PDF document to your web server again), you can simply start modifying the viewer.html file provided by PDF.js:

These are the four methods that I use for embedding a pdf into my html webpages.
Hope you learnt something of value from this article!

Источник

How to Embed PDF in HTML

There are several ways to include a PDF file in your HTML document:

Ways of putting a PDF document in HTML

Example of embedding a PDF file in an HTML document:

html> html> head> title>Title of the document title> head> body> h1>PDF Example h1> p>Open a PDF file a href="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">example a>. p> body> html>

Result

How to embed PDF viewer in HTML

You could try embedding the PDF file in an ‘object’ tag. Here is an example of how to do this:

Example of adding a PDF file to the HTML by using the ‘object’ tag:

html> html> head> title>PDF Example by Object Tag title> head> body> h1>PDF Example by Object Tag h1> object data="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf" type="application/pdf" width="100%" height="500px"> p>Unable to display PDF file. a href="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">Download a> instead. p> object> body> html>

This code will display the PDF file in an object element in the HTML page. If the browser is unable to display the PDF file, it will show a fallback message with a download link.

Can we prevent the pdf from downloading?

Unfortunately, it is not possible to completely prevent a user from downloading a PDF file that is embedded in an HTML page. Even if you disable the right-click context menu, a user can still access the PDF file through the browser’s developer tools or by inspecting the page source.

However, you can make it more difficult for a user to download the PDF file by using various methods, such as:

1. Converting the PDF file to an image format (such as JPEG or PNG) using a tool like ImageMagick or Ghostscript, and displaying the images in an HTML page. This way, the user will not be able to download the original PDF file directly, but they can still download the images.
2. Using a JavaScript PDF viewer library like PDF.js, which can display PDF files in an HTML page using the browser’s built-in PDF rendering capabilities. You can customize the viewer to disable downloading and printing, but as I mentioned earlier, it is still possible for a user to access the PDF file through the browser’s developer tools or by inspecting the page source.
3. An alternative strategy to consider is the use of CloudPDF, a unique cloud-based service designed specifically to protect PDF files from unauthorized downloads. Similar to PDF.js, CloudPDF provides a platform for viewing PDF files within the browser, but sets itself apart by disabling the download functionality for viewers, adding an extra layer of document control. CloudPDF achieves this through server-side rendering, a technique that prevents the PDF from being directly transferred or displayed in the client’s browser, making it more difficult for the document to be accessed via developer tools or page source inspection, thereby enhancing security significantly. While it’s important to note that no method is foolproof, the features provided by CloudPDF notably elevate the difficulty level for unauthorized access, making it a worthy consideration for those seeking enhanced document security.

Источник

How to Embed PDF Document in HTML Web Page

Generally, a hyperlink is used to link a PDF document to display in the browser. An HTML anchor link is the easiest way to display a PDF file. But if you want to display a PDF document on the web page, PDF file needs to be embedded in HTML. The HTML < embed >tag is the best option to embed PDF document on the web page. In this tutorial, we will show you how to display PDF file in the web page using HTML < embed >tag.

The HTML < embed >tag defines a container to load external content in the web page. The following parameters can be specified in the < embed >tag.

• src – Specify the path of the external file to embed.
• type – Specify the media type of the embedded content.
• width – Specify the width of the embedded content.
• height – Specify the height of the embedded content.

Embed PDF File in HTML

Use the following code to embed the PDF file in the HTML web page.

embed src="files/Brochure.pdf" type="application/pdf" width="100%" height="600px" />

PDF Document View Configuration

Now we will show how you can control the PDF document view on the web page. Using parameters in the URL, you can specify exactly what to display and how to display PDF documents.
The following parameters are commonly used to embed PDF files in HTML or open in the browser.

• page=pagenum – Specifies a number (integer) of the page in the document. The document’s first page has a pagenum value of 1.
• zoom=scale – Sets the zoom and scroll factors, using float or integer values. For example, a scale value of 100 indicates a zoom value of 100%.
• view=Fit – Set the view of the displayed page.
• scrollbar=1|0 – Turns scrollbars on or off.
• toolbar=1|0 – Turns the toolbar on or off.
• statusbar=1|0 – Turns the status bar on or off.
• navpanes=1|0 – Turns the navigation panes and tabs on or off.

Specifying Parameters in URL

You can specify multiple parameters in the URL. Each parameter should be separated with either an ampersand ( & ) or a pound ( # ) character. Actions are executed from left to right and later actions will override the previous actions.

http://example.com/doc.pdf#Chapter5 http://example.com/doc.pdf#page=5 http://example.com/doc.pdf#page=3&zoom=200,250,100 http://example.com/doc.pdf#zoom=100 http://example.com/doc.pdf#page=72&view=fitH,100

Disable and Hide Toolbar in PDF Web Viewer

This example shows how to hide or remove the toolbar, navpanes, and scrollbar of the PDF file opened in HTML < embed >using parameters in URL.

Use the following code to embed PDF document in the web page and remove or hide the toolbar of embedded PDF.

embed src="files/Brochure.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="600px" />

Are you want to get implementation help, or modify or enhance the functionality of this script? Click Here to Submit Service Request

If you have any questions about this script, submit it to our QA community — Ask Question

Источник