How can I change the font size of a vue-good-table in vue.js?

Question

I want to print the content of a page in Vue.js and when I hit print, the right part of the table is "cutted" on the page that is ready to print. Should I use a function?

<vue-good-table :columns="columns" :rows="rows" id="vgt-table"></vue-good-table>

return {
      dispatchedToText: "",
      columns: [
        {
          label: "Bag Number",
          field: "bagNumber",
        },
        {
          label: "Chit Number",
          field: "chitNumber",
        },
        ....
      ],
      rows: parsedData,
      codes: [],
      users: [],
    };

printContent() {
      const printContents =
        `<br>` +
        `<div style="font-weight: bold; font-size: 25px;">Despatched to Trelleborg</div>` +
        document.getElementById("printable-content").innerHTML;
      const originalContents = document.body.innerHTML;

      document.body.innerHTML = printContents;
      window.print();
      document.body.innerHTML = originalContents;
    },

I tried using the style like this:

  <style scoped>
.printOnly {
  display: none;
}
@media screen {

  .vgt-table td {
    font-size: 10px; 
  }
}
@media print {
  body .vgt-table {
    font-size: 12px; 
  }
  .printOnly {
    display: block;
  }
  }
  table {
    padding: 0.3em 0.3em 0.3em 0.3em;
    vertical-align: top;
    border-bottom: 1px solid #dcdfe6;
    color: #606266;
  }
}
</style>

But it remains the same

Answer 1

To fix the table printing issue in Vue.js, you could try like this:

Adjust the table layout for printing:

 @media print {
  .vgt-table {
    table-layout: fixed;
    width: 100%;
  }
  .vgt-table td, .vgt-table th {
    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

Set print page margins:

@media print {
  @page {
    margin: 10mm;
  }
}

Use Vues ref for DOM access:

<vue-good-table :columns="columns" :rows="rows" ref="vgtTable"></vue-good-table>

In your methods like:

printContent() {
  const printContents = this.$refs.vgtTable.$el.outerHTML;
  // ... your code
}

maybe it works