如何将.xlsx数据保存为blob文件

Question

我对这个问题有类似的问题(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打开.

谢谢!

Answer 1

我遇到了和你一样的问题.事实证明,您需要将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;
}

Answer 2

我找到了一个适合我的解决方案：

const handleDownload = async () => {
   const req = await axios({
     method: "get",
     url: `/companies/${company.id}/data`,
     responseType: "blob",
   });
   var blob = new Blob([req.data], {
     type: req.headers["content-type"],
   });
   const link = document.createElement("a");
   link.href = window.URL.createObjectURL(blob);
   link.download = `report_${new Date().getTime()}.xlsx`;
   link.click();
 };

我只是点了一个responseType：“blob”

Answer 3

这适用于：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 });

Answer 4

上面的答案是正确的.请确保您在数据变量中的base64中有一个字符串数据,没有任何前缀或类似原始数据的东西.

这是我在服务器端做的(asp.net mvc core):

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();

它对我来说非常适合.

Answer 5

这是我使用 fetch api 的实现。服务器端点发送字节流，客户端接收字节数组并从中创建一个 blob。然后将生成一个 .xlsx 文件。

return fetch(fullUrlEndpoint, options)
  .then((res) => {
    if (!res.ok) {
      const responseStatusText = res.statusText
      const errorMessage = `${responseStatusText}`
      throw new Error(errorMessage);
    }
    return res.arrayBuffer();
  })
    .then((ab) => {
      // BE endpoint sends a readable stream of bytes
      const byteArray = new Uint8Array(ab);
      const a = window.document.createElement('a');
      a.href = window.URL.createObjectURL(
        new Blob([byteArray], {
          type:
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        }),
      );
      a.download = `${fileName}.XLSX`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    })
    .catch(error => {
      throw new Error('Error occurred:' + error);
    });