pdf.js:使用base64文件源而不是url渲染pdf文件

我正在尝试使用pdf.js从pdf渲染页面

通常,使用网址,我可以这样做:

PDFJS.getDocument("http://www.server.com/file.pdf").then(function getPdfHelloWorld(pdf) {

//

// Fetch the first page

//

pdf.getPage(1).then(function getPageHelloWorld(page) {

var scale = 1.5;

var viewport = page.getViewport(scale);

//

// Prepare canvas using PDF page dimensions

//

var canvas = document.getElementById('the-canvas');

var context = canvas.getContext('2d');

canvas.height = viewport.height;

canvas.width = viewport.width;

//

// Render PDF page into canvas context

//

page.render({canvasContext: context, viewport: viewport});

});

});

但是在这种情况下,我将文件放在base64中而不是url中:

data:application/pdf;base64,JVBERi0xLjUKJdDUxdgKNSAwIG9iaiA8PAovTGVuZ3RoIDE2NjUgICAgICAKL0ZpbHRlciAvRmxhdGVEZWNvZGUKPj4Kc3RyZWFtCnjarVhLc9s2...

如何做到这一点?

回答:

从http://mozilla.github.com/pdf.js/build/pdf.js的源代码中

/**

* This is the main entry point for loading a PDF and interacting with it.

* NOTE: If a URL is used to fetch the PDF data a standard XMLHttpRequest(XHR)

* is used, which means it must follow the same origin rules that any XHR does

* e.g. No cross domain requests without CORS.

*

* @param {string|TypedAray|object} source Can be an url to where a PDF is

* located, a typed array (Uint8Array) already populated with data or

* and parameter object with the following possible fields:

* - url - The URL of the PDF.

* - data - A typed array with PDF data.

* - httpHeaders - Basic authentication headers.

* - password - For decrypting password-protected PDFs.

*

* @return {Promise} A promise that is resolved with {PDFDocumentProxy} object.

*/

因此,使用标准XMLHttpRequest(XHR)来检索文档。问题在于XMLHttpRequests不支持数据:uris(例如data:application/ pdf; base64,JVBERi0xLjUK …)。

var BASE64_MARKER = ';base64,';

function convertDataURIToBinary(dataURI) {

var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;

var base64 = dataURI.substring(base64Index);

var raw = window.atob(base64);

var rawLength = raw.length;

var array = new Uint8Array(new ArrayBuffer(rawLength));

for(var i = 0; i < rawLength; i++) {

array[i] = raw.charCodeAt(i);

}

return array;

}

var pdfAsDataUri = "data:application/pdf;base64,JVBERi0xLjUK..."; // shortened

var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);

PDFJS.getDocument(pdfAsArray)

以上是 pdf.js:使用base64文件源而不是url渲染pdf文件 的全部内容, 来源链接: utcz.com/qa/426033.html

回到顶部