Html code open pdf

How to View a PDF in HTML

PDF documents are used all across the internet. Be it an invoice from an online shop, or a sales agreement, PDF is everywhere. One of the main arguments for using PDF as opposed to word processor files is the fact that the PDF file format is rendered exactly the same no matter the device. This trait is especially useful on the web, where getting something to look the same on different browsers isn’t always easy.

In this article, we’ll look at a simple approach for showing PDFs in an HTML app without using JavaScript by making use of the and HTML5 elements. This option works regardless of the programming language you’re using — no matter if you’re an ASP.NET, JavaScript, PHP, C++, Java, Python, or Ruby specialist.

Embedding a PDF in HTML with an Object Element

Given the immense popularity of PDF, it’s no wonder that all common browsers (Google Chrome, Firefox, Internet Explorer, Edge, and Safari) include some sort of built-in PDF support. This makes it possible to embed PDFs into HTML pages without using JavaScript. Let’s explore the most common method to do so.

The HTML element can use a native browser for PDF viewing, and it even allows you to provide a fallback if PDF isn’t supported. It doesn’t require JavaScript and is a common tool when working on an HTML5 application:

Embedding a PDF in HTML with an iframe Element

Since isn’t available in every browser, this method is often combined with the HTML element to reach the most users. To do this, the fallback area of the is used to host an . Similar to the element, the content of an — in our case, this would be the

tag with its content — is only shown when the browser doesn’t support PDFs via the element:

Live Example

If you’re curious how the above PDF will be rendered in your browser, check out the following example integration:

These simple HTML elements work in most desktop browsers and can be used to add PDF support to your web app without relying on JavaScript.

Problems with This Approach

This approach of displaying PDF documents is fast and requires no programming. There are, however, certain downsides:

• A browser could use whichever PDF reader is installed on a system, and there’s no API that would allow you to customize the reader’s look and feel. In other words, the UI used when loading a PDF via an is completely outside of your control.
• It isn’t guaranteed that every browser will implement a PDF view via or . For example, certain versions of Internet Explorer will require your users to install Adobe Reader to support rendering a PDF via , whereas other browsers might not support it at all.
• There’s only a very limited set of API methods. In fact, if you look closely at the data and src properties in the above examples, you can see we’ve appended #page=2 to the URLs. This allows you to control the page that’s shown. If you’re looking for a complete reference of parameters, check out the Parameters for Opening PDF Files specification published by Adobe in 2007. Unfortunately, supporting those parameters isn’t required, and thus, there’s no guarantee that this flag really works (as an example, while writing this, we noticed Safari 11 doesn’t seem to honor any of the mentioned properties).

Conclusion

With the or HTML5 elements, it’s possible to show a PDF in your web app with ease. This is supported in most browsers and requires no JavaScript at all, making it a perfect approach for adding PDF support if no advanced features are necessary.

However, for use cases that require support for every browser, customization, or some of the more advanced PDF features — such as PDF annotations, interactive PDF forms, digital signatures, and more — we recommend you look into commercial alternatives.

At PSPDFKit, we offer a commercial, feature-rich, and completely customizable HTML5 PDF Viewer Library that’s easy to integrate and comes with well-documented APIs to handle complex use cases. Try out our PDF library using our free trial, and check out our demos to see what’s possible.

Источник

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 a PDF in an HTML Website

In this article (a five-minute read), you’ll learn about two simple (and free!) approaches to displaying PDFs in the browser and how you can quickly implement them in your website.

Native Browser PDF Rendering

Since PDF is such a widely used format, all modern browsers have built-in PDF support. We can take advantage of this by using HTML elements to embed a PDF directly in our web page, like this:

DOCTYPE html> html> head> title>PDF Viewertitle> head> body>   Place the following element where you want the PDF to be displayed in your website. You can change the size using the width and height attributes. --> div> object data='https://pdfjs-express.s3-us-west-2.amazonaws.com/docs/choosing-a-pdf-viewer.pdf' type="application/pdf" width="500" height="678" > iframe src='https://pdfjs-express.s3-us-west-2.amazonaws.com/docs/choosing-a-pdf-viewer.pdf' width="500" height="678" > p>This browser does not support PDF!p> iframe> object> div> body> html> 

