从$ http.get下载时,PDF为空白

时间:2018-01-11 00:40:50

标签: angularjs api pdf

我正在从AngularJS $http.get调用中检索PDF,但是当它下载PDF时,它只是一个空白页面。有点奇怪的是,如果我打开网络选项卡并查看应用程序获取该PDF的URL,我可以复制该URL并在另一个选项卡中打开它,并且下载PDF就好了。但是当我通过AngularJS $http.get时,它就会变成空白。这是我的设置:

控制器

function downloadPdf() {
    ReportsService
    .downloadPdf(var1, var2, var3)
    .then(function(response) {
        var ieEDGE = navigator.userAgent.match(/Edge/g);
        var ie = navigator.userAgent.match(/.NET/g); // IE
        var oldIE = navigator.userAgent.match(/MSIE/g);

        var contentType = response.headers("Content-Type");
        var contentDisposition = response.headers("Content-Disposition");
        // parse to get filename
        var filename = (contentDisposition.split(';')[1].trim().split('=')[1]).replace(/"/g, '');
        // IE browsers
        if ((ie || oldIE || ieEDGE) && (navigator.msSaveOrOpenBlob)) {
            var blob = new window.Blob([ response.data ],{type : contentType});
            window.navigator.msSaveOrOpenBlob(blob, filename);
        }
        // Chrome  browser
        else {
            var file = new Blob([ response.data ],{type : contentType});
            var a = document.createElement('a');
            a.href = URL.createObjectURL(file);
            a.target = '_blank'; 
            a.download = filename   
            document.body.appendChild(a); 
            a.click();    
        }
    });
}

服务

function downloadPdf(var1, var2, var3) {
    var params = {
        "var1" : var1,
        "var2" : var2,
        "var3" : var3
    };
    return $http.get(url, {params : params}, {responseType:"arraybuffer"});
}

当我在控制器中调用downloadPdf()函数时,它可以正常下载PDF。但是当我打开它时,它只是一个空白的空白页面。但是,再次,如果我打开网络选项卡以查看它刚刚进入的URL,那么URL就是它应该是如何使用参数和所有内容。然后我可以在另一个选项卡中打开相同的URL,然后再次下载PDF,这次它不是空的并且包含我需要的数据。所以看起来我的控制器类以某种方式弄乱了下载,虽然这与我在同一个应用程序中下载CSV文件使用的逻辑相同,逻辑结构也是一样的,并且工作得很好。

我尝试使用contentTypeapplication/pdf中进行硬编码,但这也无效。而且空PDF确实有正确的文件名,只是里面的内容丢失了。

1 个答案:

答案 0 :(得分:0)

我希望有人可以提出一个更清洁的解决方案,但这是我刚才提出的目前的脏修复方法。我只是使用window.open打开网址,并使用$httpParamSerializer构建该网址

<强>服务

function downloadPdf(var1, var2, var3) {
    var params = {
        "var1" : var1,
        "var2" : var2,
        "var3" : var3
    };
    //return $http.get(url, {params : params}, {responseType:"arraybuffer"});
    window.open(url + "?" + $httpParamSerializer(params));
}

我认为是一个肮脏的修复,但它现在正在工作。我将此问题保留为无人问津,因为我真的希望有人可以来修改原始代码以使其正常工作!