Some portion of the PDF content slot is cut off after PDF is generated

[joe-berg-colossus]

I have a rather long section of HTML that I am looking to convert into a pdf and allow the user to download. Using this library, I'm able to generate and download the PDF but it appears some of the HTML is getting cut off towards the end. There are images in my HTML that are also not getting added to the PDF although there are no CORS errors on the images when the PDF is being generated.

My component configuration is as follows:

<q-btn
  icon-right="picture_as_pdf"
  outline
  label="PDF"
  @click="generatePdf"
/>
<q-no-ssr>
  <vue-html2pdf
    :show-layout="false"
    :float-layout="true"
    :enable-download="true"
    :preview-modal="false"
    :pdf-quality="2"
    :manual-pagination="false"
    :paginate-elements-by-height="1400"
    pdf-format="letter"
    pdf-orientation="portrait"
    @hasDownloaded="$q.loading.hide()"
    ref="html2Pdf"
    :html-to-pdf-options="htmlToPdfOptions"
  >
    <div
      class="q-pa-lg"
      slot="pdf-content"
      v-html="currentItem.transcript"
    ></div>
  </vue-html2pdf>
</q-no-ssr>

I'm also using html-to-pdf-options as a computed property:

htmlToPdfOptions() {
      return {
        filename: `${this.currentItem.title}`,
        enableLinks: true,
        image: {
          type: "png"
        },
        margin: [2, 2, 2, 2]
      };
    }

How I call the PDF generation method:

generatePdf() {
  this.$q.loading.show({
    message: "Generating and downloading transcript PDF."
  });
  this.$refs.html2Pdf.generatePdf();
},

Is there some sort of upper limit on the size of PDF it can generate or am I doing something incorrectly with the paginate-elements-by-height prop? Curious.

Some other helpful info:

• During PDF generation, I can see this in the console indicating the size of the canvas: Canvas renderer initialized (779x25347 at 570.703125,0) with scale 1
• I'm using the quasar framework. It's pretty similar to nuxt.

Many thanks in advance.

[kempsteven]

html2pdf.js uses HTML Canvas under-the-hood, canvases have a limit on height & width(limit depends on the browser), if your html height/width exceeds the limit there will be a chance that the content will be cut off.

Please see known issues no.6: https://www.npmjs.com/package/vue-html2pdf#known-issues

Explanation for the canvas width/height limit: https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element/11585939#11585939

There is a fix for this from the creator of html2pdf.js, haven't tried yet tho. https://github.com/eKoopmans/html2pdf.js/issues/19#issuecomment-455868274

and I think this solution worked for me back then(I might apply this solution in this package someday): https://github.com/eKoopmans/html2pdf.js/issues/19

[zorent-zebra]

I'd like to add a note. Our PDF generation which uses html2Pdf used to work well for long documents. In fact, we had calculated exactly when it'd go past the pixel limitations mentioned here and we'd show some message. Recently all PDF generation for all versions of our product stopped working, including ones which definitely used to work. You can see in the console: Document cloned, element located at 432,0 with size 1056x23628.5 using computed rendering This is below the threshold for HTML canvas, however the data gets cut off. If I find the root issue, I'll post.

[zorent-zebra]

Follow-up note: starting with Chrome version 92, Mac Chrome hasn't been able to export PDFs for us much longer than 15000 pixels. Windows Chrome also can't export PDFs much longer than 15000 pixels without data getting cut off. I haven't checked to find out exactly which Chrome version on Windows first started exhibiting this behavior. Chrome version 92 was officially released July 20, 2021. Firefox also seems to be exhibiting this behavior recently, but I haven't looked into it carefully.