pdfmake Test

An interactive pdfmake review.

by gowrav deivasigamani

HTML

<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>
<div id="test">
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Hello</td>
      <td>I</td>
      <td>am</td>
    </tr>
    <tr>
      <td>a</td>
      <td>table</td>
      <td>.</td>
    </tr>
  </table>
  <h1 style="text-align: center">
    pdfmake
  </h1>
  <p>pdfmake does not generate pdfs from the html. Rather, it generates them directly from javascript.</p>
  <p>It is very fast, but very limited, especially compared to PHP alternatives.</p>
  <p>To get a pdf that looks like the page, you could use html2canvas, which generates an image that can be inserted into the pdf. I think this is a hack and not ideal</p>
</div>

<a href="javascript:generatePDF()">Dowload PDF</a>

CSS

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}

JavaScript

function generatePDF() {
	var documentDefinition = {
  	content: 
    [
    	{
      	table: 
        {
      		headerRows: 1,
          widths: [ '*', '*', '*', '*',  '*', '*', '*', '*',
           '*', '*', '*', '*', '*', '*', '*', '*', '*', '*', '*', '*'],
      		body: [
						[
          		{ text: 'Header 1', style: 'tableHeader' }, 
            	{ text: 'Header 2', style: 'tableHeader' }, 
         	   	{ text: 'Header 3', style: 'tableHeader' },
              { text: 'Header 3', style: 'tableHeader' },
              { text: 'Header 1', style: 'tableHeader' }, 
            	{ text: 'Header 2', style: 'tableHeader' }, 
         	   	{ text: 'Header 3', style: 'tableHeader' },
              { text: 'Header 3', style: 'tableHeader' },
              { text: 'Header 1', style: 'tableHeader' }, 
            	{ text: 'Header 2', style: 'tableHeader' }, 
         	   	{ text: 'Header 3', style: 'tableHeader' },
              { text: 'Header 3', style: 'tableHeader' },
              { text: 'Header 1', style: 'tableHeader' }, 
            	{ text: 'Header 2', style: 'tableHeader' }, 
         	   	{ text: 'Header 3', style: 'tableHeader' },
              { text: 'Header 3', style: 'tableHeader' },
              { text: 'Header 1', style: 'tableHeader' }, 
            	{ text: 'Header 2', style: 'tableHeader' }, 
         	   	{ text: 'Header 3', style: 'tableHeader' },
              { text: 'Header 3', style: 'tableHeader' }
          	]
        	]
      	}
    	},
      {
      	text: 'pdfmake', style: 'header' 
      },
      'pdfmake does not generate pdfs from the html. Rather, it generates them directly from javascript.',
			'It is very fast, but very limited, especially compared to PHP alternatives.',
			'To get a pdf that looks like the page, you could use html2canvas, which generates an image that can be inserted into the pdf. I think this is a hack and not ideal',
  	],
    styles: 
    {
    	header: 
      {
				fontSize: 18,
				bold: true,
       ...