How to Print the html output into Pdf using javascript

Question

Here is my code

let input = document.querySelector('input'); var textarea = document.getElementsByClassName('area')[0]; var txtreplace = document.getElementsByClassName('demo')[0]; window.addEventListener('load', function () { input.addEventListener('change', () => { let files = input.files; if (files.length == 0) return; const file = files[0]; let reader = new FileReader(); const fruits = []; reader.onload = (e) => { const file = e.target.result; const lines = file.split(/\r\n|\n/); //console.log(lines.length); textarea.value = lines.join('\n'); lines.forEach(function (arrayItem) { //console.log(arrayItem.replace("\u001bE", "")); var arr1 = arrayItem.replace("\u001bE", ""); var arr2 = arr1.replace("\u001bF", ""); fruits.push(arr2); }); console.log(fruits.length); if (parseInt(fruits.length) > 0) { console.log(fruits); txtreplace.innerHTML = fruits; } };
                reader.onerror = (e) => alert(e.target.error.name);

                reader.readAsText(file);

            });
        }, false);
      
    function printDiv() {
        var divContents = document.getElementsByClassName("demo").innerHTML;
        var a = window.open('', '', 'height=500, width=500');
        a.document.write('<html>');
        a.document.write('<body > <h1>Print PDF <br>');
        a.document.write(divContents);
        a.document.write('</body></html>');
        a.document.close();
        a.print();
    }

</script> </body>

nem0z · Accepted Answer · 2022-07-22 08:04:08Z

0

You can take a look at https://github.com/parallax/jsPDF.
It's js library allow you to build pdf using Javascript.

Otherwise have some solutions to convert html page to pdf ( https://www.html2pdf.co.uk/ ), but I don't think it's what you are looking for.

Exemple of code using JSPDF :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>


var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');

doc.save('Test.pdf');

Hope it will helps you ;)

edited Jul 22, 2022 at 8:04

answered Jul 22, 2022 at 6:46

nem0z

1,1371 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ReactNative Over a year ago

thanks for you response but here i want to print my text content into pdf file

nem0z Over a year ago

I think jspdf can helps you, I shared an exemple to write text into a pdf and then export it

ReactNative Over a year ago

here my problem is every time i have to upload text file in that text file some string replacing happen automatically in code then that that text file after changes it will download by clicking Download button

nem0z Over a year ago

Okay, so I really think jspdf can do it. You read the text file => you do the remplacement => you get a text you want to export as pdf =>you click the button => it generate your pdf filled with the your text` then it export the pdf ` using jspdf

Collectives™ on Stack Overflow

How to Print the html output into Pdf using javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related