Convert Large JSON to PDF
In the realm of data processing and visualization, there are times when dealing with large datasets can be a challenging task. To address this challenge, a large JSON to PDF converter has emerged as a useful web tool. This tool allows users to convert large JSON data into a downloadable PDF format, making it easier to share, analyze, and present information. In this article, we’ll explore the key features of this converter and how it can be employed effectively.
Author
- TechieBundle
- December 15, 2023
Understanding the Interface
The HTML structure of the web tool is designed to provide a user-friendly experience. Let’s break down the essential components:
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>
</head>
<body>
<div class="container">
<button id="convertBtn"> Download PDF</button>
</div>
</body>
</html>
Styling with CSS
The CSS styles define the appearance of the container, textarea, and button. It ensures that the tool is responsive, adapting to different screen sizes. The design focuses on simplicity and clarity, enhancing the overall user experience.
.container {
text-align: center;
max-width: 100%;
max-height: 600px;
padding: 26px !important;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 0 auto;
height: 100%;
padding-top: 26px !important;
width: 100%;
}
textarea {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
button {
background-color: #4caf50;
color: #fff;
padding: 4px 20px;
border: none;
cursor: pointer;
border-radius: 4px;
width: 94%;
}
button:hover {
background-color: #45a049;
}
@media only screen and (max-width: 600px) {
textarea {
height: 260px
}
button {
width: 86%;
}
}
The JavaScript Magic
The functionality of the large JSON to PDF converter is powered by JavaScript. Let’s delve into the key aspects of the script:
Importing Sample JSON Data
import data from './large.json' assert { type: 'json' };
The tool imports a JSON file using the ES6 module syntax. This JSON file contains the data that will be converted to a PDF.
Event Handling
document.addEventListener('DOMContentLoaded', function () {
// Code for handling the conversion process
const convertBtn = document.getElementById('convertBtn');
});
The script waits for the DOM to be fully loaded before executing the conversion logic.
PDF Conversion Logic
convertBtn.addEventListener('click', async function () {
// Code for converting JSON to PDF
const doc = new jspdf();
doc.setFontSize(10)
doc.text("TechieBundle", 14, 22,);
var pageSize = doc.internal.pageSize
var pageWidth = pageSize.width ? pageSize.width : pageSize.getWidth()
var text = doc.splitTextToSize(headerData, pageWidth - 40, {})
doc.text(text, 14, 30)
autoTable(doc, {
head:this.headRows(),
body: this.bodyRows(data),
styles: { cellWidth: 14, fontSize: 8, lineWidth: 0.5 },
margin: { top: 5, left:0, right:0 },
headStyles:{fillColor: [95,157,160]},
startY: 50,
showHead: 'firstPage',
});
doc.save('Test.pdf');
});
When the “Download PDF” button is clicked, the conversion process is initiated. The script utilizes the jspdf library to create a PDF document.
Helper Function
headRows() {
return [
{name:'Name', city:'City', address:'Address', pinCode:'Pin Code' },
]
}
bodyRows(rowValue) {
var body = []
for (var j = 0; j < rowValue.length; j++) {
body.push({
name: rowValue[j].name,
team: rowValue[j].city,
address: rowValue[j].address,
pinCode: rowValue[j].pinCode
})
}
return body
}
To handle large datasets efficiently, the script generates PDF pages asynchronously. It adds content to each page until the entire dataset is processed.
Saving the PDF
doc.save('Test.pdf');
Once all the data is processed, the resulting PDF is saved with the filename “Test.pdf.”
Conclusion
The large JSON to PDF converter is a versatile tool that simplifies the visualization of extensive datasets. With a clean and intuitive interface, it provides a seamless user experience. Whether you are a data analyst, developer, or simply someone dealing with large JSON datasets, this web tool can be a valuable asset in your toolkit. You can explore for Building a Stylish Tic Tac Toe Game with HTML, CSS, and JavaScript Game.