I’ve used a URL for the data and src values. These point to the PDF I want to open from a URL. But I could instead open a local file by swapping out the URL for a file path (e.g. /path/to/file.pdf ).

The PDF viewer’s user interface will look a bit different depending on your browser:

This approach will work in all modern desktop and mobile versions of Chrome, Safari, Firefox, and Edge. (It will not work in Internet Explorer.) If you need to support Internet Explorer or customize the user interface, you should consider the next approach — PDF.js rendering.

Embed PDF in HTML With Free PDF.js Express Viewer

PDF.js Express Viewer is a free PDF.js viewer that wraps a modern React-based UI around the open-source PDF.js rendering engine. PDF.js was originally developed by Mozilla and is maintained by an open-source community. PDF.js Express Viewer allows you to render PDFs inside a web page by using JavaScript instead of the browser’s built-in PDF support.

The benefits of PDF.js Express Viewer compared to native browser rendering are:

• Internet Explorer support (in addition to all modern browsers)
• Consistent user interface and user experience across browsers
• A more customizable user interface (for example, removing the download button)

PDF.js Express Viewer HTML Example

Here is what we will make after following this tutorial:

Adding PDF.js Express Viewer to your website is an easy 3 step process. Here we will be doing a manual integration, however, we have guides for integrating PDF.js Express Viewer with many frameworks, including React, Angular, Vue, and much more. You can find a full list of framework guides here

Step 1 — Download PDF.js Express Viewer

Note that to use the PDF.js Express Viewer you will need a free license key. Please get your free Viewer key here if you do not have one.

Step 2 — Integrate PDF.js Express into your application

DOCTYPE html> html> head> title>PDF.js Express Viewertitle> head> script src='/lib/webviewer.min.js'> script> body> >>div> body> html> 

To import PDF.js Express Viewer as a CommonJS module, please refer to this guide to integrate with NPM

Once you have done this an example project directory might look something like this:

root folder ├── images │ └── . ├── scripts │ └── . ├── styles │ └── . ├── index.html ├── lib │ ├── ui │ │ ├── . │ ├── core │ │ ├── . │ └── webviewer.min.js └── . 

In this sample directory you can add the folders: images, scripts, and styles to include any extra resources you would like to have on your website. However for this example project it is only necessary to have the extracted lib folder and the index.html file we just created in the above step.

1. To instantiate PDF.js Express Web Viewer, add this script in body after the viewer div declaration:

script> WebViewer( path: '/lib', // path to the PDF.js Express'lib' folder on your server licenseKey: 'Insert free license key here', initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf', // initialDoc: '/path/to/my/file.pdf', // You can also use documents on your server >, document.getElementById('viewer')) .then(instance =>  // now you can access APIs through the WebViewer instance const  Core, UI > = instance; // adding an event listener for when a document is loaded Core.documentViewer.addEventListener('documentLoaded', () =>  console.log('document loaded'); >); // adding an event listener for when the page number has changed Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) =>  console.log(`Page number is: $pageNumber>`); >); >); script> 

The easiest way to run this project would be with http-server . To do so, make sure you have Node.js installed.

Next open your terminal and install http-server with the following command:

Once installed navigate to the root of your website’s directory in the terminal and run the following command:

After running that command go to your browser and type localhost:8080. You should then see the following:

Step 3 — Use PDF.js Express Viewer APIs to customize the viewer

To use more PDF.js Express APIs, you can add the API calls in the callback of the PDF.js Express constructor. For example, to change the theme of PDF.js Express to dark, you can add:

.then((instance) =>  const  documentViewer, annotationManager > = instance.Core; // call methods from instance, documentViewer and annotationManager as needed instance.UI.setTheme('dark'); // . >); 

Refresh your application page ( http://localhost:3000/ ) and you should see the theme has changed:

For resources on how to use more of our PDF.js Express API, check out the PDF.js Express guides and API.

Conclusion

We hope this was helpful! You can also have a look at PDF.js Express Plus, which extends the functionality of PDF.js Express Viewer with PDF annotation, form filling, and signing inside your web app.

Источник