How to Add a Download as PDF Button in Website
Sometimes, your website visitors may want to save your content for later or print it out. One of the easiest ways to help them do this is by adding a “Download as PDF” or “Save as PDF” button to your webpage.
This blog post will show you how to add this feature to your website step-by-step using simple code—no need for advanced coding knowledge.
Why Add a Save as PDF Button?
Adding a PDF download button can help users:
- Save useful blog posts, invoices, or product details.
- Print pages in a clean format.
- Access content offline.
- Share your content easily with others.
Methods to Add Save as PDF Button
Method – 1 (Convert Whole page as PDF)
We can add a Download as PDF button to our website using the simple code given below. Here, it will export the webpage as a pdf file. Here, you can exclude certain elements from pdf and keep only the important part of the webpage.
<style>
.download-btn {
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
border: none;
background: #333;
color: #fff;
cursor: pointer;
}
@media print {
@page {
size: A4 portrait;
}
.download-btn {
display: none;
}
}
</style>
<button class="download-btn">Download As PDF</button>
<script>
const downloadBtn = document.querySelector(".download-btn");
downloadBtn.addEventListener("click", () => {
print();
});
</script>For example, You can exclude Header, footer, sidebar, related posts, author box and keep only the main content in the pdf.
Follow the video for more clarity.
Method – 2 (Convert specified part as pdf)
You can wrap the content in a custom div tag and trigger pdf file within that content only.
Step 1: Create the HTML Content
Wrap the content you want to allow users to save as a PDF in a div with an id.
<div id="pdf-content"> <h1>My Blog Post</h1> <p>This is the content that will be saved as a PDF using the browser's built-in print feature.</p> </div>
Step 2: Add the “Save as PDF” Button
<button style="background: #0088ff; color: white; padding: 15px 25px; border: 0px; cursor: pointer;" onclick="printPDF()">Save as PDF</button>
Step 3: Add the JavaScript Code
This script copies the content, opens a new window, and triggers the browser’s print dialog.
<script>
function printPDF() {
const content = document.getElementById('pdf-content').innerHTML;
const printWindow = window.open('', '', 'width=800,height=600');
printWindow.document.write(`
<html>
<head>
<title>Save as PDF</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
h1 { color: #333; }
p { line-height: 1.6; }
</style>
</head>
<body>
${content}
<script>
window.onload = function() {
window.print();
};
<\/script>
</body>
</html>
`);
printWindow.document.close();
}
</script>How It Works
- When the user clicks the button, it grabs the content from the selected div.
- It opens a new browser window with that content.
- The browser’s Print Dialog opens automatically.
- The user can then choose “Save as PDF” from the print options.
Method 3 – Using a Plugin (For WordPress Users)
If you use WordPress, you don’t have to touch any code. Use a plugin like: Print, PDF, Email by PrintFriendly
- Go to WordPress Dashboard > Plugins > Add New.
- Search for “Print, PDF, Email by PrintFriendly”.
- Install and Activate it.
- Go to Settings > PrintFriendly & PDF to customize it.
- The button will now appear on posts or pages automatically!
Example Use Cases
- Download blog articles as PDF
- Save invoices or receipts
- Export form results or certificates
This is the simplest and cleanest method to add a “Save as PDF” button to your site without using any external library. It gives users full control through their browser’s built-in tools.
Conclusion
Adding a Download as PDF button is a great way to improve user experience on your site. With just a few lines of code or a simple plugin, you can give users the power to save your content in a convenient format.
oops, forgot where I was… same result as “control-p” when looking at a blogger page.
You are partly Right, Here With this code, You can hide Unnecessary elements like sidebar, banner ads and others and allow only the actual page content. So, Clean layout for printing or downloading as pdf file.
This appears to produce the same result as when looking at a Blogger page. That’s fine; I like the ability to remove footers and whatnot. BUT, when I do this with either your code or , every photo in the post has the really really long and ugly file link to the uploaded .jpg underneath the photo in the PDF. Do you know if there is a way to NOT print that?
Please share the Screenshot with Page URL through Email, So i can check what is the issue here. You can easily exclude elements by targeting it’s class or id. You have full flexibility on modifying it with CSS.