Pdf.js: render một file pdf sử dụng một nguồn tập tin base64 thay vì url

Question

Tôi đang cố gắng để làm cho một trang từ một pdf với pdf.js

Thông thường, sử dụng một url, tôi có thể làm điều này:

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

Nhưng trong trường hợp này, tôi có tập tin trong base64 chứ không phải là một địa chỉ:

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

làm thế nào điều này có thể được thực hiện?

Answer 1

từ sourcecode tại 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. 
*/ 

Vì vậy, một XMLHttpRequest chuẩn (XHR) được sử dụng để lấy tài liệu. Vấn đề với điều này là XMLHttpRequests không hỗ trợ dữ liệu: uris (ví dụ: dữ liệu: application/pdf; base64, JVBERi0xLjUK ...).

Nhưng có khả năng chuyển một Mảng Javascript đã nhập vào hàm. Điều duy nhất bạn cần làm là chuyển đổi chuỗi base64 thành Uint8Array. Bạn có thể sử dụng chức năng này tìm thấy tại https://gist.github.com/1032746

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) 

Answer 2

sử dụng các trả lời được chấp nhận để làm một tấm séc cho IE và chuyển đổi các dataURI để UInt8Array; một hình thức chấp nhận bởi 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; 
 
     },

Answer 3

According to the examples mã hóa base64 được trực tiếp hỗ trợ, mặc dù tôi đã không kiểm tra nó bản thân mình. Lấy chuỗi base64 của bạn (bắt nguồn từ một tệp hoặc được nạp với bất kỳ phương thức nào khác, POST/GET, websockets etc), biến nó thành nhị phân có atob và sau đó phân tích cú pháp này thành getDocument trên API PDFJS như PDFJS.getDocument({data: base64PdfData}); Câu trả lời Codetoffel chỉ hoạt động tốt cho tôi mặc dù.