关于javascript：Pdf.js：使用base64文件源而不是url呈现pdf文件

Pdf.js: rendering a pdf file using a base64 file source instead of url

我正在尝试使用pdf.js从pdf渲染页面

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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中：

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

如何做到这一点？

从源代码
http://mozilla.github.com/pdf.js/build/pdf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**
* 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的此功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

1
2
3

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