在Angularjs和WebApi中下载Excel文件xlsx

时间:2015-06-30 09:50:42

标签: javascript c# angularjs excel asp.net-web-api


我正在处理一项任务,我必须以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表单应用程序中运行顺畅,文件打开时也没有任何错误。
谢谢。

5 个答案:

答案 0 :(得分:36)

我希望您的$http调用缺少响应类型配置。这是我下载office文件的方式:

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;
}

答案 1 :(得分:2)

你只需要做一件事。 包括以下js以在本地保存文件。从中下载 “https://github.com/eligrey/FileSaver.js/” 您的响应数据应为blob类型。

我已经实施了它并且正在实施它。

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 :(得分:0)

使用Javascript库Excel Builder编写excel时遇到了类似的问题。最后,我发现原因是一个控制角色&#39; \ u001a&#39;被包括在数据中。

解决方案是以Excel的方式对控件字符进行编码为&#39; _x001a _&#39;。

我诊断问题的方式是这样的:

.xlsx文件只是一个压缩的xml文件。你可以用7拉链打开它。在xl/文件夹中,有一个包含所有字符串的文件sharedString.xml。解压缩文件并使用Notepad ++打开它。如果你看到任何控制字符,那么它可能是原因。

答案 3 :(得分:0)

我遇到了同样的错误,内容是六进制格式,所以我添加了一个响应类型作为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);
});

答案 4 :(得分:0)

首先安装这些模块

import * as Excel from 'exceljs';
import * as fs from 'file-saver';

在您的函数中编写这些

 const workbook = new Excel.Workbook();
  var worksheet =  workbook.addWorksheet('sheet');
  worksheet.columns = [
    { header: 'Id', key: 'id', width: 10 },
    { header: 'Name', key: 'name', width: 32 }
  ];
 var buff = workbook.xlsx.writeBuffer().then(function (data) {
    var blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
    fs.saveAs(blob, "publications.xlsx");
  });

Fs用于访问文件系统和下载文件。您还可以插入img https://www.npmjs.com/package/exceljs#images