Table border issue about html-to-pdfmake HOT 8 CLOSED

I had the same problem and got it to work by moving data-pdfmake="{"layout":"noBorders"}" to the table and removed the outer div.

So, instead of

<div data-pdfmake="{&quot;layout&quot;:&quot;noBorders&quot;}">
    <table><tr><td>Hello</td><td>World</td></tr></table>
</div>

try

<table data-pdfmake="{&quot;layout&quot;:&quot;noBorders&quot;}">
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</table>

from html-to-pdfmake.

To have no borders on a table, you have to use the layout option noBorders, as described in the PDFMake documentation. It's at the same level than the <table> so you have to apply it to a <div>, using the data-pdfmake properties like the below code:

  <div data-pdfmake="{&quot;layout&quot;:&quot;noBorders&quot;}">
    <table><tr><td>Hello</td><td>World</td></tr></table>
  </div>

Which will be converted to the below:

[
  {
    "table": {
      "body": [
        [
          {
            "text": "Hello",
            "style": [
              "html-td",
              "html-tr"
            ]
          },
          {
            "text": "World",
            "style": [
              "html-td",
              "html-tr"
            ]
          }
        ]
      ]
    },
    "style": [
      "html-table",
      "html-div"
    ],
    "marginBottom": 5,
    "layout": "noBorders"
  }
]

from html-to-pdfmake.

Can you provide some code, as well as the result you get and the result you were expected?

I'm currently attending a conference for work and I'm without a computer until Monday so I won't probably be able to provide a solution until then.

from html-to-pdfmake.

Thanks for your quick response. I am not able to comment from my office laptop. I am commenting from my phone. I will do from my personal system after some time.
I taken the example.js code and applied border none property to table
And I tried to align the image to right. Both are not worked.

from html-to-pdfmake.

Hi ,
I have copied your example.js code and applies some sort of css in multiple ways and also i tried with the approach in the documentation. None of those are worked for me.
My requirement is i need to change the font name and size as well as i don't need table borders. I will have pdf data in key and value pair. Key will be in 1 row. data will be in second row

I also tried https://aymkdn.github.io/html-to-pdfmake/index.html in this link with the table related piece of code from your example.js and applied border:none. It is also not worked
Please find the code below. Also attached a screenshot

var pdfMake = require('pdfmake/build/pdfmake');
var pdfFonts = require('pdfmake/build/vfs_fonts');
pdfMake.vfs = pdfFonts.pdfMake.vfs;
var fs = require('fs');
var jsdom = require('jsdom');
var { JSDOM } = jsdom;
var { window } = new JSDOM('');
var htmlToPdfMake = require('html-to-pdfmake');
//var util = require("util");

var html = htmlToPdfMake(`<table border=0>
    <tr>
      <td colspan="3">Table with <b>widths=[100,"*","auto"]</b> and <b>heights=40</b></th>
    </tr>
    <tr>
      <td>column1</td>
      <td>column2</td>
      <td>column3</td>
    </tr>
  </table>
  
  another style
  <table style="border:none">
    <tr>
      <td colspan="3">Table with <b>widths=[100,"*","auto"]</b> and <b>heights=40</b></th>
    </tr>
    <tr>
      <td>column11</td>
      <td>column12</td>
      <td>column13</td>
    </tr>
  </table>
  `,
  { window: window }
);

//console.log(util.inspect(html, {showHidden: false, depth: null}))

var docDefinition = {
  content: [ html ]
};

var pdfDocGenerator = pdfMake.createPdf(docDefinition);
pdfDocGenerator.getBuffer(function(buffer) {
  fs.writeFileSync('examplepdf.pdf', buffer);
  console.log('--> example.pdf');
});

from html-to-pdfmake.

This is how I wrote the code, in above comment.

from html-to-pdfmake.

Thanks for sharing code. I'll check it as soon as I get a computer, probably by Monday.

from html-to-pdfmake.

I can't repeat this example:

<div data-pdfmake="{&quot;layout&quot;:&quot;noBorders&quot;}">
    <table><tr><td>Hello</td><td>World</td></tr></table>
 </div>

In the log I get the following code:

[
  { text: '', style: [] },
  { nodeName: 'DIV', stack: [ [Object] ], layout: 'noBorders' }
]

from html-to-pdfmake.