pdf.jsç®ä»
PDF.js æ¯åºäºå¼æ¾ç HTML5 å JavaScript ææ¯å®ç°çå¼æºäº§åãç®å说就æ¯ä¸ä¸ª PDF
解æå¨ãè¿ç¨HTML5JavaScriptï¼å³pdf.jsä»
使ç¨å®å
¨çwebè¯è¨ï¼ä¸å
å«ä»»ä½æ»å»è
å¯ä»¥ç¨çæ¬å°ä»£ç åï¼çPDFé
读å¨pdf.jsï¼ç´æ¥å¨æ åçHTML页é¢ä¸è½½å
¥å渲æPDFæ件, è¿å¯ä»¥æé«å®å
¨æ§ï¼ä¸éè¦å®è£
第ä¸æ¹æ件ï¼å®å
¨æ§ç±æµè§å¨ä¿è¯ï¼ï¼æµè§å¨æåçå®å
¨æªæ½å·²ç»ä¸ºpdf.jsæä¾äºå®å
¨çè¿è¡ç¯å¢ãå
¶å¯¹IEå FireFoxæµè§å¨çè¦æ±æ¯IE9+, FireFox19+ã
å¨çº¿ç¤ºä¾ï¼
http://jsbin.com/pdfjs-helloworld-v2/1/edit ï¼
http://jsbin.com/pdfjs-prevnext-v2/1/editæºç ï¼
https://github.com/mozilla/pdf.jså®ç½ï¼
http://mozilla.github.io/pdf.js/pdf.js VS ä¼ ç»æµè§å¨è¯»åpdf
ä¸è¬æ¥è¯´ï¼PDFæ¡£æ¡æ ¼å¼é½æ¯å¨æµè§å¨ä¸ç±å¤æç¨å¼æ¥æç»ï¼é常æ¯Adobeèªå·±çPDF
readerææ¥èªå
¶ä»ä¾åºåçæç»å·¥å
·ï¼ä½è¿äºå¤æé常æ æ³å
åè¿ç¨PDFçç¹ç¹ï¼èä¸ç±äºå«æ大éçå信任代ç ï¼ä½¿å¾Google
Chromeæµè§å¨å¿
é¡»è¿ç¨SandBoxæ²ç®±åçï¼æ¥æ£æ¥PDFæç»å·¥å
·æ¯å¦éå°æªç¥ç
æ¯ææã
使ç¨adobeï¼å¿
é¡»å¨æ¬å°å®è£
软件æè½ä½¿ç¨ï¼èpdf.jsä¸ä¾èµç¯å¢ã渲æé度快ï¼æµè¯è¿ï¼ç¡®å®å¾å¿«ï¼ãå®å
¨æ§é«ã
pdf.js渲æPDFæ件
pdf.js渲æPDFæ件çæµç¨ï¼Fetch pdf (url / buffer) ââ> canvas ââ> 渲æ
å¦æè¦æ·±å
¥pdfç渲æï¼éè¦å»ç 究pdf.jsæºä»£ç ãpdf.jså¯éè¿pdfæ件çå°åæpdfæ°æ®æµè·åpdfï¼å
·ä½å®ç°æ¯è°ç¨æ¥å£å½æ° PDFJs.getDoc(url/buffer)å°pdfè½½å
¥htmlï¼éè¿canvaså¤ç, ç¶å渲æpdfæ件ãç½ä¸ç»åºçé½æ¯éè¿urlæ¥è·åpdfçä¾åï¼èæå¨å项ç®çæ¶åï¼åå°ï¼Pythonï¼è¦æ±æ¯åpdfçæ°æ®æµç»åå°ï¼åå°æ¥æ¶pdfçbuffer,ç¶åéè¿pdf.jsæ¥æ¸²æãå½ç¶æåå°è¯bufferåºç°äºå¾å¤é®é¢ï¼å
·ä½é®é¢æ»ç»å¦ä¸ï¼
1ï¼å¦ä½éè¿$.ajaxæ¥æ¶åå°åç»åå°çbufferæ°æ®ï¼
2ï¼å¦ä½å°bufferä¼ ç»pdf.jsæ¥å¤çï¼è¿éæ使ç¨äºviewer.js, æ以éè¦èèçæ¯å¦ä½å°bufferä¼ ç»viewer.jsæ¥å¤çï¼ï¼
3ï¼å¦ä½å°pdf.js转æ¢æpdf.jså¯ä»¥æ¥æ¶çbufferæ ¼å¼ï¼
ï¼å¯¹åºé®é¢è§£å³è§ä»£ç 注éï¼
注ï¼viewer.jsæ¯pdf.jsçæ©å±ï¼å
¶å°æå°ã翻页ã缩æ¾çåè½è¿è¡äºå®ç°ï¼ä¸çé¢é常好çãä¹å°±æ¯è¯´å¦æä½ å¼å
¥äºviewer.jsï¼pdfç渲æå渲æä¹åçåè½çé¢é½å·²ç»å¸®ä½ å®ç°äºï¼ä½ ä¸ç¨èªå·±å»åçé¢ã
å
ä»å®ç½ï¼
http://mozilla.github.io/pdf.js/ ä¸è½½ä»£ç ï¼ç¶å使ç¨æ件viewer.html
, æçhtmlå°±æ¯å¨viewer.html çåºç¡ä¸ä¿®æ¹çï¼ä¸é¢æç»åºbufferçä¾åï¼
<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="notranslate">
<title>å¨çº¿é¢è§</title>
{% load static %}{% get_static_prefix as STATIC_URL %}
<link href="{{STATIC_URL}}css/preview.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{STATIC_URL}}pdfjs/web/viewer.css"/>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/compatibility.js"></script>
<link rel="resource" type="application/l10n" href="{{STATIC_URL}}pdfjs/web/locale/locale.properties"/>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/l10n.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/build/pdf.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/debugger.js"></script>
<script src="{{STATIC_URL}}js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
//convertDataURIToBinary()
//ä¸ç¥éä»ä¹åå å¦æåå°ç´æ¥å°pdfçæ°æ®æµåç»åå°ï¼å¾å°çæ¯ä¹±ç ï¼å°æ°æ®è½¬æ¢æ Uint8Arrayå§ç»ä¸æå
//æ以就让åå°å°åéä¹åçæ°æ®æµå äºbase64ç¼ç åç»åå°ï¼åå°å解ç å¾å°çæ°æ®å°±ä¸æ¯ä¹±ç äºã
var BASE64_MARKER = ';base64,';
var preFileId = {{mark}};
//viewer.jså
¨å±åé,ä¼ å
¥bufferï¼åçé®é¢2
var DEFAULT_URL
$(document).ready(function(){
$.ajax({
type:"post",
async: false,
//ajaxæ¥æ¶pdfæ°æ®æµï¼æ³¨ædataTypeå¼ç设置æ¯å¦æéï¼å¦æä¸æå®ï¼jQueryå°èªå¨æ ¹æ®HTTPå
MIMEä¿¡æ¯è¿å
//responseXMLæresponseText
. åçé®é¢1
contentType:"application/pdf;charset=utf-8",
url:"{% url netPan.File.views.browserFuf%}",
data:{
id: preFileId
},
success:function(data){
var pdfAsDataUri = data;
//å¦æå¼å
¥äºviewer.js , å¤çæ¹æ³
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
DEFAULT_URL = pdfAsArray;
// åªå¼å
¥äºpdf.js, æªå¼å
¥viewer.jsï¼ å¤çæ¹æ³
// var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
// PDFJS.getDocumentï¼pdfAsArray).then(); èªå·±åpdfçå¤çå½æ°
}
});
});
function convertDataURIToBinary(dataURI) { //ç¼ç 转æ¢ï¼åçé®é¢3
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
//转æ¢æpdf.jsè½ç´æ¥è§£æçUint8Arrayç±»å,è§pdf.js-4068
var array = new Uint8Array(new ArrayBuffer(rawLength));
for(i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
return array;
}
</script>
<!--å
设置å
¨å±åéDEFAULT_URL çå¼ï¼æ以è¦åè°å
¥viewer.js -->
<script type="text/javascript" src="{{STATIC_URL}}pdfjs/web/viewer.js"></script>
</head>
<body>
çç¥å
容
</body>
</html>