Whether it’s a small business or a large corporation, everyone prefers to receive their reports or other documentation in PDF format. This article discusses multiple methods for creating PDFs from webpages, including coding solutions using React components and non-coding options.
We highlight the benefits and limitations of each approach and provide practical steps to guide you through the process. Additionally, we include recommendations for an easy-to-use online HTML to PDF converter for those seeking a simple solution.
Why PDF file format is ideal to save webpages
PDFs preserve the original design and layout of webpages, including graphics, which some other file types cannot maintain. Additionally, they keep the text format unchanged when saved or shared. One simple way to convert your files to PDF is to use PDFGuru.com, which is the ideal tool to edit, convert or create PDF files. However, we also share a more technically detailed method for those with more time and coding expertise.
How to convert HTML to PDF
Here are the detailed steps to convert an HTML to PDF format. If you prefer an easier way to convert your files, jump ahead to the next section, where we discuss PDFGuru’s simple online tool to convert HTML to PDF. In this step-by-step guide, you’ll learn to convert HTML to PDF using React and the jsPDF library (version 2.5.1). This client-side library is ideal for generating reports, invoices, and tickets without requiring server-side processing.
-
Setting Up the Project
To start, create a new React project using Vite:
npm create vite@latest convert-html-to-pdf — –template react
Go to the new directory and install the jsPDF package:
cd convert-html-to-pdf
npm install jspdf
-
Utilizing jsPDF
Open App.jsx and import jsPDF:
import jsPDF from ‘jspdf’;
Initialize a new jsPDF instance:
const doc = new jsPDF();
You can customize the PDF by passing options to the constructor:
const doc = new jsPDF({
orientation: ‘landscape’,
unit: ‘in’,
format: [4, 2],
});
-
Converting HTML to PDF
jsPDF’s html() method converts HTML to PDF. Use the useRef() hook to reference the HTML element:
doc.html(html_element, {
async callback(doc) {
await doc.save(‘pdf_name’);
},
});
-
Adding the Markup
Create a ReportTemplate.jsx file with your HTML content:
const styles = {
page: { marginLeft: ‘5rem’, marginRight: ‘5rem’, color: ‘black’, backgroundColor: ‘white’ },
columnLayout: { display: ‘flex’, justifyContent: ‘space-between’, margin: ‘3rem 0 5rem 0’, gap: ‘2rem’ },
column: { display: ‘flex’, flexDirection: ‘column’ },
spacer2: { height: ‘2rem’ },
fullWidth: { width: ‘100%’ },
marginb0: { marginBottom: 0 },
};
const ReportTemplate = () => (
<>
<div style={styles.page}>
<h1>Report Heading That Spans More Than Just One Line</h1>
<div style={styles.spacer2}></div>
<img style={styles.fullWidth} src=”photo-2.png” />
</div>
<div style={styles.page}>
<h2>Report Heading That Spans More Than Just One Line</h2>
<div style={styles.columnLayout}>
<div style={styles.column}>
<img style={styles.fullWidth} src=”photo-2.png” />
<h4 style={styles.marginb0}>Subtitle One</h4>
<p>Lorem ipsum dolor sit amet…</p>
</div>
<div style={styles.column}>
<img style={styles.fullWidth} src=”photo-1.png” />
<h4 style={styles.marginb0}>Subtitle Two</h4>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</div>
</div>
</>
);
export default ReportTemplate;
4. Generating the PDF
In App.jsx, handle the button click to generate the PDF:
import { useRef } from ‘react’;
import jsPDF from ‘jspdf’;
import ReportTemplate from ‘./ReportTemplate’;
function App() {
const reportTemplateRef = useRef(null);
const handleGeneratePdf = () => {
const doc = new jsPDF({ format: ‘a4’, unit: ‘px’ });
doc.html(reportTemplateRef.current, {
async callback(doc) {
await doc.save(‘document’);
},
});
};
return (
<div>
<button onClick={handleGeneratePdf}>Generate PDF</button>
<div ref={reportTemplateRef}><ReportTemplate /></div>
</div>
);
}
export default App;
Run the app with npm run dev and click the button to generate the PDF.
Yes, we know the method above is quite technical and can be overwhelming for those without coding knowledge. In this case, we recommend using an online tool that does all the hardwork for you, without requiring any coding or software language. PDFGuru’s HTML to PDF converter is the best tool for this, and we provide the steps on how to use it below.
How to convert HTML to PDF with PDFGuru online converter
Here’s a step-by-step guide:
- Log in to your PDFGuru account and select the ‘HTML to PDF’ tool.
- Click ‘Upload’ or drag & drop your document into the upload area.
- Wait for the HTML converter to process your file.
- The converted PDF will be automatically downloaded to your device and saved in your PDFGuru account.
It really is that simple! PDFGuru uses HTTPS encryption to protect your digital data when creating PDF files on their platform, ensuring online security.
Conclusion
As discussed in this article, there are many ways to convert HTML files to PDF format. Some are more technical than others, so the method you choose will depend on your personal capabilities. The simplest way is to use PDFGuru’s online tool of course, which can convert your file with no hassle.