viewer.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
  1. <!DOCTYPE html>
  2. <!--
  3. Copyright 2012 Mozilla Foundation
  4. Licensed under the Apache License, Version 2.0 (the "License");
  5. you may not use this file except in compliance with the License.
  6. You may obtain a copy of the License at
  7. http://www.apache.org/licenses/LICENSE-2.0
  8. Unless required by applicable law or agreed to in writing, software
  9. distributed under the License is distributed on an "AS IS" BASIS,
  10. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  11. See the License for the specific language governing permissions and
  12. limitations under the License.
  13. Adobe CMap resources are covered by their own copyright but the same license:
  14. Copyright 1990-2015 Adobe Systems Incorporated.
  15. See https://github.com/adobe-type-tools/cmap-resources
  16. *Pdf.js插件 csdn@多甘范科夫斯基 2022/09/27 你可以在本html中修改页面ui 包括手势和是否打开下载,打印功能(去除display:none)
  17. -->
  18. <html dir="ltr" mozdisallowselectionprint>
  19. <head>
  20. <meta charset="utf-8">
  21. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  22. <meta name="google" content="notranslate">
  23. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  24. <title>PDF播放器</title>
  25. <link rel="stylesheet" href="viewer.css">
  26. <!-- This snippet is used in production (included from viewer.html) -->
  27. <link rel="resource" type="application/l10n" href="locale/locale.properties">
  28. <script src="../build/pdf.js" type="text/javascript"></script>
  29. <script src="viewer.js"></script>
  30. </head>
  31. <body tabindex="1" class="loadingInProgress">
  32. <div id="outerContainer">
  33. <div id="sidebarContainer">
  34. <div id="toolbarSidebar">
  35. <div class="splitToolbarButton toggled">
  36. <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2"
  37. data-l10n-id="thumbs">
  38. <span data-l10n-id="thumbs_label">Thumbnails</span>
  39. </button>
  40. <button id="viewOutline" class="toolbarButton"
  41. title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3"
  42. data-l10n-id="document_outline">
  43. <span data-l10n-id="document_outline_label">Document Outline</span>
  44. </button>
  45. <button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4"
  46. data-l10n-id="attachments">
  47. <span data-l10n-id="attachments_label">Attachments</span>
  48. </button>
  49. </div>
  50. </div>
  51. <div id="sidebarContent">
  52. <div id="thumbnailView">
  53. </div>
  54. <div id="outlineView" class="hidden">
  55. </div>
  56. <div id="attachmentsView" class="hidden">
  57. </div>
  58. </div>
  59. <div id="sidebarResizer" class="hidden"></div>
  60. </div> <!-- sidebarContainer -->
  61. <div id="mainContainer">
  62. <div class="findbar hidden doorHanger" id="findbar">
  63. <div id="findbarInputContainer">
  64. <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…"
  65. tabindex="91" data-l10n-id="find_input">
  66. <div class="splitToolbarButton">
  67. <button id="findPrevious" class="toolbarButton findPrevious"
  68. title="Find the previous occurrence of the phrase" tabindex="92"
  69. data-l10n-id="find_previous">
  70. <span data-l10n-id="find_previous_label">Previous</span>
  71. </button>
  72. <div class="splitToolbarButtonSeparator"></div>
  73. <button id="findNext" class="toolbarButton findNext"
  74. title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="find_next">
  75. <span data-l10n-id="find_next_label">Next</span>
  76. </button>
  77. </div>
  78. </div>
  79. <div id="findbarOptionsOneContainer">
  80. <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
  81. <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight
  82. all</label>
  83. <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
  84. <label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match
  85. case</label>
  86. </div>
  87. <div id="findbarOptionsTwoContainer">
  88. <input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="96">
  89. <label for="findEntireWord" class="toolbarLabel" data-l10n-id="find_entire_word_label">Whole
  90. words</label>
  91. <span id="findResultsCount" class="toolbarLabel hidden"></span>
  92. </div>
  93. <div id="findbarMessageContainer">
  94. <span id="findMsg" class="toolbarLabel"></span>
  95. </div>
  96. </div> <!-- findbar -->
  97. <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
  98. <div id="secondaryToolbarButtonContainer">
  99. <!-- 播放模式 -->
  100. <button id="secondaryPresentationMode" style="display:none;"
  101. class="secondaryToolbarButton presentationMode visibleLargeView"
  102. title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
  103. <span data-l10n-id="presentation_mode_label">演示模式</span>
  104. </button>
  105. <button id="secondaryOpenFile" style="display:none;"
  106. class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="52"
  107. data-l10n-id="open_file">
  108. <span data-l10n-id="open_file_label">Open</span>
  109. </button>
  110. <!-- 打印按钮 -->
  111. <button id="secondaryPrint" style="display:none;"
  112. class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="53"
  113. data-l10n-id="print">
  114. <span data-l10n-id="print_label">Print</span>
  115. </button>
  116. <!-- 下载按钮 -->
  117. <button id="secondaryDownload" style="display:none;"
  118. class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="54"
  119. data-l10n-id="download">
  120. <span data-l10n-id="download_label">Download</span>
  121. </button>
  122. <a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView"
  123. title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
  124. <span data-l10n-id="bookmark_label">Current View</span>
  125. </a>
  126. <div class="horizontalToolbarSeparator visibleLargeView"></div>
  127. <button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page"
  128. tabindex="56" data-l10n-id="first_page">
  129. <span data-l10n-id="first_page_label">去第一页</span>
  130. </button>
  131. <button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page"
  132. tabindex="57" data-l10n-id="last_page">
  133. <span data-l10n-id="last_page_label">去最后一页</span>
  134. </button>
  135. <div class="horizontalToolbarSeparator"></div>
  136. <button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise"
  137. tabindex="58" data-l10n-id="page_rotate_cw">
  138. <span data-l10n-id="page_rotate_cw_label">顺时针旋转</span>
  139. </button>
  140. <button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw"
  141. title="Rotate Counterclockwise" tabindex="59" data-l10n-id="page_rotate_ccw">
  142. <span data-l10n-id="page_rotate_ccw_label">逆时针旋转</span>
  143. </button>
  144. <div class="horizontalToolbarSeparator"></div>
  145. <button id="cursorSelectTool" class="secondaryToolbarButton selectTool toggled"
  146. title="Enable Text Selection Tool" tabindex="60" data-l10n-id="cursor_text_select_tool">
  147. <span data-l10n-id="cursor_text_select_tool_label">文本选择工具</span>
  148. </button>
  149. <button id="cursorHandTool" class="secondaryToolbarButton handTool" title="Enable Hand Tool"
  150. tabindex="61" data-l10n-id="cursor_hand_tool">
  151. <span data-l10n-id="cursor_hand_tool_label">手形工具</span>
  152. </button>
  153. <div class="horizontalToolbarSeparator"></div>
  154. <button id="scrollVertical"
  155. class="secondaryToolbarButton scrollModeButtons scrollVertical toggled"
  156. title="Use Vertical Scrolling" tabindex="62" data-l10n-id="scroll_vertical">
  157. <span data-l10n-id="scroll_vertical_label">垂直播放</span>
  158. </button>
  159. <!-- 水平播放 -->
  160. <button id="scrollHorizontal"
  161. class="secondaryToolbarButton scrollModeButtons scrollHorizontal "
  162. title="Use Horizontal Scrolling" tabindex="63" data-l10n-id="scroll_horizontal">
  163. <span data-l10n-id="scroll_horizontal_label">水平播放(推荐)</span>
  164. </button>
  165. <button id="scrollWrapped" class="secondaryToolbarButton scrollModeButtons scrollWrapped"
  166. title="Use Wrapped Scrolling" tabindex="64" data-l10n-id="scroll_wrapped">
  167. <span data-l10n-id="scroll_wrapped_label">平铺滚动</span>
  168. </button>
  169. <div class="horizontalToolbarSeparator scrollModeButtons"></div>
  170. <button id="spreadNone" class="secondaryToolbarButton spreadModeButtons spreadNone toggled"
  171. title="Do not join page spreads" tabindex="65" data-l10n-id="spread_none">
  172. <span data-l10n-id="spread_none_label">No Spreads</span>
  173. </button>
  174. <button id="spreadOdd" class="secondaryToolbarButton spreadModeButtons spreadOdd"
  175. title="Join page spreads starting with odd-numbered pages" tabindex="66"
  176. data-l10n-id="spread_odd">
  177. <span data-l10n-id="spread_odd_label">Odd Spreads</span>
  178. </button>
  179. <button id="spreadEven" class="secondaryToolbarButton spreadModeButtons spreadEven"
  180. title="Join page spreads starting with even-numbered pages" tabindex="67"
  181. data-l10n-id="spread_even">
  182. <span data-l10n-id="spread_even_label">Even Spreads</span>
  183. </button>
  184. <div class="horizontalToolbarSeparator spreadModeButtons"></div>
  185. <button id="documentProperties" class="secondaryToolbarButton documentProperties"
  186. title="Document Properties…" tabindex="68" data-l10n-id="document_properties">
  187. <span data-l10n-id="document_properties_label">Document Properties…</span>
  188. </button>
  189. </div>
  190. </div> <!-- secondaryToolbar -->
  191. <div class="toolbar">
  192. <div id="toolbarContainer">
  193. <div id="toolbarViewer">
  194. <div id="toolbarViewerLeft">
  195. <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11"
  196. data-l10n-id="toggle_sidebar">
  197. <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
  198. </button>
  199. <div class="toolbarButtonSpacer"></div>
  200. <button id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12"
  201. data-l10n-id="findbar">
  202. <span data-l10n-id="findbar_label">Find</span>
  203. </button>
  204. <div class="splitToolbarButton hiddenSmallView">
  205. <button class="toolbarButton pageUp" title="Previous Page" id="previous"
  206. tabindex="13" data-l10n-id="previous">
  207. <span data-l10n-id="previous_label">Previous</span>
  208. </button>
  209. <div class="splitToolbarButtonSeparator"></div>
  210. <button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="14"
  211. data-l10n-id="next">
  212. <span data-l10n-id="next_label">Next</span>
  213. </button>
  214. </div>
  215. <input type="number" id="pageNumber" class="toolbarField pageNumber" title="Page"
  216. value="1" size="4" min="1" tabindex="15" data-l10n-id="page">
  217. <span id="numPages" class="toolbarLabel"></span>
  218. </div>
  219. <div id="toolbarViewerRight">
  220. <button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView"
  221. title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
  222. <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
  223. </button>
  224. <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File"
  225. tabindex="32" data-l10n-id="open_file">
  226. <span data-l10n-id="open_file_label">Open</span>
  227. </button>
  228. <button id="print" class="toolbarButton print hiddenMediumView" title="Print"
  229. tabindex="33" data-l10n-id="print">
  230. <span data-l10n-id="print_label">Print</span>
  231. </button>
  232. <button id="download" class="toolbarButton download hiddenMediumView" title="Download"
  233. tabindex="34" data-l10n-id="download">
  234. <span data-l10n-id="download_label">Download</span>
  235. </button>
  236. <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView"
  237. title="Current view (copy or open in new window)" tabindex="35"
  238. data-l10n-id="bookmark">
  239. <span data-l10n-id="bookmark_label">Current View</span>
  240. </a>
  241. <div class="verticalToolbarSeparator hiddenSmallView"></div>
  242. <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36"
  243. data-l10n-id="tools">
  244. <span data-l10n-id="tools_label">工具</span>
  245. </button>
  246. </div>
  247. <div id="toolbarViewerMiddle">
  248. <div class="splitToolbarButton">
  249. <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21"
  250. data-l10n-id="zoom_out">
  251. <span data-l10n-id="zoom_out_label">Zoom Out</span>
  252. </button>
  253. <div class="splitToolbarButtonSeparator"></div>
  254. <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22"
  255. data-l10n-id="zoom_in">
  256. <span data-l10n-id="zoom_in_label">Zoom In</span>
  257. </button>
  258. </div>
  259. <span id="scaleSelectContainer" class="dropdownToolbarButton">
  260. <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
  261. <option id="pageAutoOption" title="" value="auto" selected="selected"
  262. data-l10n-id="page_scale_auto">Automatic Zoom</option>
  263. <option id="pageActualOption" title="" value="page-actual"
  264. data-l10n-id="page_scale_actual">Actual Size</option>
  265. <option id="pageFitOption" title="" value="page-fit"
  266. data-l10n-id="page_scale_fit">Page Fit</option>
  267. <option id="pageWidthOption" title="" value="page-width"
  268. data-l10n-id="page_scale_width">Page Width</option>
  269. <option id="customScaleOption" title="" value="custom" disabled="disabled"
  270. hidden="true"></option>
  271. <option title="" value="0.5" data-l10n-id="page_scale_percent"
  272. data-l10n-args='{ "scale": 50 }'>50%</option>
  273. <option title="" value="0.75" data-l10n-id="page_scale_percent"
  274. data-l10n-args='{ "scale": 75 }'>75%</option>
  275. <option title="" value="1" data-l10n-id="page_scale_percent"
  276. data-l10n-args='{ "scale": 100 }'>100%</option>
  277. <option title="" value="1.25" data-l10n-id="page_scale_percent"
  278. data-l10n-args='{ "scale": 125 }'>125%</option>
  279. <option title="" value="1.5" data-l10n-id="page_scale_percent"
  280. data-l10n-args='{ "scale": 150 }'>150%</option>
  281. <option title="" value="2" data-l10n-id="page_scale_percent"
  282. data-l10n-args='{ "scale": 200 }'>200%</option>
  283. <option title="" value="3" data-l10n-id="page_scale_percent"
  284. data-l10n-args='{ "scale": 300 }'>300%</option>
  285. <option title="" value="4" data-l10n-id="page_scale_percent"
  286. data-l10n-args='{ "scale": 400 }'>400%</option>
  287. </select>
  288. </span>
  289. </div>
  290. </div>
  291. <div id="loadingBar">
  292. <div class="progress">
  293. <div class="glimmer">
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. </div>
  299. <menu type="context" id="viewerContextMenu">
  300. <menuitem id="contextFirstPage" label="First Page" data-l10n-id="first_page">
  301. </menuitem>
  302. <menuitem id="contextLastPage" label="Last Page" data-l10n-id="last_page">
  303. </menuitem>
  304. <menuitem id="contextPageRotateCw" label="Rotate Clockwise" data-l10n-id="page_rotate_cw">
  305. </menuitem>
  306. <menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise" data-l10n-id="page_rotate_ccw">
  307. </menuitem>
  308. </menu>
  309. <div id="viewerContainer" tabindex="0">
  310. <div id="viewer" class="pdfViewer scrollHorizontal"></div>
  311. </div>
  312. <div id="errorWrapper" hidden='true'>
  313. <div id="errorMessageLeft">
  314. <span id="errorMessage"></span>
  315. <button id="errorShowMore" data-l10n-id="error_more_info">
  316. More Information
  317. </button>
  318. <button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
  319. Less Information
  320. </button>
  321. </div>
  322. <div id="errorMessageRight">
  323. <button id="errorClose" data-l10n-id="error_close">
  324. Close
  325. </button>
  326. </div>
  327. <div class="clearBoth"></div>
  328. <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
  329. </div>
  330. </div> <!-- mainContainer -->
  331. <div id="overlayContainer" class="hidden">
  332. <div id="passwordOverlay" class="container hidden">
  333. <div class="dialog">
  334. <div class="row">
  335. <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:
  336. </p>
  337. </div>
  338. <div class="row">
  339. <input type="password" id="password" class="toolbarField">
  340. </div>
  341. <div class="buttonRow">
  342. <button id="passwordCancel" class="overlayButton"><span
  343. data-l10n-id="password_cancel">Cancel</span></button>
  344. <button id="passwordSubmit" class="overlayButton"><span
  345. data-l10n-id="password_ok">OK</span></button>
  346. </div>
  347. </div>
  348. </div>
  349. <div id="documentPropertiesOverlay" class="container hidden">
  350. <div class="dialog">
  351. <div class="row">
  352. <span data-l10n-id="document_properties_file_name">File name:</span>
  353. <p id="fileNameField">-</p>
  354. </div>
  355. <div class="row">
  356. <span data-l10n-id="document_properties_file_size">File size:</span>
  357. <p id="fileSizeField">-</p>
  358. </div>
  359. <div class="separator"></div>
  360. <div class="row">
  361. <span data-l10n-id="document_properties_title">Title:</span>
  362. <p id="titleField">-</p>
  363. </div>
  364. <div class="row">
  365. <span data-l10n-id="document_properties_author">Author:</span>
  366. <p id="authorField">-</p>
  367. </div>
  368. <div class="row">
  369. <span data-l10n-id="document_properties_subject">Subject:</span>
  370. <p id="subjectField">-</p>
  371. </div>
  372. <div class="row">
  373. <span data-l10n-id="document_properties_keywords">Keywords:</span>
  374. <p id="keywordsField">-</p>
  375. </div>
  376. <div class="row">
  377. <span data-l10n-id="document_properties_creation_date">Creation Date:</span>
  378. <p id="creationDateField">-</p>
  379. </div>
  380. <div class="row">
  381. <span data-l10n-id="document_properties_modification_date">Modification Date:</span>
  382. <p id="modificationDateField">-</p>
  383. </div>
  384. <div class="row">
  385. <span data-l10n-id="document_properties_creator">Creator:</span>
  386. <p id="creatorField">-</p>
  387. </div>
  388. <div class="separator"></div>
  389. <div class="row">
  390. <span data-l10n-id="document_properties_producer">PDF Producer:</span>
  391. <p id="producerField">-</p>
  392. </div>
  393. <div class="row">
  394. <span data-l10n-id="document_properties_version">PDF Version:</span>
  395. <p id="versionField">-</p>
  396. </div>
  397. <div class="row">
  398. <span data-l10n-id="document_properties_page_count">Page Count:</span>
  399. <p id="pageCountField">-</p>
  400. </div>
  401. <div class="row">
  402. <span data-l10n-id="document_properties_page_size">Page Size:</span>
  403. <p id="pageSizeField">-</p>
  404. </div>
  405. <div class="separator"></div>
  406. <div class="row">
  407. <span data-l10n-id="document_properties_linearized">Fast Web View:</span>
  408. <p id="linearizedField">-</p>
  409. </div>
  410. <div class="buttonRow">
  411. <button id="documentPropertiesClose" class="overlayButton"><span
  412. data-l10n-id="document_properties_close">Close</span></button>
  413. </div>
  414. </div>
  415. </div>
  416. <div id="printServiceOverlay" class="container hidden">
  417. <div class="dialog">
  418. <div class="row">
  419. <span data-l10n-id="print_progress_message">Preparing document for printing…</span>
  420. </div>
  421. <div class="row">
  422. <progress value="0" max="100"></progress>
  423. <span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }'
  424. class="relative-progress">0%</span>
  425. </div>
  426. <div class="buttonRow">
  427. <button id="printCancel" class="overlayButton"><span
  428. data-l10n-id="print_progress_close">Cancel</span></button>
  429. </div>
  430. </div>
  431. </div>
  432. </div> <!-- overlayContainer -->
  433. </div> <!-- outerContainer -->
  434. <div id="printContainer"></div>
  435. </body>
  436. </html>
  437. <!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->
  438. <!-- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
  439. <!-- uni 的 SDK,必须引用。 -->
  440. <script type="text/javascript" src="./uni.webview.js">
  441. </script>
  442. <script type="text/javascript">
  443. var interval = setInterval('loadPdf()', 300);
  444. function loadPdf() {
  445. if (PDFViewerApplication.pdfDocument == null) {
  446. // console.info('Loading...');
  447. } else {
  448. clearInterval(interval);
  449. // let _iframe = document.getElementById("iframe")
  450. console.info('Load Success...:',PDFViewerApplication.pdfDocument);
  451. }
  452. };
  453. </script>