web-dev-qa-db-ja.com

Pdf.js：URLの代わりにBase64ファイルソースを使用して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});
  });
});

しかし、この場合、URLではなくbase64にファイルがあります。

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

これをどのように行うことができますか？

javascriptpdfcanvasbase64pdf.js
63
Alex

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

ただし、型指定されたJavaScript配列を関数に渡す可能性があります。行う必要があるのは、base64文字列をUint8Arrayに変換することだけです。 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)
92
Codetoffel

例によると base64エンコーディングは直接サポートされていますが、私自身はテストしていません。 base64文字列（ファイルから派生するか、他のメソッド、POST/GET、websocketsなどでロードされる）を取得し、atobを使用してバイナリに変換し、これをPDFJS APIのgetDocumentに解析しますlikePDFJS.getDocument({data: base64PdfData}); Codetoffel answer does私にとってはうまく動作します。

2
Uzer

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;
        },
0
Akin Okegbile