问题描述
我想从一个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。在
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。您可以使用此功能在
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阵列=新Uint8Array(新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:
How this can be done?
from the sourcecode athttp://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
tl;dr
var pdfAsDataUri = "data:application/pdf;base64,JVBERi0xLjUK..."; // shortened
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
PDFJS.getDocument(pdfAsArray)
这篇关于Pdf.js:使用base64文件来源渲染PDF文件,而非网址的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!