pdfMake javascript pdf内容放错了地方

时间:2016-02-24 04:06:00

标签: javascript html pdf pdfmake

我有以下代码,我认为编写得很好,但它仍然使PDF格式内容错位,

<html> <head>
<title>Ingreso Simple</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/pdfmake.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/vfs_fonts.js"></script>
</head> <body> <script>

var usuario = 'user';
var left = 25;
var right = 25;
var top = 210;
var bottom = 30;


var dd = {
    // a string or { width: number, height: number }
    pageSize: 'LETTER',

    // by default we use portrait, you can change it to landscape if you wish
    pageOrientation: 'portrait',

    // [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins
    pageMargins: [left, top, right, bottom],
    footer: function (currentPage, pageCount) {
        return {
            margin: [25,10,0,0],
            text:currentPage.toString() + ' / ' + pageCount};
    },
    fontSize: 9,
    header: {
        margin: [0,25,25,25],
        fontSize: 9,
        stack: [
            {columns: [
                {text: "LOGO", width: 150, margin:0},
                {stack: [
                    {text: 'ENTERPRICE 1',fontSize: 14},
                    {text: 'Adress 1',fontSize: 12},
                    {text: '9999-999-99',fontSize: 12}
                ]},
                {stack: [
                    {text: 'ASDDS',fontSize: 11},
                    {text: '23/02/2016',fontSize: 11},
                    {text: usuario, fontSize: 11}],
                    alignment: 'right',
                    width: 85
                }
            ]
            },
            {
                margin: [25, 15, 0, 0],
                columns: ['ASDSDASDA', {text: 'SIMPLE', alignment: 'right'}]
            },
            {
                margin: [25, 10, 0, 0],
                columns: [
                    {   text: 'Fecha: 21/02/2016',
                        width: 150
                    },
                    {   text: 'Carta de Porte:'},
                    {   text: '4383',
                        alignment: 'left',
                        width: 100
                    }]
            },
            {
                margin: [25,5,0,0],
                columns:[
                    {text:[{text:'Cliente:',bold:true}, 'ASDASDV.']},
                    {text:[{text:'Deposito:',bold:true}, '995555']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Tipo :',bold:true}, 'CLASE 1']},
                    {text:[{text:'Proce:',bold:true}, 'ASDASD']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Fecha y hora de entrada del vehiculo de transporte:',bold:true}]},
                    '07/01/2016 14:52'
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Motorista:',bold:true}, 'CRISTIAN DANIEL VILLACORTA']},
                    {text:[{text:'Licencia No.',bold:true}, '-07092207871017']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Cia. de Transporte:',bold:true}, 'PROPIO-MAQUINARIA AGRICOL']},
                    {text:[{text:'Codigo de Transporte:',bold:true}, ' ']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Placa de vehiculo:',bold:true}, '103797']},
                    {text:[{text:'No. Marchamo:',bold:true}, 'MARC1']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Fecha de descarga:',bold:true}, '07/01/2016']},
                    {text:[{text:'Hora inicio:',bold:true}, '15:14'], width:85},
                    {text:[{text:'Hora fin:',bold:true}, '00:00'], width:85},
                    {text:[{text:'Ubicacion:',bold:true}, 'BODEGA 1']},
                    {text:[{text:'Muelle:',bold:true}, 'MUELLE 1']}
                ]
            },
            {
                margin: [25,0,0,0],
                columns:[
                    {text:[{text:'Descargado por: ',bold:true}, 'Cliente']},
                    {text:[{text:'Mercaderia Paletizada? ',bold:true}, 'Granel']},
                    {text:[{text:'Utiliza DAN? ',bold:true}, 'SI']}
                ]
            }
        ]
    },
    content: [
        {
            fontSize: 9,
            table:{
                headerRows:1,
                widths: [ 60, 60, 145, 135, 55, 55 ],
                body:[
                    [
                        'Codigo Mercaderia',
                        'Codigo Referencia',
                        'Descripcion Mercaderia',
                        {stack:['Cantidad de bultos', {columns:['Declarada', 'Recibida', 'Diferencia']}],alignment:
'center'},
                        'Unidad Medida',
                        'Estado Mercaderia'
                    ],[
                        '07951',
                        ' ',
                        'Equipo hidraulico industrial',
                        {stack:[{columns:['100','101','-1']}]},
                        'BTOS',
                        'Bueno'
                    ],[
                        '07951',
                        ' ',
                        'Equipo hidraulico industrial',
                        {stack:[{columns:['100','101','-1']}]},
                        'BTOS',
                        'Bueno'
                    ],[
                        '10094461 1',
                        ' ',
                        'Exhividores de piso',
                        {stack:[{columns:['150','150','0']}]},
                        'BTOS',
                        'Bueno'
                    ],
                    [' ',' ', ' ', {stack:[{columns:['5400','5404','-4']}]}, ' ',' ']]
            }
        },
        {margin:[0,10,0,0], text:[{text:'Observaciones: ', bold:true}, 'ASDASDASDAS']}
    ]
};
var asdf = pdfMake.createPdf(dd);
asdf.open(); </script> </body> </html>

代码应该创建一个带有标题和表格的pdf,但它会以这种方式打印: screenshot of the generated pdf

我用红色标记错放的文字(它应该是一张桌子),我不知道为什么它一直把它放在那个地方。

1 个答案:

答案 0 :(得分:0)

问题是变量left,right,top和bottom与范围中的其他变量冲突,所以答案是重命名变量并替换它们的使用位置:

simpl

更换后,pdf完美呈现