我正在尝试使用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; }
tl; dr
var pdfAsDataUri = "data:application/pdf;base64,JVBERi0xLjUK..."; // shortened var pdfAsArray = convertDataURIToBinary(pdfAsDataUri); PDFJS.getDocument(pdfAsArray)