Vue-tables-2 создать файл PDF из нескольких выбранных строк таблицы с помощью библиотеки pdfmake

Question

Я хотел бы создать PDF-файл из нескольких выбранных строк в vue-tables-2.Я нашел библиотеку PDF под названием pdfmake , которая выглядит великолепно.Будучи новичком в этом, я изо всех сил пытаюсь понять, как я могу:

1. перенести это в компонент vue-tables-2.Импортировать ли это в компонент?
2. как мне создать PDF-файл из нескольких выбранных строк данных таблицы?У меня есть this.checkedRows для содержимого таблицы данных.Как мне вставить это в pdf?

Я вижу, как у pdfmake есть инструкции по созданию контента с данными, но как я могу заставить это работать с vue-tables-2? Скриншот содержимого таблицы pdfmake

Если кто-нибудь знает лучшую библиотеку pdf для vue-tables-2, пожалуйста, дайте мне знать.Вот мой код до сих пор ...

<v-server-table url="/removals" :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="submit" @click="createPDF">Create PDF</button>

 </v-server-table>

На данный момент у меня просто очень простой прототип:

data() {
    return {

        tableData: [],

        checkedRows: [],

        columns: [
            'selected',
            'sku',
        ],

        options: {

        }
    }

И мой метод ...

methods: {

    createPDF() {
        pdfMake.createPdf(docDefinition).download('PO.pdf');
    }


}

Answer 1

вы можете установить pdfmake, используя следующую команду:

 npm install pdfmake --save-dev

, импортировать и использовать его следующим образом

<template>....</template>
<script>
    var pdfMake = require('pdfmake/build/pdfmake.js');
    var pdfFonts = require('pdfmake/build/vfs_fonts.js');
    pdfMake.vfs = pdfFonts.pdfMake.vfs;

    export default{ 

        data() {
            return {
              tableData: [],
              checkedRows: [],
              columns: [
                   'selected',
                   'sku',
               ],

            options: {

                     }
           },
         methods: {

                            createPDF() {
        var docDefinition = {
        content: [
            {
                table: {
                    headerRows: 1,
                    widths: [ '*', 'auto', 100, '*' ],

                    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');
    }



    }
     }