在工作中遇到一个通过网页的形式浏览pdf文件以及图片的需求，图片简单，直接通过网页的形式打开这个图片的URL即可。而pdf这边，通过查询发现有一个名为pdf.js的神器。
简单介绍下，它可以在html中直接浏览pdf文件，pdf的每一页数据，通过H5的canvas进行解析，以及显示。其中还可以操作页数、滚动、打印、下载等功能。git上的地址为：http://mozilla.github.io/pdf.js/
网上的文档资料很多，就不记录了，直接留存通用代码。
<!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"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<title>PDF.js viewer</title> ???<link rel="stylesheet" href="viewer.css"><!-- This snippet is used in production (included from viewer.html) --><link rel="resource" type="application/l10n" href="locale/locale.properties"><script> ???var afterUrl = ?window.location.search.substring(1); ???var ???DEFAULT_URL = afterUrl;</script><script src="../build/pdf.js"></script> ???<script src="viewer.js"></script> ?</head> ?<body tabindex="1" > ???<div > ?????<div > ???????<div > ?????????<div > ???????????<button title="Show Thumbnails" tabindex="2" data-l10n-> ??????????????<span data-l10n->Thumbnails</span> ???????????</button> ???????????<button title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-> ??????????????<span data-l10n->Document Outline</span> ???????????</button> ???????????<button title="Show Attachments" tabindex="4" data-l10n-> ??????????????<span data-l10n->Attachments</span> ???????????</button> ?????????</div> ???????</div> ???????<div > ?????????<div > ?????????</div> ?????????<div > ?????????</div> ?????????<div > ?????????</div> ???????</div> ?????</div> ?<!-- sidebarContainer --> ?????<div > ???????<div > ?????????<div > ???????????<input title="Find" placeholder="Find in document…" tabindex="91" data-l10n-> ???????????<div > ?????????????<button title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-> ???????????????<span data-l10n->Previous</span> ?????????????</button> ?????????????<div ></div> ?????????????<button title="Find the next occurrence of the phrase" tabindex="93" data-l10n-> ???????????????<span data-l10n->Next</span> ?????????????</button> ???????????</div> ?????????</div> ?????????<div > ???????????<input type="checkbox" tabindex="94"> ???????????<label for="findHighlightAll" data-l10n->Highlight all</label> ???????????<input type="checkbox" tabindex="95"> ???????????<label for="findMatchCase" data-l10n->Match case</label> ???????????<span ></span> ?????????</div> ?????????<div > ???????????<span ></span> ?????????</div> ???????</div> ?<!-- findbar --> ???????<div > ?????????<div > ???????????<button title="Switch to Presentation Mode" tabindex="51" data-l10n-> ?????????????<span data-l10n->Presentation Mode</span> ???????????</button> ???????????<button title="Open File" tabindex="52" data-l10n-> ?????????????<span data-l10n->Open</span> ???????????</button> ???????????<button title="Print" tabindex="53" data-l10n-> ?????????????<span data-l10n->Print</span> ???????????</button> ???????????<button title="Download" tabindex="54" data-l10n-> ?????????????<span data-l10n->Download</span> ???????????</button> ???????????<a href="#" title="Current view (copy or open in new window)" tabindex="55" data-l10n-> ?????????????<span data-l10n->Current View</span> ???????????</a> ???????????<div ></div> ???????????<button title="Go to First Page" tabindex="56" data-l10n-> ?????????????<span data-l10n->Go to First Page</span> ???????????</button> ???????????<button title="Go to Last Page" tabindex="57" data-l10n-> ?????????????<span data-l10n->Go to Last Page</span> ???????????</button> ???????????<div ></div> ???????????<button title="Rotate Clockwise" tabindex="58" data-l10n-> ?????????????<span data-l10n->Rotate Clockwise</span> ???????????</button> ???????????<button title="Rotate Counterclockwise" tabindex="59" data-l10n-> ?????????????<span data-l10n->Rotate Counterclockwise</span> ???????????</button> ???????????<div ></div> ???????????<button title="Enable Text Selection Tool" tabindex="60" data-l10n-> ?????????????<span data-l10n->Text Selection Tool</span> ???????????</button> ???????????<button title="Enable Hand Tool" tabindex="61" data-l10n-> ?????????????<span data-l10n->Hand Tool</span> ???????????</button> ???????????<div ></div> ???????????<button title="Document Properties…" tabindex="62" data-l10n-> ?????????????<span data-l10n->Document Properties…</span> ???????????</button> ?????????</div> ???????</div> ?<!-- secondaryToolbar --> ???????<div > ?????????<div > ???????????<div > ?????????????<div > ???????????????<button title="Toggle Sidebar" tabindex="11" data-l10n-> ?????????????????<span data-l10n->Toggle Sidebar</span> ???????????????</button> ???????????????<div ></div> ???????????????<button title="Find in Document" tabindex="12" data-l10n-> ?????????????????<span data-l10n->Find</span> ???????????????</button> ???????????????<div > ?????????????????<button title="Previous Page" tabindex="13" data-l10n-> ???????????????????<span data-l10n->Previous</span> ?????????????????</button> ?????????????????<div ></div> ?????????????????<button title="Next Page" tabindex="14" data-l10n-> ???????????????????<span data-l10n->Next</span> ?????????????????</button> ???????????????</div> ???????????????<input type="number" title="Page" value="1" size="4" min="1" tabindex="15" data-l10n-> ???????????????<span ></span> ?????????????</div> ?????????????<div > ???????????????<button title="Switch to Presentation Mode" tabindex="31" data-l10n-> ?????????????????<span data-l10n->Presentation Mode</span> ???????????????</button> ???????????????<button title="Open File" tabindex="32" data-l10n-> ?????????????????<span data-l10n->Open</span> ???????????????</button> ???????????????<button title="Print" tabindex="33" data-l10n-> ?????????????????<span data-l10n->Print</span> ???????????????</button> ???????????????<button title="Download" tabindex="34" data-l10n-> ?????????????????<span data-l10n->Download</span> ???????????????</button> ???????????????<a href="#" title="Current view (copy or open in new window)" tabindex="35" data-l10n-> ?????????????????<span data-l10n->Current View</span> ???????????????</a> ???????????????<div ></div> ???????????????<button title="Tools" tabindex="36" data-l10n-> ?????????????????<span data-l10n->Tools</span> ???????????????</button> ?????????????</div> ?????????????<div > ???????????????<div > ?????????????????<button title="Zoom Out" tabindex="21" data-l10n-> ???????????????????<span data-l10n->Zoom Out</span> ?????????????????</button> ?????????????????<div ></div> ?????????????????<button title="Zoom In" tabindex="22" data-l10n-> ???????????????????<span data-l10n->Zoom In</span> ??????????????????</button> ???????????????</div> ???????????????<span > ?????????????????<select title="Zoom" tabindex="23" data-l10n-> ???????????????????<option title="" value="auto" selected="selected" data-l10n->Automatic Zoom</option> ???????????????????<option title="" value="page-actual" data-l10n->Actual Size</option> ???????????????????<option title="" value="page-fit" data-l10n->Page Fit</option> ???????????????????<option title="" value="page-width" data-l10n->Page Width</option> ???????????????????<option title="" value="custom" disabled="disabled" hidden="true"></option> ???????????????????<option title="" value="0.5" data-l10n- data-l10n-args=‘{ "scale": 50 }‘>50%</option> ???????????????????<option title="" value="0.75" data-l10n- data-l10n-args=‘{ "scale": 75 }‘>75%</option> ???????????????????<option title="" value="1" data-l10n- data-l10n-args=‘{ "scale": 100 }‘>100%</option> ???????????????????<option title="" value="1.25" data-l10n- data-l10n-args=‘{ "scale": 125 }‘>125%</option> ???????????????????<option title="" value="1.5" data-l10n- data-l10n-args=‘{ "scale": 150 }‘>150%</option> ???????????????????<option title="" value="2" data-l10n- data-l10n-args=‘{ "scale": 200 }‘>200%</option> ???????????????????<option title="" value="3" data-l10n- data-l10n-args=‘{ "scale": 300 }‘>300%</option> ???????????????????<option title="" value="4" data-l10n- data-l10n-args=‘{ "scale": 400 }‘>400%</option> ?????????????????</select> ???????????????</span> ?????????????</div> ???????????</div> ???????????<div > ?????????????<div > ???????????????<div > ???????????????</div> ?????????????</div> ???????????</div> ?????????</div> ???????</div> ???????<menu type="context" > ?????????<menuitem label="First Page" ???????????????????data-l10n-></menuitem> ?????????<menuitem label="Last Page" ???????????????????data-l10n-></menuitem> ?????????<menuitem label="Rotate Clockwise" ???????????????????data-l10n-></menuitem> ?????????<menuitem label="Rotate Counter-Clockwise" ???????????????????data-l10n-></menuitem> ???????</menu> ???????<div tabindex="0"> ?????????<div ></div> ???????</div> ???????<div hidden=‘true‘> ?????????<div > ???????????<span ></span> ???????????<button data-l10n-> ?????????????More Information ???????????</button> ???????????<button data-l10n- hidden=‘true‘> ?????????????Less Information ???????????</button> ?????????</div> ?????????<div > ???????????<button data-l10n-> ?????????????Close ???????????</button> ?????????</div> ?????????<div ></div> ?????????<textarea hidden=‘true‘ readonly="readonly"></textarea> ???????</div> ?????</div> <!-- mainContainer --> ?????<div > ???????<div > ?????????<div > ???????????<div > ?????????????<p data-l10n->Enter the password to open this PDF file:</p> ???????????</div> ???????????<div > ?????????????<input type="password" > ???????????</div> ???????????<div > ?????????????<button ><span data-l10n->Cancel</span></button> ?????????????<button ><span data-l10n->OK</span></button> ???????????</div> ?????????</div> ???????</div> ???????<div > ?????????<div > ???????????<div > ?????????????<span data-l10n->File name:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<span data-l10n->File size:</span> <p >-</p> ???????????</div> ???????????<div ></div> ???????????<div > ?????????????<span data-l10n->Title:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<span data-l10n->Author:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<span data-l10n->Subject:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<span data-l10n->Keywords:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<span data-l10n->Creation Date:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<span data-l10n->Modification Date:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<span data-l10n->Creator:</span> <p >-</p> ???????????</div> ???????????<div ></div> ???????????<div > ?????????????<span data-l10n->PDF Producer:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<span data-l10n->PDF Version:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<span data-l10n->Page Count:</span> <p >-</p> ???????????</div> ???????????<div > ?????????????<button ><span data-l10n->Close</span></button> ???????????</div> ?????????</div> ???????</div> ???????<div > ?????????<div > ???????????<div > ?????????????<span data-l10n->Preparing document for printing…</span> ???????????</div> ???????????<div > ?????????????<progress value="0" max="100"></progress> ?????????????<span data-l10n- data-l10n-args=‘{ "progress": 0 }‘ >0%</span> ???????????</div> ???????????<div > ?????????????<button ><span data-l10n->Cancel</span></button> ???????????</div> ?????????</div> ???????</div> ?????</div> ?<!-- overlayContainer --> ???</div> <!-- outerContainer --> ???<div ></div> ?</body></html>改文件名为viewer 使用时可以xxxxxxxxx/viewer.html?xxxxxxxx/xx.pdf，直接把pdf的URL作为?后的参数放置在URL中，即可用系统默认的功能和样式进行访问pdf文件，在非互联网系统，个人认为这样的处理方式比较实用
实用git上最新的版本的只用在viewer的html代码中加入
var afterUrl = ?window.location.search.substring(1);var DEFAULT_URL = afterUrl;
给全局的下的默认文件URL DEFAULT_URL赋值即可
记录下工作中使用的pdf.js
原文地址：http://www.cnblogs.com/skyHF/p/7815535.html