如何在浏览器中打开一个 Blob 对象？

Question

我目前有一个 blob 对象，我想为用户提供打开选项。

我目前正在使用 SheetsJS 库中的 js-xlsx。我已成功创建一个 excel sheet，其中包含我需要的给定数据。

我将 excel sheet 对象转换为 Blob 并使用 FileSaver.js 成功地为用户提供了保存 excel sheet.

saveAs(new Blob([s2ab(wbout)], {type:"application/octet-stream"}), 'mysheet.xlsx');

function s2ab(s: any) {
   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;            
}

这是整个函数：

exportExcel() {
  var wb = XLSX.utils.book_new();
  wb.Props = {
          Title: "SheetJS",
          Subject: "CCDB",
          Author: "CCDB",
          CreatedDate: new Date(2017,12,19)
  };

  wb.SheetNames.push("Test Sheet");
  var ws_data = this.slotData;
  ws_data.unshift(this.headers);
  ws_data.unshift(['Slots :: CCDB']);
  var ws = XLSX.utils.aoa_to_sheet(ws_data);
  var wscols = [
    {wch:8},
    {wch:25},
    {wch:25},
    {wch:15},
    {wch: 10},
    {wch: 10},
    {wch: 35},
    {},
    {}
  ];
  ws['!cols'] = wscols;
  ws['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 8 } }];
  // XLSX.utils.
  wb.Sheets["Test Sheet"] = ws;
  var wbout = XLSX.write(wb, {bookType: 'xlsx',  type: 'binary'});
  function s2ab(s: any) {

          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;

  }
  saveAs(new Blob([s2ab(wbout)], {type:"application/octet-stream"}), 'Slots CCDB.xlsx');
},

文件保存正确，但不是我想要的对话框。

我想给用户打开文件的选项，即。 "in Excel"，像这样：

我目前能够打开这样的 CSV 文件，方法是将数据转换为 url 并将其传递到 window.open()。

exportCSV() {
  let csv = 'data:text/csv;charset=utf-8,';
  const csvContent = Papa.unparse({
    fields: this.headers,
    data: this.slotData,
  });
  csv += csvContent;
  const encodedUri = encodeURI(csv);
  window.open(encodedUri);
},

虽然我似乎无法让它与 .xlsx 文件一起使用。

有人有什么想法吗？

Answer 1

好的，我想通了。

原来我只需要将类型更改为 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 即可从 blob 作为 .xlsx 文件打开！

      saveAs(new Blob([s2ab(wbout)], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      }), 'Slots CCDB.xlsx');

如何在浏览器中打开一个 Blob 对象？

How to open a Blob object in the browser?

browser

excel

blob

filesaver.js

js-xlsx