I am facing an issue in Vue.js where the content of a page gets "cut off" on the right side when trying to print it. I'm wondering if I should use a function to solve this problem?
<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 have tried applying styles 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>
However, the issue persists.