Sujay's Free Tools(Text to PDF converter)
Creating a complete text to PDF converter with styling and features involves a significant amount of code. I'll provide you with a basic example using HTML, CSS, and JavaScript to get you started. Note that this example won't cover all possible features and may need further enhancements based on your specific requirements.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to PDF Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
}
#inputText {
width: 80%;
height: 150px;
}
#convertBtn, #downloadBtn {
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
}
#outputPdf {
display: none;
}
</style>
</head>
<body>
<h1>Text to PDF Converter</h1>
<textarea id="inputText" placeholder="Enter your text here"></textarea><br>
<button id="convertBtn" onclick="convertToPdf()">Convert to PDF</button>
<button id="downloadBtn" onclick="downloadPdf()" disabled>Download PDF</button>
<div id="outputPdf"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script>
function convertToPdf() {
const inputText = document.getElementById('inputText').value;
const pdf = new jsPDF();
pdf.text(inputText, 20, 20);
const pdfData = pdf.output('dataurlstring');
document.getElementById('outputPdf').innerHTML = `<iframe src="${pdfData}" style="width:100%; height:500px;"></iframe>`;
document.getElementById('downloadBtn').disabled = false;
}
function downloadPdf() {
const pdf = new jsPDF();
pdf.text(document.getElementById('inputText').value, 20, 20);
pdf.save('converted.pdf');
}
</script>
</body>
</html>
```
This example uses the jsPDF library for PDF generation. Make sure to include the library via a CDN. This is a basic example, and you may need to enhance it based on your specific use case and requirements.
Comments
Post a Comment