Print preview won't show all rows of a table

Varju

I’m a novice developer coming in mid-way to a Vue-generated project with many components. We’re also using the quasar framework for some of our tables.

We have tables that should print out to at least 16 pages were they on landscape-legal, or saved to a PDF. However, when using ctrl + P to generate a print preview in Chrome, nothing past the screen view at the time Ctrl + P was pressed will show.

I’ve made some @media print queries to see if overflow, z-index, display, and any other CSS property I can think of might affect this but haven’t had any success in prompting Chrome to generate more than one page in print preview. I have some confusion too about CSS precedence rules in the context of a Vue app, and how Quasar may also affect this.

tlloyduk

Also stumbled across this and wondered if anyone found a solution

tlloyduk

I ended up writing a little helper function.
I took some sample code from @metalsadman https://codepen.io/metalsadman/pen/LYNzrEE?editors=1010 and changed it slightly

printTable: function (props) {
      const headers = this.columns.map(col => this.$helpers.wrapCsvValue(col.label))

      const content = this.$refs.dataTable.filteredSortedRows.map(row => this.columns.map(col => this.$helpers.wrapCsvValue(
        typeof col.field === 'function'
          ? col.field(row)
          : row[typeof col.field === 'undefined' ? col.name : col.field],
        col.format
      )))

      this.$helpers.printWindow(headers, content, this.$t('page.title'))
    }

And then my helper function takes the table content and uses standard HTML table to render it in a pop-up and calls the window.print()

const printWindow = function (headers, data, title) {
  var printWindow = window.open('', '', 'height=600,width=800')
  printWindow.document.write(`<html><head><title>${title}</title>`)
  printWindow.document.write('<style type = "text/css">')
  printWindow.document.write('.q-table {')
  printWindow.document.write('width: 100%;')
  printWindow.document.write('max-width: 100%;')
  printWindow.document.write('border-collapse: collapse;')
  printWindow.document.write('margin: 25px 0;')
  printWindow.document.write('font-size: 0.9em;')
  printWindow.document.write('font-family: sans-serif;')
  printWindow.document.write('box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);')
  printWindow.document.write('}')
  printWindow.document.write('.q-table th, td {')
  printWindow.document.write('padding: 12px 15px;')
  printWindow.document.write('}')
  printWindow.document.write('.q-table tbody tr {')
  printWindow.document.write('border-bottom: 1px solid #dddddd;')
  printWindow.document.write('}')
  printWindow.document.write('.q-table thead tr {')
  printWindow.document.write('text-align: left;')
  printWindow.document.write('}')
  printWindow.document.write('</style>')
  printWindow.document.write('</head>')

  printWindow.document.write('<body>')
  printWindow.document.write('<table class="q-table">')
  printWindow.document.write('<thead>')
  printWindow.document.write('<tr>')
  for (const header of headers) {
    if (header !== 'Actions') {
      printWindow.document.write(`<th>${header}</th>`)
    }
  }
  printWindow.document.write('</tr>')
  printWindow.document.write('</thead>')
  printWindow.document.write('<tbody>')
  for (const row of data) {
    printWindow.document.write('<tr>')
    for (const col of row) {
      printWindow.document.write(`<td>${col}</td>`)
    }
    printWindow.document.write('</tr>')
  }
  printWindow.document.write('</tbody>')
  printWindow.document.write('</table>')
  printWindow.document.write('</body>')

  printWindow.document.write('</html>')
  printWindow.document.close()

  const afterPrintHandler = (function (vm) {
    return function () {
      printWindow.close()
    }
  }(this))
  printWindow.onafterprint = afterPrintHandler
  printWindow.print()
}

Seems pretty re-usable for all my q-table’s and prints the filtered content too. Maybe someone has a better approach or way to improve it

No More Posting New Topics!

Print preview won't show all rows of a table