How to embed a PDF in HTML without the ability to download

Imagine this situation: You are running a business selling online courses. You put a lot of work into creating these courses and you publish them online as PDF documents. A couple of months after you launch the course, you find them spread all over the internet. You feel terrible and want to find a solution to protect your documents.

In this article I will share some ideas on how you can protect your documents from being downloaded. So let's get started.

HTML embed

In html there is a tag called <embed>. This tag allows you to embed external sources into your website - for example, a media player, a webpage or in our case, a PDF.

The positive part of this solution is that we don't need any external plugin because the <embed> tag is supported in all major browsers except for Internet Explorer. The downside of this solution is that this basically only has an option to hide the toolbar but doesn't actually prevent the user from downloading the PDF. If the user opens the element inspector in any browser, it will be possible to find the URL for the PDF and download it.

If this is sufficient for you, read the source code below to see exactly how to implement this option. If you are searching for a more secure solution scroll down to read about the other solutions we found for you.

<embed src="filename.pdf#toolbar=0" width="500" height="375">

Google Drive

Google Drive offers the ability to upload PDF documents and share them publicly with the options to disable download and print options.

The positive side of this is that it is a free solution. `Also, the PDF is rendered on the Google server and therefore not available in the source code.

The drawback of this option is that if the document is public, everyone who knows the URL can read it. Additionally, Google Drive does not provide any options to customize the PDF viewer to fit with your design. This solution may not be ideal for you if you want to customize the viewer or limit who can view documents, for example providing access only to specific users inside your application. If this is the case, you can scroll down to the next solution.

If this solution is sufficient for you, you can follow the steps below.

1. Upload your PDF

Upload a file to Google Drive

Click "New" and then select "File upload"

2. Share Document

Share document on Google Drive

Right click on the document and select "Share"

3. Change settings for the document

Change settings of a file in Google Drive

Click the settings icon in the right top corner

Disable the download print and copy option in Google Drive

Uncheck the box "Viewers and commenters can see the option to download, print and copy"

4. Create a public link for your document

Change the visibility of a file inside Google Drive

Click "Anyone with this link" in order to make this document publicly available

5. Embed your document inside an iframe on your website

Great job, now you are almost done. You now can embed this document inside an <iframe> on your website. Below you will find an example of how to embed this PDF inside an iframe.

<!DOCTYPE html>
<html>
<head>
<title>Example on how to embed Google Drive PDF inside website</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<iframe
src="https://drive.google.com/file/d/1kJJeabYl-NH4nsNV8kLs-qTUYESbUfMx/preview"
width="500"
height="375"
>
</iframe>
</div>
</body>
</html>

CloudPDF

CloudPDF offers a cloud based PDF viewer with security options. The viewer is customizable to fit the design of your website with the possibility to disable download options.

You can make an account on CloudPDF by clicking the button below

Below you can find an example of the CloudPDF viewer.

Summary

These methods all provide options for embedding PDFs in HTML with varying levels of privacy.

The <embed> tag in HTML is a straightforward option that allows you to hide the download and print options, but leaves the information needed to do so in the source code.

The Google Drive method does allow you to disable downloading and printing, but provides limited customization and integration options.

The CloudPDF viewer is a cloud based, customizable tool that provides solutions for allowing or disabling access to view, download and print your documents.

We hope this article has helped you evaluate these options and provided a quick guide to implementing them.