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

Question

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

我当前正在使用 SheetsJS 库中的 js-xlsx 。我已经使用所需的给定数据成功创建了一个excel工作表。

我将excel工作表对象转换为Blob，并使用 FileSaver.js 成功为用户提供了保存excel工作表的选项。

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');
},

该文件可以正确保存，但不完全是我想要的对话框。

我想给用户打开文件的选项，即。 “在Excel中”，如下所示：

通过将数据转换为url并将其传递到window.open（），我目前能够打开这样的CSV文件。

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