Javascript 如何将 .xlsx 数据作为 blob 保存到文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34993292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to save .xlsx data to file as a blob
提问by gm2008
I have a similar question to this question(Javascript: Exporting large text/csv file crashes Google Chrome):
我有一个与此问题类似的问题（Javascript：导出大文本/csv 文件会导致 Google Chrome 崩溃）：
I am trying to save the data created by excelbuilder.js's EB.createFile()function. If I put the file data as the hrefattribute value of a link, it works. However, when data is big, it crashes Chrome browser. Codes are like this:
我正在尝试保存由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);
My codes to create the data using excelbuilder.js is like follows:
我使用 excelbuilder.js 创建数据的代码如下：
var artistWorkbook = EB.createWorkbook();
var albumList = artistWorkbook.createWorksheet({name: 'Album List'});
albumList.setData(originalData);
artistWorkbook.addWorksheet(albumList);
var data = EB.createFile(artistWorkbook);
As suggested by the answer of the similar question (Javascript: Exporting large text/csv file crashes Google Chrome), a blob needs to be created.
正如类似问题（Javascript：导出大文本/csv文件崩溃谷歌浏览器）的答案所建议的那样，需要创建一个blob。
My problem is, what is saved in the file isn't a valid Excel file that can be opened by Excel. The codes that I use to save the blobis like this:
我的问题是，文件中保存的不是 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();
If I replace the [data]in the above codes with [Base64.decode(data)], the contents in the file saved looks more like the expected excel data, but still cannot be opened by Excel.
如果我将[data]上面代码中的替换为，[Base64.decode(data)]保存的文件中的内容看起来更像预期的excel数据，但仍然无法被Excel打开。
Thanks!
谢谢！
回答by Ron T
I had the same problem as you. It turns out you need to convert the Excel data file to an ArrayBuffer.
我和你有同样的问题。事实证明，您需要将 Excel 数据文件转换为 ArrayBuffer。
var blob = new Blob([s2ab(atob(data))], {
type: ''
});
href = URL.createObjectURL(blob);
The s2ab (string to array buffer) method (which I got from https://github.com/SheetJS/js-xlsx/blob/master/README.md) is:
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;
}
回答by Vitalii Bratok
The answer aboveis correct. Please be sure that you have a string data in base64 in the data variable without any prefix or stuff like that just raw data.
上面的答案是正确的。请确保您在 data 变量中有一个 base64 格式的字符串数据，没有任何前缀或类似原始数据的东西。
Here's what I did on the server side (asp.net mvc core):
这是我在服务器端（asp.net mvc 核心）所做的：
string path = Path.Combine(folder, fileName);
Byte[] bytes = System.IO.File.ReadAllBytes(path);
string base64 = Convert.ToBase64String(bytes);
On the client side, I did the following code:
在客户端，我做了以下代码：
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();
And it works perfectly for me.
它非常适合我。
回答by David Dehghan
This works as of: v0.14.0 of https://github.com/SheetJS/js-xlsx
这适用于：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 });
回答by Vyacheslav
try FileSaver.jslibrary. it might help.
试试FileSaver.js图书馆。它可能会有所帮助。
回答by bamossza
Solution for me.
为我解决。
Step: 1
第1步
<a onclick="exportAsExcel()">Export to excel</a>
Step: 2
第2步
I'm using file-saver lib.
我正在使用文件保护程序库。
Read more: https://www.npmjs.com/package/file-saver
阅读更多：https: //www.npmjs.com/package/file-saver
npm i file-saver
Step: 3
步骤：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 });
}
Work for me. ^^
为我工作。^^
