it-roy-ru.com

Скачивание файла Excel xlsx в Angularjs и WebApi


Я работаю над заданием, в котором мне нужно загрузить отчет в формате xlsx. Файл отчета успешно генерируется с сервера, а также на стороне клиента. Но это не открытие и создание ошибки неверного формата.

Ниже приведен код серверной части.

var output = await reportObj.GetExcelData(rParams);
    if (output != null){
        var result = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = new ByteArrayContent(output.ConentBytes)
        };
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = output.FileName
        };
 return result;
 }


Вот код для клиентской стороны:

        var saveData = function (response) {

        if (response.status === 200) {
            var reportData = response.data;

            var b = new Blob([reportData], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
            saveAs(b,"ReportFile.xlsx");//this is FileSaver.js function
        } else {
            console.log(response.statusText);
        }

    };


    $scope.getExcelFile = function(reportName, reportParams) {

        reportDataService.getExcelReportData(reportName, reportParams, saveData);

    }


ниже сообщение об ошибке:
Excel не смог открыть newFile.xlsx, потому что некоторые материалы не читаются. Хотите открыть и починить эту книгу?

При нажатии кнопки "Восстановить" появляется следующая ошибка: Excel не может открыть этот файл.
Неверный формат файла или расширение файла. Убедитесь, что файл не был поврежден и что расширение файла соответствует формату файла.

Кто-нибудь может подсказать мне, что я делаю неправильно? Между тем, одни и те же объекты генератора файлов на стороне сервера работают в приложении форм ASP.Net плавно, и файл также открывается без ошибок.
Спасибо.

13
Nadeem Jamali

Я ожидаю, что в вашем вызове $http отсутствует конфигурация типа ответа. Вот как я загружаю офисные файлы:

function download(url, defaultFileName) {
    var self = this;
    var deferred = $q.defer();
    $http.get(url, { responseType: "arraybuffer" }).then(
        function (data, status, headers) {
            var type = headers('Content-Type');
            var disposition = headers('Content-Disposition');
            if (disposition) {
                var match = disposition.match(/.*filename=\"?([^;\"]+)\"?.*/);
                if (match[1])
                    defaultFileName = match[1];
            }
            defaultFileName = defaultFileName.replace(/[<>:"\/\\|?*]+/g, '_');
            var blob = new Blob([data], { type: type });
            saveAs(blob, defaultFileName);
            deferred.resolve(defaultFileName);                    
        }, function (data, status) {
            var e = /* error */
            deferred.reject(e);
        });
    return deferred.promise;
}
36
hansmaad

Вам просто нужно сделать только одно, чтобы . Включить следующие js, чтобы сохранить файл локально. Загрузите его с " https://github.com/eligrey/FileSaver.js/ " Ваши данные ответов должны быть в блоб-типе.

Я реализовал это и его работа.

function downloadfile(url,defaultFileName){
  var self = this;
    var deferred = $q.defer();
    $http.get(url, { responseType: "blob" }).then(
       function (data){
          saveAs(data.data, defaultFileName)
          deferred.resolve(defaultFileName);                    
        }, function (data) {
           var e = /* error */
            deferred.reject(e);
        });
        return deferred.promise;
}
2
Pradeep Korriya

Я столкнулся с той же ошибкой, содержимое было в формате hexa, поэтому я добавил тип ответа как arraybuffer, проблема была решена. пожалуйста, смотрите ниже.

$http({
    url: '/api/sendPMOToBackendUpdate',
    method: "POST",
    headers: {'Content-type': 'application/json'},
    data: backendTsData,
    responseType: 'arraybuffer'
}).success(function(data, status, headers){
    var file = new Blob([ data ], { type : 'application/vnd.ms-Excel'});
    var defaultFileName ="TSC-"+$scope.user.name+"-"+$scope.user.ohrId+".xls";
    saveAs(file,defaultFileName);
}).error(function(err) {
    console.log('Error: ' + err);
});
0
Mithun Kumar

Я столкнулся с подобной проблемой при написании Excel с использованием библиотеки Javascript Excel Builder. В конце я обнаружил, что причина в том, что в данные был включен управляющий символ «\ u001a». 

Решение состоит в том, чтобы закодировать контрольный символ в формате Excel как _x001a_. 

Способ, которым я диагностировал проблему, был таким: 

Файл .xlsx - это просто заархивированный XML-файл. Вы можете открыть его с 7-Zip. Внутри папки xl/ находится файл sharedString.xml, содержащий все строки. Извлеките файл и откройте его с помощью Notepad ++. Если вы видите какой-либо управляющий символ, это может быть причиной. 

0
gm2008