Welcome folks today in this blog post we will be extracting the text from the text file which is submitted by the user and convert it to pdf document in browser using jspdf library in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to include the jspdf library cdn and copy paste the below html
index.html
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>TXT file to PDF Online Converter</title> </head> <body> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src=" https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> </html> |
Now we need to enter the body of the html as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="container"> <h1 class="text-center"> Plain TXT to PDF File Converter </h1> <form id="form"> <div class="form-group"> <input class="form-control" type="file" accept=".txt" name="file" id="file" required> </div> <div class="form-group"> <label for="name">Name of PDF File:</label> <input class="form-control" type="text" name="file" value="sample" id="name" required> </div> <div class="form-group"> <button class="btn btn-block btn-danger"> Download PDF File </button> </div> </form> <br><br> </div> |
As you can see we have the simple user input field where the user can upload the text file and then we have the simple button to export it to pdf document using jspdf. Now we will be writing the javascript code required for this application
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var fr, pdf, textpdf, parts, outStr = "" $("#file").on("change", function (e) { fr = new FileReader(); pdf = new jsPDF(); pdf.setFont("courier"); pdf.setFontType("normal"); pdf.setFontSize(14) fr.onload = function () { textpdf = fr.result console.log(fr.result) } fr.readAsText(this.files[0]); }) |
As you can see we are making use of the filereader api in which we are first of all getting the text present inside the uploaded text file by the user. And then we declaring the new object of the jsPDF and setting the font size and using custom font.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
$("#form").submit(function (e) { e.preventDefault() parts = textpdf.split(' ') for (var i = 0; i < parts.length; i++) { outStr += ' ' + parts[i]; //every tenth word, add a new-line. Change this to '<br/>' if you want html. if ((i + 1) % 15 === 0) { outStr += "\n"; } } console.log(outStr) var lines = outStr.split("\n"); console.log(lines.length) var flag = 0 for (var i = 0; i < lines.length; i++) { if (i == 0) { if ((i + 1) % 50 == 0) { pdf.addPage() } } else { if (i % 50 == 0) { pdf.addPage() flag = 0 } } if (i == 0) { pdf.text(lines[i], 10, 10) } else { pdf.text(lines[i], 10, 10 * flag) } flag = flag + 1 } pdf.save($("#name").val() + ".pdf") }) |
In the above javascript code we are writing the logic to fit all the text which is present inside the text file to the pdf document. Now if you open the index.html inside the browser the output will look something like this
