Javascript 不带html2canvas的vue html到pdf_Javascript_Reactjs_Vue.js_Pdf_Vuejs2

Javascript 不带html2canvas的vue html到pdf

javascript reactjs vue.js pdf vuejs2

Javascript 不带html2canvas的vue html到pdf,javascript,reactjs,vue.js,pdf,vuejs2,Javascript,Reactjs,Vue.js,Pdf,Vuejs2,我当前需要从HTML或Vue组件创建pdf文件。我试过jsPDF，html2pdf，vue-html2pdf，但看起来这些库使用的是html2canvas，这意味着它在几秒钟内就可以冻结用户界面（取决于HTML结构），不能在web worker内部运行。所以我的问题是：如何在不使用html2canvas或web worker的情况下从HTML生成pdf以避免冻结UI 我相信这是可以实现的，因为reactjs可以在不使用画布的情况下创建pdf，我不知道这是否有助于解决您的问题，但本文介绍了一种

我当前需要从HTML或Vue组件创建pdf文件。
我试过

jsPDF

，

html2pdf

，

vue-html2pdf

，但看起来这些库使用的是html2canvas，这意味着它在几秒钟内就可以冻结用户界面（取决于HTML结构），不能在web worker内部运行。
所以我的问题是：如何在不使用html2canvas或web worker的情况下从HTML生成pdf以避免冻结UI

我相信这是可以实现的，因为reactjs可以在不使用画布的情况下创建pdf，我不知道这是否有助于解决您的问题，但本文介绍了一种不使用第三方库打印pdf的方法。它使用窗口的打印属性。

您可以使用

javascript

和

jquery

打印它

<!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>

这确实是创建pdf，但我无法从主窗口检索pdf。我想创建pdf文件进行预览，但我不想下载它，比如创建一个blob在Web上查看。您可以尝试pdfmake:。看起来它使用pdfkit，就像react一样-pdf@CuongNgocLepdfmake不完全将HTML转换为pdf，它使用表格布局，因此非常难以使用复杂的UI。react pdf看起来在使用pdfkit之前有很多类，我不擅长react，所以我不太了解他们在做什么，但这并不能创建pdf。它只是打开一个对话框进行打印。@tony19是正确的，您的解决方案不创建文件（Blob），它打开打印对话框进行下载是的，它打开一个对话框，但您可以打印该pdf

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