Как сэкономить.xlsx данные в файл в виде blob
у меня есть аналогичный вопрос к этому вопросу (Javascript: экспорт больших текстовых / csv-файлов сбой Google Chrome):
Я пытаюсь сохранить данные, созданные excelbuilder.js ' s . Если я помещу данные файла как 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.
спасибо!
4 ответов
у меня была та же проблема, что и у вас. Оказывается, вам нужно преобразовать файл данных Excel в ArrayBuffer.
var blob = new Blob([s2ab(atob(data))], {
type: ''
});
href = URL.createObjectURL(blob);
метод s2ab (string to array buffer) (который я получил от 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 в переменной данных без префикса или что-то вроде этого просто необработанные данные.
вот что я сделал на стороне сервера (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();
и он отлично работает для меня.
решение для меня.
Шаг 1
<a onclick="exportAsExcel()">Export to excel</a>
Шаг 2
Я использую файл-saver 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 });
}
работать на меня. ^^