Angular - 下载并显示 PDF答案

【问题标题】：Angular - Download and Display PDFAngular - 下载并显示 PDF
【发布时间】：2015-11-10 12:32:03
【问题描述】：

目前正在使用

https://github.com/stranger82/angular-utf8-base64

和

https://github.com/eligrey/FileSaver.js/

解码我从其他 API 获取的 base64 编码 PDF 文件。

它可以很好地解码和下载，但是当我尝试查看它时，它是空白的。

我看过

AngularJS: Display blob (.pdf) in an angular app

并尝试添加

responseType: 'arraybuffer'

但是，对于我的 get 请求，这会导致响应为 null，并且 get 请求没有返回任何数据。

其他文件似乎下载和渲染都很好。

我们将一如既往地为您提供帮助！

代码：

          function save() {
            var fileContent = base64.decode(response.File.fileContent);
            var file = new Blob([fileContent], {type: response.File.contentType});
            saveAs(file, response.File.name);
          }

        $http.get(url.join('')).success(function(response) {
            save(response);
        }).error(function(error) {
            console.log('The following error has occured' + error);
        });

【问题讨论】：

标签： javascript angularjs pdf

【解决方案1】：

如果 API Rest 检索字节数组，您可以简单地使用这个 js 函数

OBS：data.payload 必须是字节数组调用函数： DownloadService.download(data.payload, 'downloadExcel', 'xls'); DownloadService.download(data.payload, 'downloadPDF', 'pdf');

(function() {
    'use strict';

    angular
        .module('fileUtils')
        .service('DownloadService', DownloadService);

    DownloadService.$inject = ['$window'];

    function DownloadService($window) { // jshint ignore:line

        this.download = function (fileBytes, name, type) {
            var fileName = '';
            if (name) {
                 fileName = name + '.' + type;
            } else {
                 fileName = 'download.' + type;
            }

            var byteCharacters = atob(fileBytes);
            var byteNumbers = new Array(byteCharacters.length);
            for (var i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);

            var file = new Blob([byteArray], { type: 'application/' + type });

            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(file, fileName);
            } else {
                //trick to download store a file having its URL
                var fileURL = URL.createObjectURL(file);
                var a = document.createElement('a');
                a.href = fileURL;
                a.target = '_blank';
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
            }
        };
    }
})();

【讨论】：