Vue-tables-2 使用 pdfmake 库从多个选定的表行创建 pdf 文件答案

【问题标题】：Vue-tables-2 create pdf file from multiple selected table rows using pdfmake libraryVue-tables-2 使用 pdfmake 库从多个选定的表行创建 pdf 文件
【发布时间】：2018-10-02 13:41:07
【问题描述】：

我想在 vue-tables-2 中创建一个包含多个选定行的 pdf。我找到了一个名为 pdfmake 的 pdf 库，它看起来很棒。作为新手，我正在努力了解如何：

将其引入 vue-tables-2 组件。我是否将其导入组件？
如何创建包含多个选定表格行数据的 pdf？我有 this.checkedRows 用于 tableData 内容。如何将其放入 pdf 中？

我看到 pdfmake 有如何构建数据表内容的说明，但我怎样才能使这个工作与 vue-tables-2 一起工作？ pdfmake table content screenshot

如果有人知道更好的 vue-tables-2 pdf 库，请告诉我。到目前为止，这是我的代码...

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


}

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component pdfmake

【解决方案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');
    }



    }
     }

【讨论】：