从 API 下载 AngularJS 中的文件 REST 生成的文件已损坏

Question

我已经在 API REST 上生成了一份 excel 报告并将其发送到前台 (AngularJS)。如果我直接从浏览器中点击 url，一切正常，但如果我从 Angularjs 中点击，则不会，但当我尝试打开它时说：

Excel cannot open the file 'filename.xlsx' because the file format or file extension is not valid. Verify that the file has not been corrupted and that the file extension matches the format of the file."

这是我的代码：

$http.get(urls.SERVICE_API + "informe/"+ angular.toJson(informeDTO)).then(
                            function(response) {
                                console.log(response.data);
                                console.log(response.headers('Content-Type'));

                                console.log(response.config);

                                var headers = response.headers;
                                 
                                var filename = "IOPReport.xlsx";
                                var contentType = response.headers('Content-Type');
                         
                                var linkElement = document.createElement('a');
                                try {
                                    var blob = new Blob([response.data], { type: contentType });
                                    var url = window.URL.createObjectURL(blob);
                         
                                    linkElement.setAttribute('href', url);
                                    linkElement.setAttribute("download", filename);
                         
                                    var clickEvent = new MouseEvent("click", {
                                        "view": window,
                                        "bubbles": true,
                                        "cancelable": false
                                    });
                                    linkElement.dispatchEvent(clickEvent);
                                } catch (ex) {
                                    console.log(ex);
                                }
                                console.log("GenerarInformeIOP - success");
                                deferred.resolve(response);
                            }, function(errResponse) {

                                console.log("GenerarInformeIOP - error");
                                deferred.reject(errResponse);

                            });
                    return deferred.promise;
                }

            } ]);

知道为什么不起作用吗？

Answer 1

如果是CSV，可能还需要添加BOM：

// HTTP response data
var data = response.data;
if (type === 'csv') {//Adding BOM at start of content if it is a csv
    data = '\uFEFF' + data;
}

您需要在点击之前将 linkElement 附加到正文：

var url = URL.createObjectURL(blob);
linkElement.setAttribute('href', url);
linkElement.setAttribute('download', filename);
linkElement.style.visibility = 'hidden';
document.body.appendChild(link);
linkElement.click();
document.body.removeChild(link);

Answer 2

H 我解决了将响应类型添加到 GET

    var config = { responseType: 'blob' };
                        $http.get(urls.SERVICE_API + "informe/"+ angular.toJson(informeDTO), config).then(
.....
]);

从 API 下载 AngularJS 中的文件 REST 生成的文件已损坏

Donwload file in AngularJS from API REST generate file corrupted

rest

report

download

angularjs