Almost ready to download a .pdf file containing multiple selected rows from vue-tables-2 datatables.
In my code, I am pushing the checkedRows from this table.body which includes both the header columns and the content of the checkedRows, which consists of a checkbox input and 'sku' string. Here is a snippet of my code:
<template>
<el-container>
<side-nav></side-nav>
<el-main>
<v-server-table url="/getListings" :data="tableData" :columns="columns" :options="options">
<input slot="selected" slot-scope="props" type="checkbox" :checked="props.row.selected" v-model="checkedRows" :value="props.row">
<button slot="afterFilter" type="button" class="btn btn-primary btn-pdf" @click="createPDF">Create Purchase Order</button>
</v-server-table>
</el-main>
</el-container>
</template>
<script>
import {ServerTable, Event} from 'vue-tables-2';
Vue.use(ServerTable, {}, false, 'bootstrap4');
var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs;
export default {
data() {
return {
toggle:[],
tableData: [],
checkedRows: [],
columns: [
'selected',
'sku',
],
options: {
}
}
},
methods: {
createPDF() {
var docDefinition = {
content: [
{
table: {
headerRows: 1,
widths: [ 'auto', 'auto' ],
body: [
]
}
}
]
};
docDefinition.content[0].table.body.push(this.columns);
for(var i=0;i<this.checkedRows.length;i++){
docDefinition.content[0].table.body.push(Object.values(this.checkedRows[i]));
}
pdfMake.createPdf(docDefinition).download('PO.pdf');
}
}
}
</script>
The issue arises with the mismatch between the 2 header columns 'selected' and 'sku' and the row data column {'sku#'}, resulting in a 'malformed table row error' as well as a 'cell is undefined' error. Here are screenshots of these errors:
https://i.sstatic.net/cHmmP.png
https://i.sstatic.net/XfCHr.png
https://i.sstatic.net/47f7X.png
I actually do not need the checkbox column 'selected' in the downloaded .pdf, but I am unsure how to include only necessary header columns like 'sku' while excluding the 'selected' column.