用PDF動態建立表格模板

Question

我正在與pdfmake一起使用javascript生成pdf。我試圖動態地而不是建一個表的作品，這是我嘗試

$.ajax({ 
    type: "POST", 
    url: myURL, 
    success:function(data){ 
     /* data has a format like : 
     *[{"peaje":"Peaje 1","ruta":"Ruta 1","fechaCruce":"2014-10-18","hora":"15:42","valor":"5000"},{"peaje":"Peaje 1","ruta":"Ruta 1","fechaCruce":"2014-10-18","hora":"14:21","valor":"7000"},{"peaje":"Peaje 1","ruta":"Ruta 1","fechaCruce":"2014-09-19","hora":"11:58","valor":"17000"}] 
     */ 
     var peajes = JSON.parse(data); 
     var body = []; 
     var titulos = new Array('PEAJE', 'RUTA', 'FECHA CRUCE', 'HORA', 'VALOR'); 
     body.push(titulos); 
     for (key in peajes) 
     { 
      if (peajes.hasOwnProperty(key)) 
      { 
       var peaje = peajes[key]; 
       var fila = new Array(); 
       fila.push(peaje.peaje.toString()); 
       fila.push(peaje.ruta.toString() ); 
       fila.push(peaje.fechaCruce.toString()); 
       fila.push(peaje.hora.toString() ); 
       fila.push(peaje.valor.toString()); 
       body.push(fila); 
      } 
     } 
     console.log(body); 
     var docDefinition = { 
      content: [ 
      { 
       table: { 
        headerRows: 1, 
        widths: [ '*', 'auto', 100, '*' ], 
        body: body 
       } 
      }] 
     };//end docDefinition 
     pdfMake.createPdf(docDefinition).open(); 
    }//end success 
    }); 

這是庫http://pdfmake.org/#/gettingstarted

我不知道我做錯了的例子嗎？

Answer 1

您應該列名&值的數組：

var column = []; 
 
column.push({ text: 'A', style: 'tableHeader'}); 
 
column.push({ text: 'B', style: 'tableHeader'}); 
 

 
var value = []; 
 
value.push({ text: 'Asda', style: 'tableHeader'}); 
 
value.push({ text: 'Bsa', style: 'tableHeader'});

當你犯了一個表，你應該做這樣的。

table: { 
 
    headerRows: 1, 
 
    body: [ 
 
     column, value 
 
    ] 
 
}

Answer 2

對於多個行，here是示例

var externalDataRetrievedFromServer = [ 
    { name: 'Bartek', age: 34 }, 
    { name: 'John', age: 27 }, 
    { name: 'Elizabeth', age: 30 }, 
]; 

function buildTableBody(data, columns) { 
    var body = []; 

    body.push(columns); 

    data.forEach(function(row) { 
     var dataRow = []; 

     columns.forEach(function(column) { 
      dataRow.push(row[column].toString()); 
     }) 

     body.push(dataRow); 
    }); 

    return body; 
} 

function table(data, columns) { 
    return { 
     table: { 
      headerRows: 1, 
      body: buildTableBody(data, columns) 
     } 
    }; 
} 

var dd = { 
    content: [ 
     { text: 'Dynamic parts', style: 'header' }, 
     table(externalDataRetrievedFromServer, ['name', 'age']) 
    ] 
} 

Answer 3

對於標題和行是動態的，我們可以定義在陣列頭和也行，然後將它們加入到一個關注此示例（複製並粘貼到http://pdfmake.org/playground.html中以查看它的行動）：

// playground requires you to assign document definition to a variable called dd 

var headers = { 
    fila_0:{ 
     col_1:{ text: 'Faltas', style: 'tableHeader',rowSpan: 2, alignment: 'center',margin: [0, 8, 0, 0] }, 
     col_2:{ text: 'Fecha', style: 'tableHeader',rowSpan: 2, alignment: 'center',margin: [0, 8, 0, 0] }, 
     col_3:{ text: 'Descripción', style: 'tableHeader',rowSpan: 2, alignment: 'center',margin: [0, 8, 0, 0] }, 
     col_4:{ text: 'Cita con acudientes', style: 'tableHeader',colSpan: 2, alignment: 'center' } 
    }, 
    fila_1:{ 
     col_1:{ text: 'Header 1', style: 'tableHeader', alignment: 'center' }, 
     col_2:{ text: 'Header 2', style: 'tableHeader', alignment: 'center' }, 
     col_3:{ text: 'Header 3', style: 'tableHeader', alignment: 'center' }, 
     col_4:{ text: 'Citación', style: 'tableHeader', alignment: 'center' }, 
     col_5:{ text: 'Cumplimiento', style: 'tableHeader', alignment: 'center'} 
    } 
} 
var rows = { 
    a: { 
     peaje: '1', 
     ruta: '2', 
     fechaCruce: '3', 
     hora: '4', 
     valor: '5' 
    }, 
    b: { 
     peaje: '1', 
     ruta: '2', 
     fechaCruce: '3', 
     hora: '4', 
     valor: '5' 
    } 
} 

var body = []; 
for (var key in headers){ 
    if (headers.hasOwnProperty(key)){ 
     var header = headers[key]; 
     var row = new Array(); 
     row.push(header.col_1); 
     row.push(header.col_2); 
     row.push(header.col_3); 
     row.push(header.col_4); 
     row.push(header.col_5); 
     body.push(row); 
    } 
} 
for (var key in rows) 
{ 
    if (rows.hasOwnProperty(key)) 
    { 
     var data = rows[key]; 
     var row = new Array(); 
     row.push(data.peaje.toString()); 
     row.push(data.ruta.toString() ); 
     row.push(data.fechaCruce.toString()); 
     row.push(data.hora.toString() ); 
     row.push(data.valor.toString()); 
     body.push(row); 
    } 
} 

var dd = { 
     pageMargins: [40,155,40,55], 
     pageOrientation: 'landscape', 
     header: function() { 
      return { 
       margin: 40, 
       columns: [ 
        { 
        }, 
        { text:['Resumen disciplinario'], 
          alignment: 'left',bold:true,margin:[-405,80,0,0],fontSize: 24} 
       ] 
      } 
     }, 
     footer: function(currentPage, pageCount) { 
      return { text:'Pagina '+ currentPage.toString() + ' de ' + pageCount, alignment: 'center',margin:[0,30,0,0] }; 
     }, 
     content: [ 
      //{ text: 'Tables', style: 'header' }, 
      '\nEl estudiante AGRESOTH NEGRETE JORYETH TATIANA - 901 - TARDE tiene 1 actas, con 1 faltas acomuladas y a manera de resumen descritas a continuación:\n\n', 
      //{ text: 'A simple table (no headers, no width specified, no spans, no styling)', style: 'sta' }, 
      //'The following table has nothing more than a body array', 
      { 
       style: 'tableExample', 
       table: { 
        widths: [ '*', '*', '*', '*', '*' ], 
        headerRows: 2, 
        // keepWithHeaderRows: 1, 
        body: body 
       } 
      }], 
     styles: { 
      header: { 
       fontSize: 28, 
       bold: true 
      }, 
      subheader: { 
       fontSize: 15, 
       bold: true 
      }, 
      quote: { 
       italics: true 
      }, 
      small: { 
       fontSize: 8 
      }, 
      sta: { 
       fontSize: 11, 
       bold: false, 
       alignment: 'justify' 
      } 
     } 
}