Как сохранить данные.xlsx в файл в виде большого двоичного объекта

У меня есть вопрос, похожий на этот вопрос ( 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), необходимо создать большой двоичный объект.

Моя проблема в том, что то, что сохраняется в файле, не является допустимым файлом 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.

Спасибо!

Источник

9 ответов

Решение

У меня была такая же проблема, как и у вас. Оказывается, вам нужно преобразовать файл данных 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;
}
Источник

Ответ выше правильный. Пожалуйста, убедитесь, что у вас есть строковые данные в base64 в переменной data без префикса или чего-то подобного, просто необработанные данные.

Вот что я сделал на стороне сервера (ядро 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();

И это прекрасно работает для меня.

Источник

Я нашел решение, сработавшее для меня:

      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"

Источник

Это работает с: v0.14.0 из https://github.com/SheetJS/js-xlsx

/* 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 });
Источник

Вот моя реализация с использованием API выборки. Конечная точка сервера отправляет поток байтов, а клиент получает массив байтов и создает из него большой двоичный объект. После этого будет создан файл.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);
    });
Источник

Решение для меня.

Шаг 1

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

Шаг 2

Я использую файл-заставку lib.

Подробнее: 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 });
}

Работа для меня. ^^

Источник

Пытаться FileSaver.js библиотека. это может помочь.

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

Источник

Этот ответ зависит от того, имеют ли интерфейс и серверную часть совместимый объект возврата, что дает логику как внешнего, так и внутреннего интерфейса. Чтобы следующая логика работала, убедитесь, что данные, возвращаемые сервером, имеют кодировку base64.

      // Backend code written in nodejs to generate XLS from CSV
import * as XLSX from 'xlsx';

export const convertCsvToExcelBuffer = (csvString: string) => {
  const arrayOfArrayCsv = csvString.split("\n").map((row: string) => {
    return row.split(",")
  });
  const wb = XLSX.utils.book_new();
  const newWs = XLSX.utils.aoa_to_sheet(arrayOfArrayCsv);
  XLSX.utils.book_append_sheet(wb, newWs);
  const rawExcel = XLSX.write(wb, { type: 'base64' })
  // set res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
  // to include content type information to frontend. 
  return rawExcel
}

      //frontend logic to get the backend response and download file. 

// function from Ron T's answer which gets a string from ArrayBuffer. 
const 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;
};

const downloadExcelInBrowser = ()=>{
  const excelFileData = await backendCall();
  const decodedFileData = atob(excelFileData.data);
  const arrayBufferContent = s2ab(decodedFileData); // from example above
  const blob = new Blob([arrayBufferContent], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });
  var URL = window.URL || window.webkitURL;
  var downloadUrl = URL.createObjectURL(fileBlob);
  if (filename) {
    // use HTML5 a[download] attribute to specify filename
    var a = document.createElement('a');
    // safari doesn't support this yet
    if (typeof a.download === 'undefined') {
      window.location.href = downloadUrl;
    } else {
      a.href = downloadUrl;
      a.download = 'test.xlsx';
      document.body.appendChild(a);
      a.click();
    }
  } else {
    window.location.href = downloadUrl;
  }
}
Источник

если вы используете машинописный текст, то вот рабочий пример того, как преобразовать массив в xlsx и загрузить его.

      const fileName = "CustomersTemplate";
    const fileExtension = ".xlsx";
    const fullFileName = fileName.concat(fileExtension);

    const workBook : WorkBook = utils.book_new();

    const content : WorkSheet = utils.json_to_sheet([{"column 1": "data", "column 2": "data"}]);

    utils.book_append_sheet(workBook, content, fileName);

    const buffer : any = writeFile(workBook, fullFileName);

    const data : Blob = new Blob(buffer, { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;" });

    const url = URL.createObjectURL(data); //some browser may use window.URL
    
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.href = url;
    a.download = fullFileName;
    a.click();
    
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }, 0);
Источник
Другие вопросы по тегам