在 Angularjs 和 WebApi 中下载 Excel 文件 xlsx

Question

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

Answer 1

我希望您的 $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;
}

Answer 2

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

Answer 3

你只需要做一件事。 包括以下 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;
}

Answer 4

我在使用 Javascript 库 Excel Builder 编写 excel 时遇到了类似的问题。最后，我发现原因是数据中包含了一个控制字符'\u001a'。

解决方案是以 Excel 的方式将控制字符编码为“_x001a_”。

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

.xlsx 文件只是一个压缩的 xml 文件。您可以使用 7-zip 打开它。在 xl/ 文件夹内有一个文件 sharedString.xml 包含所有字符串。提取文件并使用 Notepad++ 打开它。如果您看到任何控制字符，则可能是原因。

Answer 5

首先安装这些模块

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