12

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

I have this:

enter image description here

And I need this:

enter image description here

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>

6
  • Can you post your code as snippet using codepen/jsfiddle/plunker etc? That would be easy to debug May 29, 2018 at 1:08
  • @VicJordan I've added part of my code. May 29, 2018 at 2:41
  • please make a code snippet. I can not execute and see the output. May 29, 2018 at 2:44
  • I had problems importing the required libraries. May 29, 2018 at 3:00
  • 1
    @VicJordan I've added a snippet, see my second edit. May 29, 2018 at 12:12

2 Answers 2

11
+50

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

2
  • 2
    I've sent an email and will see how much it will cost. May 30, 2018 at 23:18
  • 1
    @RobertoSepúlvedaBravo have you got the reply? how much is the pro version cost? Aug 31, 2021 at 12:19
1
var wscols = [{wpx: 100}];
ws['!cols'] = wscols ;
4
  • 2
    I've tried this and doesn't work, can you explain how to make this work? May 28, 2018 at 21:34
  • @RobertoSepúlvedaBravo hey, I know it's so late to ask this question, but.... you know.. Did you get it work? May 20, 2020 at 7:10
  • @Chawchawchaw I didn't but should be possible with sheetjs pro version. May 29, 2020 at 14:21
  • @RobertoSepúlvedaBravo Thanks for reply. :) Jun 1, 2020 at 1:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.