web-dev-qa-db-ja.com

.xlsxデータをblobとしてファイルに保存する方法

私はこの質問に似た質問があります（ Javascript：大きなテキスト/ csvファイルをエクスポートするとGoogle Chromeがクラッシュします ）：

excelbuilder.jsのEB.createFile()関数によって作成されたデータを保存しようとしています。ファイルデータをリンクのhref属性値として配置すると、機能します。ただし、データが大きい場合、クラッシュしますChromeブラウザ。コードは次のようになります。

_//generate a temp <a /> tag
var link = document.createElement("a");
link.href = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' + encodeURIComponent(data);
link.style = "visibility:hidden";
link.download = fileName;

document.body.appendChild(link);
link.click();
document.body.removeChild(link);
_

Excelbuilder.jsを使用してデータを作成するコードは次のとおりです。

_var artistWorkbook = EB.createWorkbook();
var albumList = artistWorkbook.createWorksheet({name: 'Album List'});

albumList.setData(originalData); 

artistWorkbook.addWorksheet(albumList);

var data = EB.createFile(artistWorkbook);
_

同様の質問（ Javascript：大きいテキスト/ csvファイルをエクスポートするとGoogle Chromeがクラッシュします ）の回答で示唆されているように、blobを作成する必要があります。

私の問題は、ファイルに保存されているのは、Excelで開くことができる有効なExcelファイルではないということです。 blobの保存に使用するコードは次のとおりです。

_var blob = new Blob(
    [data],
    {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,"}
);

// Programatically create a link and click it:
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = fileName;
a.click();
_

上記のコードの_[data]_を[Base64.decode(data)]に置き換えた場合、保存されたファイルの内容は期待されるExcelデータのように見えますが、Excelで開くことはできません。

ありがとう！

javascriptxlsxbloburls
18
gm2008

私はあなたと同じ問題を抱えていました。 ExcelデータファイルをArrayBufferに変換する必要があることがわかりました。

var blob = new Blob([s2ab(atob(data))], {
    type: ''
});

href = URL.createObjectURL(blob);

S2ab（文字列から配列バッファ）メソッド（ https://github.com/SheetJS/js-xlsx/blob/master/README.md から取得した）は次のとおりです。

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;
}
24
Ron T

答え 上記 は正しいです。データ変数にbase64の文字列データが含まれていることを確認してください。プレフィックスやそのような生データはありません。

サーバー側（asp.net mvcコア）で行ったことは次のとおりです。

string path = Path.Combine(folder, fileName);
Byte[] bytes = System.IO.File.ReadAllBytes(path);
string base64 = Convert.ToBase64String(bytes);

クライアント側では、次のコードを実行しました。

const xhr = new XMLHttpRequest();

xhr.open("GET", url);
xhr.setRequestHeader("Content-Type", "text/plain");

xhr.onload = () => {
    var bin = atob(xhr.response);
    var ab = s2ab(bin); // from example above
    var blob = new Blob([ab], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });

    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'demo.xlsx';

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);
};

xhr.send();

そして、それは私にとって完璧に機能します。

7
Vitalii Bratok

これは https://github.com/SheetJS/js-xlsx のv0.14.0の時点で機能します

/* generate array buffer */
var wbout = XLSX.write(wb, {type:"array", bookType:'xlsx'});
/* create data URL */
var url = URL.createObjectURL(new Blob([wbout], {type: 'application/octet-stream'}));
/* trigger download with chrome API */
chrome.downloads.download({ url: url, filename: "testsheet.xlsx", saveAs: true });
3
David Dehghan

試して_FileSaver.js 図書館。役立つかもしれません。

https://github.com/eligrey/FileSaver.js/

2
Vyacheslav

私のためのソリューション。

ステップ1

<a onclick="exportAsExcel()">Export to Excel</a>

ステップ2

ファイルセーバーライブラリを使用しています。

続きを読む： https://www.npmjs.com/package/file-saver

npm i file-saver

ステップ：3

let FileSaver = require('file-saver'); // path to file-saver

function exportAsExcel() {
    let dataBlob = '...kAAAAFAAIcmtzaGVldHMvc2hlZXQxLnhtbFBLBQYAAAAACQAJAD8CAADdGAAAAAA='; // If have ; You should be split get blob data only
    this.downloadFile(dataBlob);
}

function downloadFile(blobContent){
    let blob = new Blob([base64toBlob(blobContent, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')], {});
    FileSaver.saveAs(blob, 'report.xlsx');
}

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    let sliceSize = 1024;
    let byteCharacters = atob(base64Data);
    let bytesLength = byteCharacters.length;
    let slicesCount = Math.ceil(bytesLength / sliceSize);
    let byteArrays = new Array(slicesCount);
    for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        let begin = sliceIndex * sliceSize;
        let end = Math.min(begin + sliceSize, bytesLength);

        let bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

私のために働きます。 ^^

0
bamossza