Pdf.js：使用base64文件源代替url来渲染pdf文件

我正在尝试使用pdf.js来显示PDF格式的页面

通常，使用url，我可以这样做：

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... 

如何做到这一点？

Answer 1

来自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 * eg 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 …）。

但是有可能将一个types化的Javascript数组传递给函数。 唯一需要做的是将base64string转换为Uint8Array。 你可以使用这个函数在https://gist.github.com/1032746find

 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; } 

TL;博士

 var pdfAsDataUri = "data:application/pdf;base64,JVBERi0xLjUK..."; // shortened var pdfAsArray = convertDataURIToBinary(pdfAsDataUri); PDFJS.getDocument(pdfAsArray) 

Answer 2

使用Accepted Answer来检查IE并将dataURI转换为UInt8Array; 一个由PDFJS接受的表格

  Ext.isIE ? pdfAsDataUri = me.convertDataURIToBinary(pdfAsDataUri): ''; convertDataURIToBinary: function(dataURI) { var BASE64_MARKER = ';base64,', base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length, base64 = dataURI.substring(base64Index), raw = window.atob(base64), rawLength = raw.length, array = new Uint8Array(new ArrayBuffer(rawLength)); for (var i = 0; i < rawLength; i++) { array[i] = raw.charCodeAt(i); } return array; },