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
432 stars 75 forks source link

Prevent table data overflow #172

Open hoanvnbka opened 1 year ago

hoanvnbka commented 1 year ago

Describe the bug I have a table with many records. When generate new page, data is overflow. How to breaking correct?

I'm using vue-html2pdf: v1.8.0

<vue-html2pdf
      ref="html2PdfRef"
      :show-layout="controlValue.showLayout"
      :float-layout="controlValue.floatLayout"
      :enable-download="controlValue.enableDownload"
      :preview-modal="controlValue.previewModal"
      :filename="controlValue.filename"
      :paginate-elements-by-height="controlValue.paginateElementsByHeight"
      :pdf-quality="controlValue.pdfQuality"
      :pdf-format="controlValue.pdfFormat"
      :pdf-orientation="controlValue.pdfOrientation"
      :pdf-content-width="controlValue.pdfContentWidth"
      :manual-pagination="controlValue.manualPagination"
      :html-to-pdf-options="htmlToPdfOptions"
    >
      <pdf-content
        slot="pdf-content"
        :data-sources="dataSources"
      />
    </vue-html2pdf>
controlValue: {
        showLayout: false,
        floatLayout: true,
        enableDownload: false,
        previewModal: true,
        paginateElementsByHeight: 1100,
        manualPagination: true,
        filename: 'BaoCaoKetQuaGiangDay',
        pdfQuality: 2,
        pdfFormat: 'a4',
        pdfOrientation: 'portrait',
        pdfContentWidth: '800px',
      },
htmlToPdfOptions() {
      return {
        margin: [0.3, 0, 0.7, 0],
        filename: 'LichThi.pdf',
        image: {
          type: 'jpeg',
          quality: 0.98,
        },
        enableLinks: true,
        html2canvas: {
          scale: this.controlValue.pdfQuality,
          useCORS: true,
        },
        jsPDF: {
          unit: 'in',
          format: this.controlValue.pdfFormat,
          orientation: this.controlValue.pdfOrientation,
        },
      }
    },

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Screenshots image

Package Version e.g. 1.8.0

Additional context Add any other context about the problem here.