时间戳

首页 > 解决方案 > 在 AngularJS 中从 API REST 加载文件生成文件已损坏

angularjs - 在 AngularJS 中从 API REST 加载文件生成文件已损坏

问题描述

我已经生成了一个关于 API REST 的 excel 报告并将其发送到前面（AngularJS）。如果我直接从浏览器点击 url，一切正常，但如果我从 Angularjs 执行，则不会，但是当我尝试打开它时说：

Excel 无法打开文件“filename.xlsx”，因为文件格式或文件扩展名无效。验证文件没有损坏，并且文件扩展名与文件格式匹配。”

这是我的代码：

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

            } ]);

知道为什么不工作吗？

标签： angularjsrestdownloadreport

解决方案

如果是 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);

推荐阅读