在Angularjs和WebApi中下载Excel文件xlsx

本文关键字：Excel 文件 xlsx 下载 Angularjs WebApi | 更新日期: 2023-09-27 18:00:25


我正在执行一项任务，其中我必须下载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形成应用程序，并且文件打开时也没有任何错误。
谢谢。

在Angularjs和WebApi中下载Excel文件xlsx

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

我遇到了同样的错误，内容是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);
});

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

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

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

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

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

首先安装这些模块

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用于访问文件系统和下载文件。您也可以插入imghttps://www.npmjs.com/package/exceljs#images

相关文章：