kempsteven / vue-html2pdf

vue-html2pdf converts any vue component or element into PDF, vue-html2pdf is basically a vue wrapper only and uses html2pdf.js behind the scenes.
https://www.npmjs.com/package/vue-html2pdf
MIT License
440 stars 74 forks source link

Freezing the page in Firefox #155

Open hamedhafeznia opened 1 year ago

hamedhafeznia commented 1 year ago

Describing the bug: I'm having a problem using this library in Firefox, when I click the Export Button, the page freezes and does not download the PDF file. I also receive the following error message. happens when there are too many elements on the page.

here's my code:

   <button @click="exportToPDF">Export</button>

    <vue-html2pdf
      ref="html2Pdf"
      :show-layout="false"
      :float-layout="true"
      :enable-download="true"
      :paginate-elements-by-height="1400"
      :pdf-quality="2"
      pdf-format="a2"
      pdf-content-width="500"
      pdf-orientation="landscape">
      <template slot="pdf-content">
        <div id="row-fixed"> CONTENT </div>
        <div id="students-table"> CONTENT </div>
      </template>
    </vue-html2pdf>

Method for downloading the file: exportToPDF() { this.$refs.html2Pdf.generatePdf(); },

Error:

Uncaught (in promise) Exception { name: "NS_ERROR_FAILURE", message: "", result: 2147500037,
columnNumber: 0
data: null
filename: "/app/_nuxt/c9fb7d694eca1709a462.js"
lineNumber: 2
message: ""
​}

Package Version: 1.8.0

Additional context: Just happens in Firefox and works well on Chrome. One thing that I realized is the following element covers the page so the result is freezing the page:

<div class="html2pdf__overlay" style="position: fixed; overflow: hidden; z-index: 1000; inset: 0px; background-color: rgba(0, 0, 0, 0.8); opacity: 0;">
<div class="html2pdf__container" style="position: absolute; width: 23.3858in; left: 0px; right: 0px; top: 0px; height: auto; margin: auto; background-color: white;">
<section data-v-1fd3ad26="" class="content-wrapper">
CONTENT
</section>
</div>
<div>
</div>
AmirHo3sein commented 1 year ago

In my case, the issue happened because of the 'html2canvas' scale option. If that option has a value above 1.2, Firefox freezes and does not download the PDF. in beforeDownload function i did this

if (navigator.userAgent.indexOf("Firefox") != -1) { options.html2canvas.scale = 1.2 }