PDF.JS:使用ArrayBuffer或Blob而不是URL呈现PDF
我知道与此类似的问题:Pdf.js:使用base64文件源而不是url呈现pdf文件。Codetoffel很好地回答了这个问题,但是我的问题不同之处在于,通过对我的WebAPI实现的RESTful调用来检索我的PDF。让我解释…
首先,这是使用PDF.JS通过URL打开PDF的基本方法:
PDFJS.getDocument("/api/path/to/my.pdf").then(function (pdf) { pdf.getPage(1).then(function (page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({canvasContext: context, viewport: viewport});
});
});
这很好用,但是我正在使用Angular及其$resource
服务通过我的RESTful Web
API来请求PDF。我确实知道PDF.JS允许我将URL作为PDFJS.getDocument方法(上面)中的字符串传递替换为在此处DocumentInitParams
定义的对象。使用DocumentInitParams对象的工作方式如下:
var docInitParams = { url: "/api/path/to/my.pdf",
httpHeaders: getSecurityHeaders(), //as needed
withCredentials: true
};
PDFJS.getDocument(docInitParams).then(function (pdf) {
...
});
这也可以,但是$resource
通过要求我构造api URL
可以在我的Angular上工作。但这没关系,因为PDFJS允许我直接给它提供PDF数据,而不是给它一个指向PDF的URL,如下所示:
var myPdf = myService.$getPdf({ Id: 123 });//It's an Angular $resource, so there is a promise to be fulfilled...
myPdf.$promise.then(function() {
var docInitParams = {
data: myPdf
};
PDFJS.getDocument(docInitParams).then(function (pdf) {
...
});
});
这是我似乎无法开始的工作。我可以告诉该myService.$gtPdf
方法以a
blob
或as的形式返回数据,arraybuffer
但均无效。我试图将arraybuffer返回的数据Uint8Array
也转换为太,但无济于事。
我不确定还可以尝试使用小费吗?
提前致谢。
回答:
您不是将响应数据传递给PDF.js,而是资源的一个实例:
var myPdf = myService.$getPdf({ Id: 123 });myPdf.$promise.then(function() {
var docInitParams = {
data: myPdf
您尚未显示的代码$getPdf
,但我想它等同于
var myService = $resource('/foo', {}, {$getPdf:{responseType: 'arraybuffer'}});var myPdf = myService.$getPdf();
默认情况下,AngularJS $resource
将响应视为对象(从JSON反序列化)并将任何属性从对象复制到资源实例(myPdf
在上一片段中)。
显然,由于您的响应是数组缓冲区(或Blob,类型化数组或其他),因此将无法正常工作。获得所需响应的一种方法是使用transformResponse
将响应对象包装在一个对象中:
var myService = $resource('/foo', {}, { $getPdf: {
responseType: 'arraybuffer',
transformResponse: function(data, headersGetter) {
// Stores the ArrayBuffer object in a property called "data"
return { data : data };
}
}
});
var myPdf = myService.$getPdf();
myPdf.$promise.then(function() {
var docInitParams = {
data: myPdf.data
};
PDFJS.getDocument(docInitParams).then(function (pdf) {
// ...
});
});
或者只是以下内容(避免了不必要的局部变量):
myService.$getPdf().$promise.then(function(myPdf) { PDFJS.getDocument({
data: myPdf.data
}).then(function (pdf) {
// ...
});
});
以上是 PDF.JS:使用ArrayBuffer或Blob而不是URL呈现PDF 的全部内容, 来源链接: utcz.com/qa/433254.html