Vue-tables-2 创建.pdf (pdfmake) 'malformed table row' 错误

Question

我即将能够下载 vue-tables-2 数据表中多个选定（复选框）行的 .pdf 文件。

在我的代码中，我将 header 列和 this.checkedRows 内容的 this.checkedRows 推到 table.body ....一个复选框输入和 'sku' 这是一个字符串。这是我的代码：

<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>

问题出在 2 header 列 'selected' 和 'sku' 以及 1 列行数据 {'sku#'} 不匹配，我得到了 'malformed table row error' 以及 'cell is undefined' 错误。以下是错误：

我实际上不需要 .pdf 中的复选框 selected 列，但我不知道如何只包含需要的 header 列 如 sku 等，并省略 selected header 列。

Answer 1

在您的情况下，您需要以下解决方案：

docDefinition.content[0].table.body.push(["sku"]);
        for(var i=0;i<this.checkedRows.length;i++){

      docDefinition.content[0].table.body.push([this.checkedRows[i]["sku"]]);  
        }

但总的来说你需要：

docDefinition.content[0].table.body.push(["col1","col2",..,"coln"]);
        for(var i=0;i<this.checkedRows.length;i++){

      docDefinition.content[0].table.body.push([this.checkedRows[i]["col1"],this.checkedRows[i]["col2"],...,this.checkedRows[i]["coln"]]);  
        }

Vue-tables-2 创建.pdf (pdfmake) 'malformed table row' 错误

Vue-tables-2 create .pdf (pdfmake) 'malformed table row' error

javascript

vue.js

vue-component

vuejs2

vue-tables-2