javascript - Blob 未正确生成 pdf

Question

我创建了一个 pdf 生成器服务，它调用后端来检索制作 pdf blob 所需的数据。由于某种原因，当 blob 打开时，Google Chrome(或任何与此相关的浏览器)会显示:“无法加载 PDF 文档。”我在控制台中没有收到任何错误，并且我的预览标题显示数据正在存储在我的前端值中。我的 http.post 也收到了 200 美元。下面是我的代码。

Blob 代码

    angular.module( 'utilitiesServices' ).factory( 'pdfGenerator', ['$q', '$timeout', '$window', function ($q, $timeout, $window) {


var service = {};

/**
 * @memberof pdfGenerator
 * @description
 *  Generates a pdf from given data
 **/
function _print(data) {

    if (data !== null || data !== undefined) {

        var bytes = data

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


      $timeout(function () {
          //IE compatabilty
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {

              window.navigator.msSaveOrOpenBlob(file, 'report.pdf');

          }
          else {

              var objectUrl = window.URL.createObjectURL(file);
              $window.open(objectUrl);

          }

      });

  }

};

/**
* Print the pdf
* @param data
* @returns {*}
*/
service.generatePDF = function (data) {

    var deferred = $q.defer();

    deferred.resolve(

        _print(data)

    );

    return deferred.promise;

};

return service;

}]);

调用后端获取PDF数据

service.prototype.getPDF = function (id) {

        var deferred = $q.defer();

        this.loading.GetPDF = true;

        $http.post('service/api/GetPdf', JSON.stringify(id), { responseType: 'arraybuffer' })
            .then(function successCallback(response) {

                    return deferred.resolve(response);

                },
                function errorCallback(error) {

                    return deferred.reject(error);

                });

        return deferred.promise;

    };

前端响应并调用http.post函数

    $scope.getPDF = function (id) {

        $scope.data.loading = true;                                // Show the loading graphic


        tracking.getPdf(id).then(function (data) {

            // Tell the user that the pdf data was succesfully retrieved
            ngToast.create({
                className: 'success',
                content: 'Success!'
            });

            pdfGenerator.generatePDF(data);                       // Create the pdf using the retrieved data

        }, function (error) {

            // Tell the user that there was an error getting data for the pdf
            ngToast.create({
                className: 'warning',
                content: 'Error',
                animation: 'slide'
            });

        }).finally(function () {
            $scope.data.loading = false;                        // Turn off the loading graphic
        });

    };

我尝试更改 blob 类型，仔细检查我的后端代码(检查并将正确的数据发送到前端)，并逐步执行每段代码以确保所有内容都捕获了它需要的数据。

另一双眼睛会有很大帮助。如果您需要任何其他信息，请告诉我。在过去的几天里，这个错误一直让我发疯。

Answer 1

解决了。

            pdfGenerator.generatePDF(data);                       // Create the pdf using the retrieved data

需要是:

            pdfGenerator.generatePDF(data.data);                       // Create the pdf using the retrieved data

因此只有数组缓冲区被传递到 blob，没有其他内容。