web-dev-qa-db-ja.com

クライアント側のJavaScriptを使用して、可能であればjs-xlsxライブラリを使用して、いくつかのスタイルでExcelファイルを作成します。

Excelファイル（。xlsx形式で）を作成し、それを使用してダウンロードできるようにしたいクライアント側JavaScript。 js-xlsxライブラリを使用してサンプルファイルを作成できました。しかし、スタイルを適用することはできません。 background colorto header、を含む少なくともいくつかの基本スタイル太字フォントヘッダーおよびテキストの折り返しセルには必須です。

js-xlsxライブラリドキュメントには、 Cell Object を使用してスタイルを指定できることが記載されています。

セルオブジェクトを使用してスタイルを指定しようとしましたが、ダウンロードした.xlsxファイルに反映されていません。 .xlsxファイルを読み込んで、XLSX.write（）関数を使用して同じファイルを書き戻してみました。ただし、スタイルがまったくないExcelファイルが返されます。 理想的には、ダウンロードされたファイルはアップロードされたファイルと同じスタイルを持っていると思います。再作成されたファイルにはフォントの色や背景色は適用されませんでした。ダウンロードしたファイルのテストには、Excel 2013を使用します。

アップロードの前後にExcelのスクリーンショットを見つけてください。

オリジナルファイル

enter image description here

ダウンロードしたファイル

enter image description here

コードは次のとおりです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="xlsx.core.min.js"></script>
<script type="text/javascript" src="Blob.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>

<script>

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;
}   

/* set up XMLHttpRequest */
var url = "template-sample.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";

oReq.onload = function(e) {
  var arraybuffer = oReq.response;

  /* convert data to binary string */
  var data = new Uint8Array(arraybuffer);
  var arr = new Array();
  for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
  var bstr = arr.join("");

  /* Call XLSX */
  var workbook = XLSX.read(bstr, {type:"binary", cellStyles:true});

    console.log("read workbook");
    console.log(workbook);
  /* DO SOMETHING WITH workbook HERE */
    var wbout = XLSX.write(workbook, {bookType:'xlsx', bookSST:true, type: 'binary', cellStyles: true});
    saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "template-download.xlsx");

}

function read(){
    oReq.send();    
}


</script>


</head>
<body>
    <button onclick="read()">save xlsx</button>
</body></html>

サンプルコードは here から取得しました。

私が楽しみにしているのは、js-xlsxライブラリまたはこの機能を提供する別のライブラリを使用してセルにスタイルを与えるオプションです。 exceljs という名前のライブラリを見つけましたが、node jsが必要ですそれをサポートします。私は純粋にクライアントサイドベースのソリューションを探しています。これは、Cordovaベースのタブレットおよびデスクトップアプリケーションに使用されます。

javascriptexcelcordovajs-xlsx
13
Nithin Baby

いくつかの調査の後、私は自分の質問に対する解決策を見つけることができました。スタイルを指定するための xlsx-style という名前の新しいライブラリが見つかりました。 xlsx-styleは、スタイルを与えるためにjs-xlsxの上に構築されます生成されたExcelファイルにも。セルオブジェクト内の新しい属性を使用して、スタイルをセルに与えることができます。

説明はnpm xlsx-style ページにあります。

スタイリングは、各セルに関連付けられたスタイルオブジェクトを使用して与えられます。このスタイルオブジェクトを使用して、フォント、色、配置などを指定できます。

githubページ にミニマリストのデモを追加しました。サンプルコードは、この githubリポジトリ で入手できます。

生成されたExcelページのスクリーンショットは以下にあります。 enter image description here

16
Nithin Baby

xlsx-style を使用して、foreach youtコレクション「WorkSheet」を追加し、「WorkBook」に追加する前にスタイルを追加します。このプロセスを担当するプロパティは「s」（スタイル）です。

サンプル：

_.forEach(ws, (v, c) => {
    if (c !== '!ref') {
        if (header.indexOf(v.v) >= 0) {
            ws[c]['s'] = {
                fill: {
                patternType: 'solid', // none / solid
                fgColor: {rgb: 'FFD3D3D3'}
                }
            }
        }
    }
})
0
Darlan Dieterich