How to add cell border to SheetJS .xlsx generated file?

Question

I have a SheetJS .xlsx generated file, but I have not been able to put border to the cells.

I have this:

And I need this:

Is there a way to do it with SheetJS? It will be cool if there's a way to apply another cell styles, like background color.

EDIT:

I'm making the sheets with this function:

function makeSheet(wb, day){        //sheet for a specific day
    var ws = XLSX.utils.table_to_sheet(document.getElementById("table"+day));
    wb.SheetNames.push(day);
    wb.Sheets[day] = ws;
    //columns width working ok
    wb["Sheets"][day]["!cols"] = [{ wpx : 70 },{ wpx : 121 }];
    //wb["Sheets"][day]["A1"]["s"] = {"border":"1px"};  //I've tried this but doesn't work
  return wb;
}

EDIT 2

I've created this example snippet, if you can put borders and/or another cell style here, that's going to be a victory:

$(document).ready(myMain);
function myMain(){
  $(document).on("click","#btnexcel", function(){makeExcel()});
}
function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}
function makeExcel(){
 var wb = XLSX.utils.table_to_book(document.getElementById("myTable"),{sheet:"Sheet 1"}) //my html table

 var wbout = XLSX.write(wb, {bookType:'xlsx',  bookSST:true, type: 'binary'});
 saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), 'MyExcel.xlsx');
}

<!-- JQuery  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.13/xlsx.full.min.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>

<button id="btnexcel">Download excel</button>
<table id="myTable" border="1">
  <thead><tr><th>hello</th><th>dear community</th></tr></thead>
  <tbody>
    <tr><td>I need borders</td><td>around here</td></tr>
    <tr><td>I'll be glad</td><td>if you help me</td></tr>
  </tbody>
</table>

Can you post your code as snippet using codepen/jsfiddle/plunker etc? That would be easy to debug — Vikasdeep Singh, May 29 '18 at 01:08
please make a code snippet. I can not execute and see the output. — Vikasdeep Singh, May 29 '18 at 02:44
What problem you are having? Where are you trying to create snippet? Try to add `cdn` link of lib — Vikasdeep Singh, May 29 '18 at 04:06

Vikasdeep Singh · Accepted Answer · 2019-02-22T02:54:27.133

9

You are using community version of SheetJS library and with this version can not do styling. BUT in Pro Version styling feature is available.

Checkout this official comment:

This is the community version. We also offer a pro version with performance enhancements, additional features like styling, and dedicated support.

For more information about Pro Version visit their official site: http://sheetjs.com/pro

edited Feb 22 '19 at 02:54

answered May 30 '18 at 01:06

Vikasdeep Singh

17,777
9
70
93

2

I've sent an email and will see how much it will cost. – Roberto Sepúlveda Bravo May 30 '18 at 23:18

score 1 · Answer 2 · answered May 09 '18 at 14:08

1

var wscols = [{wpx: 100}];
ws['!cols'] = wscols ;

answered May 09 '18 at 14:08

Varun Rayen

136
1
7

1

I've tried this and doesn't work, can you explain how to make this work? – Roberto Sepúlveda Bravo May 28 '18 at 21:34
@RobertoSepúlvedaBravo hey, I know it's so late to ask this question, but.... you know.. Did you get it work? – Chawchawchaw May 20 '20 at 07:10
@Chawchawchaw I didn't but should be possible with sheetjs pro version. – Roberto Sepúlveda Bravo May 29 '20 at 14:21
@RobertoSepúlvedaBravo Thanks for reply. :) – Chawchawchaw Jun 01 '20 at 01:04

How to add cell border to SheetJS .xlsx generated file?

2 Answers2