javascriptnode.jsnpmhtml-pdf

html to pdf fit table on A4


im currently using html-pdf which takes my table data and turns it into an pdf.

My problem is that the table content is overlapping the required A4 papersize in such way that there is 2 columns totally missing in the pdf, when ever i change the format to A3 it fits and works.

I need it for A4 to fit. Any ideas ?

const dlPdfResult = (result) => {
  return new Promise(function (resolve, reject) {
    optionsType = {
      format: 'A4',
      orientation: 'landscape',
      paginationOffset: 0,
      header: {
        'height': '10mm',
        'contents': `<div style=' font-family: sans-serif, Arial, Helvetica; font-size: 11px; text-align: left;  width: 842px; overflow: hidden;'><div style='width: 10%; float:left;'></div><div style='width: 40%; float:left;padding: 0px 0px 0px 60px;'>Port2Port exports</div><div style='width: 40%; float:left; text-align: right;'>Logo</div><div style='width: 10%; float:left;'></div>`
      },
      footer: {
        'height': '10mm',
        'contents': {
          first: '1',
          2: '2',
          default: '<span style="color: #444;">{{page}}</span>/<span>{{pages}}</span>',
          last: 'Last Page'
        },
        type: 'pdf', // allowed file types: png, jpeg, pdf
        quality: '75'
      }
    }
    tableForm = tableify(result)

    pdf.create(tableForm, optionsType).toFile('./test.pdf', function (err, res) {
      if (err) return reject(err)
      resolve(res)
    })
  })
}


Solution

  • At this moment my only fix is to replace the table results i get and adding styles to that using mm and giving it max-width.

    just one example would be:

    tableForm = tableify(result)
    
    strip = tableForm.replace(/<td/g, `<td style='max-width: 5mm;border: 1px solid #000;overflow: hidden;word-wrap: break-word;'`)
    

    I did this for all the tdand all the th.

    so my next replace looked like:

    var addStyleSpacingThString = strip.replace(/<th class="string">/g, `<th class='string' style='max-width: 5mm;text-align: left;'>`)
    

    This is working an fitting all my content the last thing i want to mention is that my table itself has a width of 100%.

    <table style=' width: 100%; heigth: auto;font-size: 11px;font-family: sans-serif, Arial, Helvetica; border-collapse: collapse;'>