如何从Vue-Tables-2,Vue Js和Laravel中进行服务器端PDF

时间:2018-10-04 12:58:12

标签: laravel vue.js pdf-generation pdfmake vue-tables-2

我有一个Vue-tables-2数据表,一个按钮上有一个createPDF()方法-使用pdfmake作为客户端pdf生成器

经过审查,我的客户更喜欢使用server-side pdf生成器。我看到pdfmake同时具有客户端/服务器端,但是我一直在努力寻找可以遵循的示例。

我该如何:

  • 使用pdfmake来实现服务器端pdf
  • 或切换到更适合服务器端pdf生成的软件包

到目前为止,这是我的vue-tables-2组件中的客户端pdf代码:

<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' ],

                        body: [
                            [{text: 'sku', bold: true}]
                        ]
                    }
                }
            ]
            };
            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>

0 个答案:

没有答案