Pdf.js:使用base64文件源而不是url来呈现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").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:
data:application/pdf;base64,JVBERi0xLjUKJdDUxdgKNSAwIG9iaiA8PAovTGVuZ3RoIDE2NjUgICAgICAKL0ZpbHRlciAvRmxhdGVEZWNvZGUKPj4Kc3RyZWFtCnjarVhLc9s2...
如何做到这一点?
来自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)来检索文档。问题是XMLHttpRequest不支持data: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)
根据示例,base64编码是直接支持的,尽管我自己还没有测试过。拿你的base64字符串(从文件中派生或用任何其他方法、POST/GET、websockets等加载),用atob将其转换为二进制文件,然后在PDFJS API上解析为getDocument,如PDFJS.getDocument({data: base64PdfData});
Codetoffel答案对我来说很好。
使用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;
},
相关文章:
- 如何将PDF作为二进制文件传递到window.open()
- 生成pdf或其他非html文件时的错误处理
- 如何在不在本地下载的情况下将url中提供的文件(pdf/doc)转换为json/string/base64格式
- 无法执行文件.退出Acrobat PDF中的操作
- 下载HTML5/Javascript MOBILE应用程序中的PDF文件
- 下载所选语言的pdf文件
- 在Internet Explorer中从二进制文件打开PDF
- JavaScript代码,用于在浏览器中显示字节数组中的PDF文件(非base64编码)
- Phonegap从PDF文件中获取内容
- CSV、PDF、Excel文件在dataTables的导出扩展中作为blob下载
- 将xml文件导入pdf(Acrobat)
- 如何从地图导出图像并将其插入到新的PDF文件中
- 通过javascript获取pdf文件的表单数据
- Pdf.js:使用base64文件源而不是url来呈现Pdf文件
- 如何使用jquery在工具提示上显示pdf文件
- 在localhost/intranet上嵌入DOC、PPT、XLS、PDF文件
- 我可以使用 HTML5 文件 API 预览 PDF 吗?
- 使用 Javascript 在文件系统中打开 PDF
- 使用 php 将 pdf 文件转换为 html 文件
- 是二进制文件(pdf, word, excel, ppt, mp3,..)下载可能使用XHR或fetch