Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

jsPDF Project to Extract Text From Text File and Export to PDF Document in Browser Using Javascript

Posted on December 16, 2022

 

 

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

 

 

JavaScript
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.

 

 

Java
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

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme