Как создать и загрузить CSV-файл в AngularJS, используя FileSaver.js - PullRequest
Новая
       7

Как создать и загрузить CSV-файл в AngularJS, используя FileSaver.js

0 голосов
/ 24 ноября 2018

Я пытаюсь создать CSV-файл и загрузить его с помощью FileSaver.js, но у меня возникают проблемы с этим.

Вот код, который пока используется для контроллера AngularJS: 

$scope.Export = function () {
    var blob = new Blob([$scope.Data], {
        type: "text/csv;charset=utf-8"
    });
    saveAs(blob, "users.csv");
};

и $ scope.Data имеет такую ​​форму:

enter image description here

Но я получаю CSV с

[object Object], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта], [объект объекта]

Я не хочу создавать CSV путем обхода массива или создавать HTML-таблицу, чтобы затем вызывать ее функцию innerHTML.Итак, как я могу это сделать?

1 Ответ

0 голосов
/ 25 ноября 2018

Взгляните на этот пример plunkr .

Я попытался обобщить его, написав insertCommaForCSV, который может вставить запятую для CSV.Кроме того, вы можете передать настраиваемый объект заголовка. Основная логика находится в: 

function initiateDownload(data, fileName) {
    const csvStr = insertCommaForCSV(data);
    const blob = new Blob([csvStr], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) {
        // IE 10+
        navigator.msSaveBlob(blob, fileName + '.csv');
    } else {
        const link = document.createElement('a');
        if (link.download !== undefined) {
            // feature detection
            // Browsers that support HTML5 download attribute
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', fileName + '.csv');
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
  }

Убедитесь, что вы создали директиву для этого, чтобы она могла использоваться повторно в других местах.

...