#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) — так что мне удалось визуализировать это далеко.
Спасибо