PDF.JSç使ç¨
åè¨
è±ææ¯githubä¸çåæï¼æ¾ä¸å°ä¸æèµæï¼ææ ¹æ®èªå·±ç解翻è¯çï¼æäºè¯æææ¿ä¸åå°±ç´æ¥æåè¯çå¨åå°äºï¼çè¿ä¸ªææ¡£åºè¯¥å¯ä»¥ååçç¨äºã
PDF.jsæ¯ä»ä¹
PDF.js is a Portable Document Format(PDF) viewer that is built with HTML5.PDF.js is community-driven and supportedby Mozilla Labs. Our goal is to create a general-purpose, web standards-basedplatform for parsing and rendering PDFs.
PDF.jsæ¯ä¸ä¸ªç±HTML5建ç«çPDFé 读å¨ãä¾æå¼æºç¤¾åºé©±å¨åMozillaå®éªå®¤çææ¯æ¯æãç®æ æ¯å»ºç«ä¸ä¸ªéç¨çï¼åºäºwebç解æå渲æPDFæ件çå¹³å°ãhttps://github.com/ChineseDron/pdf.js# æ¯ä»Mozillaåçä¸forkåºæ¥çä¸ä¸ªçæ¬ï¼åççé¾æ¥å¨è¿éhttps://github.com/mozilla/pdf.js åççç次æ°ä¸äºï¼æ们ç¨åçã
PDF.jsæä¹ç¨
é¦å çä¸ä¸ªdemoï¼http://mozilla.github.io/pdf.js/web/viewer.html
è¿ä¸ªvieweræè§å¾å°±æ¯PDF.jsçæç»UIãæ ¹æ®ä»¥å¾ç»éªï¼ç½ä¸è½ä¸è½½çdemoï¼ä»æ¥å°±æ²¡æè§è¿è½æ£å¸¸è¿è¡çï¼ä¸è¿æè¿æ¯æ±ç侥幸è¯äºä¸ä¸ï¼PDF.jsæç¶ä¹ä¸ä¾å¤ãä»githubä¸é¢æ们å¯ä»¥ä¸è½½PDF.js项ç®æºä»£ç ï¼exampleséæå 个demo示ä¾ï¼helloworldè¿è¡å°±æ¥éï¼æ¤å¤çç¥ç 究è¿ç¨1Wåï¼å¤§å®¶åªç¨çç»è®ºå°±å¯ä»¥äºï¼IE9æ¥éå°±å级çIE10ï¼æä¹æ¯è¯åºæ¥çï¼è¿ä¸ªæ¶åè¿ä¸ç¥éåå ãå ¶ä»çdemo示ä¾è¿è¡ä¸æ¯é¡µé¢å ¨é»å°±æ¯å ¨ç½ï¼å¯ä»¥ç´æ¥å äºã
Mozillaæä¸ä¸ªæ¯è¾ç®åçPre-builtçdemoç¨åºï¼æ¹é ä¸ä¸å°±å¯ä»¥ç¨äºã
2.1 demoç¨åºçç»æç¿»è¯
build/ |
|
pdf.js |
display layer æ¾ç¤ºå±éç¨æ ¸å¿å±å¹¶ä¸æ´é²äºä¸ä¸ªæ´å®¹æ使ç¨çAPIæ¥æ¸²æPDFæ件ï¼å¹¶è·å¾å ¶ä»çèµæåºæ件ã该APIåºäºä¸åççæ¬å·èä¸åã |
pdf.worker.js |
core layer coreå±æ¯PDF解æå解éæ ¸å¿åè½ï¼æ¯ææå ¶å®å±çåºç¡ |
web/ |
|
cmaps/ |
character maps(required by core) å符æ å°ï¼coreå±éè¦çèµæºï¼ |
compatibility.js |
polyfills for missing features Polyfilling æ¯ç± RemySharpæåºçä¸ä¸ªæ¯è¯ï¼å®æ¯ç¨æ¥æè¿°å¤å¶ç¼ºå°ç APIåAPIåè½çè¡ä¸ºã |
09.pdf |
test pdf æµè¯ç¨çpdfæ件 |
debugger.js |
helpful pdf debugging features |
images/ |
images for the viewer and annotation icons viewerçé¢çå¾æ |
l10n.js |
localization |
locale/ |
translation files ç¿»è¯æ件ï¼å å«æææ¯æè¯è¨çç¿»è¯èµæº |
viewer.css |
viewer style sheet viewerçé¢çcss |
viewer.html |
viewer html viewer主çé¢ |
viewer.js |
viewer layer viewerçé¢çjsï¼é¡µé¢åæ°å æ¬å è½½çPDFæ件路å¾é½å¨è¿é设置 |
2.2 ææ³åªè¦æ»¡è¶³ä¸é¢ä¸¤ä¸ªè¦æ±å°±ç®å¤§å®¶å¯ä»¥ç¨äº
1.æå¼ä»»ææ³æå¼çpdfæ件ï¼è¿å°±æ¯githubä¸çFAQç第ä¸ä¸ªé®é¢ï¼
2.è½å¤éè¿.netåå°å¨æçæ§å¶ä¸æå¼pdfæå ³çåæ°
第ä¸ä¸ªé®é¢ï¼
æ们åªç¨ä¿®æ¹viewer.jsæ件ä¸çpdfè·¯å¾åæ°å³å¯ï¼
var DEFAULT_URL = '09.pdf';
å¦æpdfæ件ä¸viewer.htmlä¸å¨ä¸å±ç®å½ä¸ï¼æ¹æç¸å¯¹è·¯å¾å³å¯ï¼
var DEFAULT_URL = ' ../doc/ 09.pdf';
第äºä¸ªé®é¢ï¼
viewer.htmlå¯ä»¥éè¿é¡µé¢åæ°ä¼ å¼çæ¹å¼å è½½pdfæ件ï¼æ¯å¦æ们æ³æå¼09.pdfæ件çè¯ï¼åªéè¦è¿æ ·ï¼
å æviewer.jsä¸çåæ°ä¿®æ¹ä¸ºç©ºï¼
var DEFAULT_URL = '';
ç¶åæurlæ¹å为åæ°ä¼ å¼ï¼
http://localhost:54175/PDFJSInNet/web/viewer.html?file=09.pdf
å¦æpdfæ件ä¸viewer.htmlä¸å¨ä¸å±ç®å½ä¸ï¼æ¹æç¸å¯¹è·¯å¾å³å¯ï¼
http://localhost:54175/PDFJSInNet/web/viewer.html?file=../doc/09.pdf
é常容æéè¿Visual Studioæ§å¶åå°ä»£ç å¨ææ¼åºè¿æ ·ä¸ä¸ªurlå符串ã
2.3 è¡¥å
viewerçdemoç¨åºç¤ºä¾çtoolbarå·¥å ·æ¯è¾å ¨ï¼ç¬¬äºä¸ªæ¯æå°ç¬¬ä¸ä¸ªæ¯ä¸è½½ï¼å¦ææ们åªæ³åå¨çº¿é 读ï¼ä¸è®¸ç¨æ·æå°æè ä¸è½½ææ¡£çè¯ï¼æè¿ä¸¤ä¸ªæé®éèææè å æå³å¯ï¼å¨viewer.htmlæºç 第180è¡186è¡
2.4 åè¡¥å
viewerå¨è§£æå渲æpdfçæ¶åæç¹è费系ç»èµæºï¼å°¤å ¶æ¯cpuèµæºï¼ä¸ç¥éæ¯ä¸æ¯å 为æçæ¬åé ç½®è¾ä½çç¼æ ï¼å¨é¡µé¢å è½½çå¾ çè¿ç¨ä¸ï¼IEè¿ç¨æ¶èæäºCPUèµæºç50-60%ãç¹å»ç¿»é¡µæä½ï¼æè æ¹åIEççªå£å¤§å°ä¼è§¦åviewer对pdfè¿è¡éæ°è§£æå渲æãææ¶æIEå端çæ个æ¡ä½ä»çç¨åºçªå£ï¼æ¯å¦ä¸ä¸ªtxtï¼ç§»å¼ä¹ä¼å¯¼è´éæ°æ¸²æï¼ä½æ¯å¹¶ä¸æ¯æ¯æ¬¡é½ä¼è§¦åï¼åå ä¸è¯¦ã
å¦æå¨viewer解æå渲æçè¿ç¨ä¸å°è¯ç¨adobe readerä¹ç±»çå·¥å ·æå¼é£ä¸ªpdfæ件ï¼ç³»ç»ä¼åºç°ç¬¬äºä¸ªiexplore.exe *32çè¿ç¨ï¼ææ¶æ¯AcroRd32.exe *32è¿ç¨ï¼ä¸¤ä¸ªè¿ç¨å ä¸èµ·å ä¹èå»äº100%çCPUèµæºï¼æ¤æ¶æºå¨å·²ç»æ¾å¾æ¯è¾å¡äºãå¤ç¹ä¸¤ä¸å°±ä¼åºç°é¡µé¢æªååºï¼ä½æ¯ä¸è¬æ åµä¸æ¯åæ»ï¼çå ç§å°±ä¼æ´»è¿æ¥ï¼æè¯äºå¾å¤æ¬¡è¿æ²¡æéå°çæ»çæ åµã
æç¨ä¸ä¸ª7M大çPDFæµè¯äºä¸ä¸é度ï¼è½æè§åºè§£æå渲æçæ¶é´åé¿äºï¼ä½æ¯æ¶é´è¿æ²¡æé¿å°ä¸è½å¿åï¼FAQéçæåä¸ä¸ªé®é¢ææå°ï¼
å®æ¹ä¸çFAQ
æåªéåäºæ认为å¯ä»¥ç¨å¾å°çé®é¢ã
Can Ispecify a different PDF in the default viewer?å¯ä»¥æå®ä¸ä¸ªä¸åçPDFæ件ç»vieweræå¼åï¼
You canmodify the DEFAULT_URL
variable in the web/viewer.js
file or you can append the ?file=
query string to the viewer URL, e.g.http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf
.
å¨2.2ç« èå·²ç»åçäºã
Can I load a PDF fromanother server (cross domain request)?è½å¦ä»å ¶å®æå¡å¨è¯»åpdfæ件ï¼è·¨å访é®ï¼?
Notby default, but it is possible. PDF.js runs with the same permissions as anyother JavaScript code, which means it cannot do cross origin requests (see Same origin policy and an example).There are some possible ways to get around this such as using CORS (seealso unsafeheaders issue and Access-Control-Expose-Headersissue) or setting up a proxy on your server thatwill feed PDF.js the PDF file. Both workarounds are out of the scope of thePDF.js project and we will not provide code to do either.
ä¸é»è®¤ï¼ä½å®æ¯å¯è½çã PDF.jsè¿è¡å ·æç¸åæéçä»»ä½å ¶ä»JavaScript代ç ï¼è¿æå³çå®ä¸è½è·¨åºèªèº«è¯·æ±ï¼è§åæ ¹åæºçæ¿çå示ä¾ï¼ ãæä¸äºå¯è½çæ¹æ³æ¥è§£å³è¿ä¸ªé®é¢ï¼å¦ä½¿ç¨CORS (seealso unsafe headers issue and Access-Control-Expose-Headersissue)ï¼æè è®¾ç½®ä½ çæå¡å¨ä¸ç代çï¼å°PDFæ件æä¾ç»PDF.jsãè¿ä¸¤ç§è§£å³æ¹æ³é½åºäºPDF.js项ç®çèå´ï¼æ们å°ä¸æä¾ä»£ç ï¼è¯·æ§è¡ã
What browsers are supported?æ¯æåªäºæµè§å¨?
The goal is to support all HTML5 compliant browsers, but sincefeature support varies per browser/version our support for all PDF featuresvaries as well. If you want to support more browsers than Firefox you'll needto include compatibility.jswhich has polyfills for missing features. Find the list offeatures needed for PDF.js to properly work and browser tests for thosefeatures at RequiredBrowser Features. In general, the support is below:
æ们çç®æ æ¯æ¯æææHTML5å ¼å®¹çæµè§å¨ï¼ä½æ¯æ¯ä¸ªæµè§å¨/çæ¬å¯¹PDFçææç¹æ§çæ¯ææ¯ä¸åçãå¦æä½ æ³æ¯æé¤äºFirefox以å¤çæ´å¤ç§æµè§å¨ï¼ä½ éè¦æcompatibility.jsæ件ï¼å®æpolyfills丢失çåè½ãæ³æ¥æ¾PDF.jsæ£å¸¸å·¥ä½æéçæµè§å¨çæµè¯è¦æ±ï¼è¯·åèå¦ä¸æµè§å¨ç¹æ§çå表ï¼
Browser |
Supported |
Automated Testing |
Notes |
Firefox Stable |
yes |
Windows and Linux |
|
Chrome Stable |
yes |
Windows and Linux |
|
Opera Stable |
yes |
none |
|
limited |
none |
Android's Web Browser version 4.0 or below lacks a number of features or has defects, e.g. in typed arrays or HTTP range requests |
|
Safari |
limited |
none |
Safari (desktop and mobile) lacks a number of features or has defects, e.g. in typed arrays or HTTP range requests |
IE9 |
limited |
none |
IE9 lacks a number of features and most notably typed arrays which causes subpar performance. IE9缺å°äºä¸äºåè½åææ¾ççç±»ååæ°ç»ï¼æ¯ææ§è¡¨ç°æ¬ ä½³ï¼ææ³å°äºä¹åè¿è¡åºéçhelloworld.... |
<=IE8 |
NO |
none |
IE8 and below are missing too many features to be supported. IE8å以ä¸ç¼ºå¤±å¤ªå¤çåè½ç¹æ§ä»¥è³äºæ æ³å¾å°æ¯æã |
Is it possible to add annotations to aPDF?æ¯å¦å¯ä»¥åpdfæ件添å 注解?
PDF.js is mainly written for reading PDF files, not editing them. Becauseof that we don't yet support adding any kind of annotations. We do howeversupport rendering a number of annotation types for viewing.
PDF.js主è¦æ¯åé 读PDFæ件ï¼èä¸æ¯ç¼è¾å®ä»¬ãæ£å 为å¦æ¤ï¼æ们è¿ä¸æ¯ææ·»å ä»»ä½æ³¨éãç¶èï¼æ们ä¹æ¯æ渲æä¸äºæ³¨éç±»å以ä¾æ¥çã
The PDF.js files are too big. Can you provide minified versions ofJS files?PDF.jsæ件太大ï¼å¯ä»¥æä¾ç¼©å°ççjsæ件åfiles?
ä» ä¸ºgoogleç¼è¯å¨ï¼GoogleClosure Compilerï¼æä¾
I know that my PDFs arecorrupted.Will PDF.js attempt to display it?
Yes. PDF.js will attempt to recover usable PDF data (pages,content or fonts) and display the document. Please report the issue (see above)and we will take a look.
æ¯ãPDF.jså°å°è¯æ¢å¤å¯ç¨çPDFæ°æ®ï¼é¡µï¼å 容æåä½ï¼ï¼å¹¶æ¾ç¤ºææ¡£ã
What types of PDF files are slow in PDF.js? Can I optimize a PDFfile to make PDF.js faster?ä»ä¹æ ·çpdfæ件ä¼å¯¼è´PDF.jsè¿è¡é度åæ ¢ï¼æ¯å¦å¯ä»¥ä¼åpdfæ件使PDF.jsé度åå¿«?
Typically, PDFs with a smaller filesize will be rendered faster and it depends on how big a single page is. Theamount of pages does not affect the performance. It's essential that youoptimize your documents for the web. See Optimize a PDFfromAdobe's website for more information. There are more improvement techniquesthat we can suggest:
- Avoid using high resolution images -- 150 dpi resolution for scanned images shall be enough for screens, especially for low powered devices;
- Try to use JPEG encoding for color images/photos inRGB colorspacewhen possible;
- Avoid using expensive compositions/effects such as transitions/masking --flatten transparency;
- Avoid using PDF generators (or don't create content) that produce ineffective PDF output (e.g. LibreOffice creates a lots of tiny images for vector elements/pictures it does not understand);
- If there is such a setting, use web-optimized PDF output / linearization;
- Fix or don't produce corrupted PDFs that do not conform to the PDF32000 specification.
é常æ
åµä¸ï¼ PDFæ件以æ´å°çæ件大å°å°åå¾æ´å¿«ï¼è¿åå³äºå页ï¼æ°æ®éï¼ï¼æå¤å¤§ãè¿ææ´å¤çæ¹è¿ææ¯ï¼æ们å¯ä»¥å»ºè®®ï¼
1.é¿å
使ç¨é«æ¸
æ°åº¦çå¾å- 建议ä¸è¶
è¿150dpiçå辨ççæ«æå¾åï¼å°¤å
¶æ¯å¯¹äºä½åç设å¤;
2.å¦æå¯è½çè¯ï¼å°è¯ä½¿ç¨JPEGç¼ç ç彩è²å¾åæè
æ¯RGBè²å½©çç
§ç;
3.é¿å
使ç¨å丽çæå/ææï¼å¦è½¬æ¢/å±è½- æ¼åéæ度;
4.é¿å
使ç¨PDFçæå¨ï¼æè
ä¸åé å
容ï¼äº§çæ æçPDFè¾åºï¼å¦LibreOfficeä¸å建大éçå¾®å°çå¾åï¼ç¢éå
ç´ /å¾çï¼;
5.使ç¨çç½ç»ä¼åæ ¼å¼çPDF;
6.ä¿®å¤æä¸äº§çä¸ç¬¦åPDF32000è§èçPDFæ件ã
åçç½åæé® 2015-1-19
chromeæ¯å¯ä»¥éè¿åæ°ä¼ å¼æ¹å¼æå¼PDFçï¼æç¨ççæ¬æ¯39.0.2171.95 m
åçç½åæé® 2015-7-28
å 为好å¤äººé®è½ä¸è½æ¾ç¤ºä¸æçé®é¢ï¼ææ»ç»å¤§è´å为两类é®é¢ï¼
1.è½å¦æ¾ç¤ºä¸æï¼2.è½å¦è¯»åè¿ç¨æå¡å¨ä¸çPDFï¼å æ¬ä¸ææ件åï¼
第ä¸ä¸ªé®é¢ï¼è½å¦æ¾ç¤ºä¸æï¼
é¦å ï¼æ¾ç¤ºä¸æè¯å®æ¯å¯ä»¥çï¼ä¸è®ºæ¯æ件åè¿æ¯æ件çæ£æï¼è§ä¸å¾ï¼
å¦æä½ è¯´æ¾ç¤ºä¸åºä¸æï¼ææ³æ¯ä¸æ¯ä¸é¢è¿ç§æ åµï¼
è¿å±äºjsä¸æä¹±ç é®é¢ï¼ä½ çä¸ææ件åå®å ¨æ²¡æè¯å«åºæ¥ï¼çä¸ä¸ä½ çviewer.htmlæ件å¨<head>æ è®°æ¯ä¸æ¯æè¿å¥ï¼<meta charset="utf-8">
æ¢æï¼<meta http-equiv="Content-Type" content="text/html" charset="gb2312" > å°±å¯ä»¥å¦ï¼è¯´ç½äºå°±æ¯charsetæ¢ægb2312
第ä¸ä¸ªé®é¢overã