我有以下代码,我认为编写得很好,但它仍然使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,但它会以这种方式打印:
我用红色标记错放的文字(它应该是一张桌子),我不知道为什么它一直把它放在那个地方。
答案 0 :(得分:0)
问题是变量left,right,top和bottom与范围中的其他变量冲突,所以答案是重命名变量并替换它们的使用位置:
simpl
更换后,pdf完美呈现