vue html to pdf without html2canvas

Question

I currently need to create a pdf file from HTML or Vue component.
I have tried jsPDF, html2pdf, vue-html2pdf but it looks like these libraries using html2canvas which mean it's freeze UI in few seconds (depends on HTML structure) and can't run inside web worker.
So my questions: how to generate pdf from HTML without using html2canvas or using web worker to avoid freeze UI

I believe this can be achieved because reactjs have react-pdf which create pdf without using canvas

You can try pdfmake: github.com/bpampuch/pdfmake. Look like it use pdfkit, just like react-pdf — Cuong Le Ngoc
– Cuong Le Ngoc, Commented Jun 13, 2021 at 14:02
@CuongNgocLe pdfmake is not convert HTML to pdf entirely, it uses table layout so very difficult with complicated UI. react-pdf look like have a bunch of class before using pdfkit, I'm not good at react so I don't quite understand what they are doing — Chinh Nguyen
– Chinh Nguyen, Commented Jun 13, 2021 at 16:12

canozsoy · Accepted Answer · 2021-06-09 09:11:30Z

2

I don't know if this will help your problem but in this link a way to printing a pdf without using third party libraries is explained. It uses print property of the window.

answered Jun 9, 2021 at 9:11

canozsoy

691 silver badge2 bronze badges

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

2 Comments

Chinh Nguyen Over a year ago

it's create pdf indeed but i can't retrieve the pdf from main window

Chinh Nguyen Over a year ago

i want to create pdf file to preview but i don't want to download it, like create a blob to view on web

Mhammed Talhaouy · Accepted Answer · 2021-06-17 23:52:53Z

0

you can use javascript and jquery to print it

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html2pdf</title>
  </head>
  <body>
    <div id="page">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam id, ex
      facere perferendis eligendi corporis provident ipsam, ea porro debitis
      natus aut nulla, ipsa atque aliquam architecto est dolorem impedit!
    </div>
    <button id="btn">print content</button>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      $('#btn').click(function () {
        var divContents = $('#page').html()
        var printWindow = window.open('', '_self', 'height=400,width=800')
        printWindow.document.write('<html><head><title>html2pdf</title>')
        
        printWindow.document.write('</head><body>')
        printWindow.document.write(divContents)
        printWindow.document.write('</body></html>')
        printWindow.document.close()
        printWindow.print()
      })
    </script>
  </body>
</html>

you can also add style css to the page by add this line between head tag, if html file and css file in same folder

printWindow.document.write('<link rel="stylesheet" href="style.css" />')

answered Jun 17, 2021 at 23:52

Mhammed Talhaouy

1,28913 silver badges14 bronze badges

3 Comments

tony19 Over a year ago

But this doesn't create a PDF. It just opens a dialog to print.

Chinh Nguyen Over a year ago

@tony19 is right, your solution doesn't create a file (Blob), it open the print dialog to download

Mhammed Talhaouy Over a year ago

yeah it open a dialog, but you can print that pdf

Collectives™ on Stack Overflow

vue html to pdf without html2canvas

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related