Pdf.js：使用base64文件来源渲染PDF文件，而非网址 [英] Pdf.js: rendering a pdf file using a base64 file source instead of url

问题描述

我想从一个pdf.js PDF

呈现页面

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

  PDFJS.getDocument（http://www.server.com/file.pdf）。然后（函数getPdfHelloWorld（PDF）{
  //
  //读取第一页
  //
  pdf.getPage（1）。然后（函数getPageHelloWorld（页）{
    VAR规模= 1.5;
    VAR视= page.getViewport（规模）;    //
    // $ P $使用PDF页面尺寸ppare帆布
    //
    VAR帆布=的document.getElementById（'的画布'）;
    VAR上下文= canvas.getContext（'2D'）;
    canvas.height = viewport.height;
    canvas.width = viewport.width;    //
    //渲染PDF页面到帆布背景
    //
    page.render（{canvasContext：背景下，视口：视}）;
  }）;
}）;
 

但在这种情况下，我用base64文件，而不是一个网址：

<$p$p><$c$c>data:application/pdf;base64,JVBERi0xLjUKJdDUxdgKNSAwIG9iaiA8PAovTGVuZ3RoIDE2NjUgICAgICAKL0ZpbHRlciAvRmxhdGVEZWNvZGUKPj4Kc3RyZWFtCnjarVhLc9s2...

这可怎么办呢？

解决方案

从源头code。在
<一href=\"http://mozilla.github.com/pdf.js/build/pdf.js\">http://mozilla.github.com/pdf.js/build/pdf.js

  / **
 *这是主要的切入点加载PDF并与之交互。
 *注：如果URL是用来获取PDF数据的标准XMLHtt prequest（XHR）
 *使用，这意味着它必须遵循同样的原产地规则，任何不XHR
 例如*没有跨域请求，而不会CORS。
 *
 * @参数{串| TypedAray |对象}源可以是一个URL到一个PDF是
 *位置，一个类型数组（Uint8Array）已经填充了数据或
 *和具有以下可能的字段参数对象：
 *  - 网址 -  PDF的URL。
 *  - 数据 - 一个类型数组与PDF数据。
 *  -  httpHeaders  - 基本认证头。
 *  - 密码 - 用于解密密码保护的PDF文件。
 *
 * @返回{}承诺是与{} PDFDocumentProxy解决对象的承诺。
 * /
 

因此​​，一个标准XMLHtt prequest（XHR）用于检索所述文档。
这里的问题是，XMLHtt prequests不支持数据：URI的（例如数据：应用程序/ PDF格式; BASE64，JVBERi0xLjUK ...）。

但有传递类型的JavaScript数组给函数的可能性。
你需要做的唯一一件事就是以base64字符串转换为Uint8Array。您可以使用此功能在 https://gist.github.com/1032746

发现

  VAR BASE64_MARKER =';的base64;功能convertDataURIToBinary（dataURI）{
  VAR base64Index = dataURI.indexOf（BASE64_MARKER）+ BASE64_MARKER.length;
  VAR的base64 = dataURI.substring（base64Index）;
  VAR原料= window.atob的（Base64）;
  VAR rawLength = raw.length;
  VAR阵列=新Ui​​nt8Array（新ArrayBuffer（rawLength））;  对于（VAR I = 0; I＆LT; rawLength;我++）{
    数组[我] = raw.char $ C $猫（I）
  }
  返回数组;
}
 

TL;博士

  VAR pdfAsDataUri =数据：应用程序/ PDF格式; BASE64，JVBERi0xLjUK ......; //缩短
VAR pdfAsArray = convertDataURIToBinary（pdfAsDataUri）;
PDFJS.getDocument（pdfAsArray）
 

I'm trying to render a page from a pdf with pdf.js

Normally, using a url, I can do this:

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

But in this case, I have the file in base64 rather than an url:

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

How this can be done?

解决方案

from the sourcecode at 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.
 */

So a standard XMLHttpRequest(XHR) is used for retrieving the document. The Problem with this is that XMLHttpRequests do not support data: uris (eg. data:application/pdf;base64,JVBERi0xLjUK...).

But there is the possibility of passing a typed Javascript Array to the function. The only thing you need to do is to convert the base64 string to a Uint8Array. You can use this function found at 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)

这篇关于Pdf.js：使用base64文件来源渲染PDF文件，而非网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！