Не пойманный (в обещании) Ошибка типа: Не удается прочитать свойство «слева» неопределенного в getLineXs (pdfmake.min.js:2)

#javascript #vue.js #pdfmake

Вопрос:

Я пытаюсь создать страницу pdf из своего приложения VUE. Я использую pdfmake.min.js. Я новичок в JS, поэтому я действительно не понимаю, где мой код терпит неудачу.

это.$store.state.users.currentUsersGroups представляет собой список объектов.

мой код:

 export default {
    name: 'auditBtn',
    components: {
    },
    computed: {
        isDisabled() {
            console.log('isadmin: ', this.$store.state.users.isAdmin);
        return this.$store.state.users.isAdmin;
        },
        currentDate() {
            const current = new Date();
            const date = `${current.getDate()}/${current.getMonth() 1}/${current.getFullYear()}`;
            return date;
        },
        currentUser (){
          return this.$store.state.users.currentUser
        },
    },
methods: {
        generatePDF () {
            var docDefinition = {
                pageSize: 'A4',
                pageOrientation: 'landscape',
                footer: function (currentPage, pageCount) {
                    return {
                        table: {
                            widths: '*',
                            body: [
                                [
                                    { text: "Page "   currentPage.toString()   ' of '   pageCount, alignment: 'right',
                                        style: 'normalText', margin: [700, 20, 50, 50] }
                                ]
                            ]
                        },
                        layout: 'noBorders',
                        style: 'small'
                    };
                },
                content: [
                    {
                        text: 'Recertification Manager',
                        style: 'header'
                    },
                    'Report generated on '   this.currentDate   ' by '   this.currentUser,
                    { canvas: [{ type: 'line', x1: 0, y1: 2, x2: 750, y2: 2, lineWidth: 0.5 }], margin: [0, 5] },
                ],
                styles: {
                    header: {
                        fontSize: 16,
                        bold: true,
                    },
                    subheader: {
                        fontSize: 15,
                        bold: true
                    },
                    quote: {
                        italics: true
                    },
                    small: {
                        fontSize: 8
                    },
                    medium: {
                        fontSize: 10
                    },
                    italics: {
                        italics: true
                    },
                    tableExample: {
                        margin: [0, 5, 0, 15]
                    },
                    tableHeader: {
                        bold: true,
                        fontSize: 10,
                        color: 'black',
                        fillColor: '#CCCCCC'
                    },
                    tableContent: {
                        bold: false,
                        fontSize: 7,
                        color: 'black'
                    }
                }
            }
            if(this.$store.state.users.currentUsersGroups.length > 0) {
                this.$store.state.users.currentUsersGroups.forEach((result, key) => {
                    var tableContents = [
                        {text: 'Application Name', style: 'tableHeader'},
                        {text: 'Application Owner', style: 'tableHeader'},
                        {text: 'Troux id', style: 'tableHeader'},
                        {text: 'Certification expiration date:', style: 'tableHeader'}
                    ]
                    if ('name' in result) {
                        tableContents.push([
                            {text: result.name, style: 'tableContent'},
                            {text: result.app_owner, style: 'tableContent'},
                            {text: result.description, style: 'tableContent'},
                            {text: result.cert_date, style: 'tableContent'},
                        ])
                    }
                    console.log(tableContents)
                            docDefinition.content.push(
                                {
                                    style: 'tableExample',
                                    table: {
                                        headerRows: 1,
                                        widths: ['auto', 'auto', '10%', '10%'],
                                        body: tableContents
                                    },
                    })
                    docDefinition.content.push({ canvas: [{ type: 'line', x1: 0, y1: 2, x2: 750, y2: 2,
                            lineWidth: 0.5 }], margin: [0, 5] })
                    console.log('After X 2')
                })
            }
            var pdf = pdfMake.createPdf(docDefinition).download('Policy_Analysis_Report.pdf')
        }
    },
    template: `
          <v-btn color="#FF8657" v-on:click="generatePDF" :disabled="!isDisabled">Audit</v-btn>
    `
} 

Но я получаю ошибку в названии.
консоль.журнал показывает (после X 2) — так что мне удалось визуализировать это далеко.

Спасибо