我创建了一个 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 类型，仔细检查我的后端代码(检查并将正确的数据发送到前端)，并逐步执行每段代码以确保所有内容都捕获了它需要的数据。
另一双眼睛会有很大帮助。如果您需要任何其他信息，请告诉我。在过去的几天里，这个错误一直让我发疯。
最佳答案
解决了。
pdfGenerator.generatePDF(data); // Create the pdf using the retrieved data
需要是:
pdfGenerator.generatePDF(data.data); // Create the pdf using the retrieved data
因此只有数组缓冲区被传递到 blob，没有其他内容。
关于javascript - Blob 未正确生成 pdf，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60416262/