viewer.html 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149
  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. -->
  17. <html dir="ltr" mozdisallowselectionprint>
  18. <head>
  19. <meta charset="utf-8" />
  20. <meta
  21. name="viewport"
  22. content="width=device-width, initial-scale=1, maximum-scale=1"
  23. />
  24. <meta name="google" content="notranslate" />
  25. <meta http-equiv="Content-Type" content="text/html" charset="gb2312" />
  26. <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8" />
  27. <title>PDF.js viewer</title>
  28. <link rel="stylesheet" href="viewer.css" />
  29. <!-- This snippet is used in production (included from viewer.html) -->
  30. <link
  31. rel="resource"
  32. type="application/l10n"
  33. href="locale/locale.properties"
  34. />
  35. <script src="../core-js-3.29.1-minified.min.js"></script>
  36. <script>
  37. const isNoCopy = false;
  38. // 禁止右键菜单
  39. document.oncontextmenu = function () {
  40. return isNoCopy;
  41. };
  42. // 禁止文字选择
  43. document.onselectstart = function () {
  44. return isNoCopy;
  45. };
  46. // 禁止复制
  47. document.oncopy = function () {
  48. return isNoCopy;
  49. };
  50. // 禁止剪切
  51. document.oncut = function () {
  52. return isNoCopy;
  53. };
  54. window.onkeydown =
  55. window.onkeyup =
  56. window.onkeypress =
  57. function (event) {
  58. // 禁止使用F12,判断是否按下F12,F12键码为123
  59. if (event.keyCode === 123) {
  60. // 阻止默认事件
  61. event.preventDefault();
  62. window.event.returnValue = false;
  63. }
  64. // 禁用 ctrl + s 与 command + s
  65. if ((event.ctrlKey || event.metaKey) && event.key !== "f") {
  66. // 阻止默认事件
  67. event.preventDefault();
  68. window.event.returnValue = false;
  69. }
  70. //阻止浏览器 ctrl + f 搜索
  71. if (event.ctrlKey && event.key == "f") {
  72. // 阻止默认事件
  73. event.preventDefault();
  74. let findbar = document.getElementById("findbar");
  75. findbar.classList.remove("hidden");
  76. window.event.returnValue = false;
  77. }
  78. };
  79. function disableContextMenu(e) {
  80. e.preventDefault();
  81. }
  82. document.addEventListener("visibilitychange", function () {
  83. if (document.hidden) {
  84. // 取消禁用鼠标右键事件
  85. document.removeEventListener("contextmenu", disableContextMenu);
  86. } else {
  87. // 禁用鼠标右键事件
  88. document.addEventListener("contextmenu", disableContextMenu);
  89. }
  90. });
  91. function formatQueryString(query) {
  92. const params = new Map();
  93. for (const [key, value] of new URLSearchParams(query)) {
  94. params.set(key.toLowerCase(), value);
  95. }
  96. return params;
  97. }
  98. var watermarkText = formatQueryString(location.search).get(
  99. "watermark_text"
  100. );
  101. var pdfIsEncrypt = parseInt(
  102. formatQueryString(location.search).get("is_encrypt") || 1
  103. );
  104. </script>
  105. <script src="../build/pdf.js"></script>
  106. <script src="wasm_exec.js"></script>
  107. <script src="viewer.js"></script>
  108. <style>
  109. .hide_btn {
  110. display: none;
  111. }
  112. </style>
  113. </head>
  114. <body tabindex="1">
  115. <div id="outerContainer">
  116. <script>
  117. const searchBox = document.getElementById("search-box");
  118. const findInput = document.getElementById("findInput");
  119. const historicalSearchMask = document.getElementById(
  120. "historical-search-mask"
  121. );
  122. findInput.addEventListener("focus", function () {
  123. console.log(123, searchBox.classList);
  124. if (searchBox.classList.length == 2) {
  125. searchBox.classList.remove("focus");
  126. } else {
  127. searchBox.classList.add("focus");
  128. }
  129. });
  130. findInput.addEventListener("blur", function () {
  131. setTimeout(() => {
  132. searchBox.classList.remove("focus");
  133. }, 1000);
  134. });
  135. historicalSearchMask.addEventListener("click", function () {
  136. searchBox.classList.remove("focus");
  137. });
  138. </script>
  139. <div id="sidebarContainerMask"></div>
  140. <div id="sidebarContainer">
  141. <div id="toolbarSidebar">
  142. <div id="toolbarSidebarLeft">
  143. <div
  144. id="sidebarViewButtons"
  145. class="splitToolbarButton toggled"
  146. role="radiogroup"
  147. >
  148. <button
  149. id="viewThumbnail"
  150. class="toolbarButton toggled"
  151. title="Show Thumbnails"
  152. tabindex="2"
  153. data-l10n-id="thumbs"
  154. role="radio"
  155. aria-checked="true"
  156. aria-controls="thumbnailView"
  157. style="display: none"
  158. >
  159. <span data-l10n-id="thumbs_label">Thumbnails</span>
  160. </button>
  161. <button
  162. id="viewOutline"
  163. class="toolbarButton"
  164. title="Show Document Outline (double-click to expand/collapse all items)"
  165. tabindex="3"
  166. data-l10n-id="document_outline"
  167. role="radio"
  168. aria-checked="false"
  169. aria-controls="outlineView"
  170. >
  171. <span data-l10n-id="document_outline_label"
  172. >Document Outline</span
  173. >
  174. </button>
  175. <button
  176. id="viewAttachments"
  177. class="toolbarButton"
  178. title="Show Attachments"
  179. tabindex="4"
  180. data-l10n-id="attachments"
  181. role="radio"
  182. aria-checked="false"
  183. aria-controls="attachmentsView"
  184. >
  185. <span data-l10n-id="attachments_label">Attachments</span>
  186. </button>
  187. <button
  188. id="viewLayers"
  189. class="toolbarButton"
  190. title="Show Layers (double-click to reset all layers to the default state)"
  191. tabindex="5"
  192. data-l10n-id="layers"
  193. role="radio"
  194. aria-checked="false"
  195. aria-controls="layersView"
  196. >
  197. <span data-l10n-id="layers_label">Layers</span>
  198. </button>
  199. </div>
  200. </div>
  201. <div id="toolbarSidebarRight">
  202. <div id="outlineOptionsContainer" class="hidden">
  203. <div class="verticalToolbarSeparator"></div>
  204. <button
  205. id="currentOutlineItem"
  206. class="toolbarButton"
  207. disabled="disabled"
  208. title="Find Current Outline Item"
  209. tabindex="6"
  210. data-l10n-id="current_outline_item"
  211. >
  212. <span data-l10n-id="current_outline_item_label"
  213. >Current Outline Item</span
  214. >
  215. </button>
  216. </div>
  217. </div>
  218. </div>
  219. <div id="sidebarContent">
  220. <div id="thumbnailView" style="display: none"></div>
  221. <div id="outlineView" class="hidden"></div>
  222. <div id="attachmentsView" class="hidden"></div>
  223. <div id="layersView" class="hidden"></div>
  224. </div>
  225. <div id="sidebarResizer"></div>
  226. </div>
  227. <!-- sidebarContainer -->
  228. <div id="mainContainer">
  229. <div class="findbar hidden doorHanger" id="findbar">
  230. <div id="findbarInputContainer">
  231. <input
  232. id="findInput"
  233. class="toolbarField"
  234. title="Find"
  235. placeholder="Find in document…"
  236. tabindex="91"
  237. data-l10n-id="find_input"
  238. aria-invalid="false"
  239. />
  240. <div class="splitToolbarButton">
  241. <button
  242. id="findPrevious"
  243. class="toolbarButton"
  244. title="Find the previous occurrence of the phrase"
  245. tabindex="92"
  246. data-l10n-id="find_previous"
  247. >
  248. <span data-l10n-id="find_previous_label">Previous</span>
  249. </button>
  250. <div class="splitToolbarButtonSeparator"></div>
  251. <button
  252. id="findNext"
  253. class="toolbarButton"
  254. title="Find the next occurrence of the phrase"
  255. tabindex="93"
  256. data-l10n-id="find_next"
  257. >
  258. <span data-l10n-id="find_next_label">Next</span>
  259. </button>
  260. </div>
  261. </div>
  262. <div id="findbarOptionsOneContainer">
  263. <input
  264. type="checkbox"
  265. id="findHighlightAll"
  266. class="toolbarField"
  267. tabindex="94"
  268. />
  269. <label
  270. for="findHighlightAll"
  271. class="toolbarLabel"
  272. data-l10n-id="find_highlight"
  273. >Highlight All</label
  274. >
  275. <input
  276. type="checkbox"
  277. id="findMatchCase"
  278. class="toolbarField"
  279. tabindex="95"
  280. />
  281. <label
  282. for="findMatchCase"
  283. class="toolbarLabel"
  284. data-l10n-id="find_match_case_label"
  285. >Match Case</label
  286. >
  287. </div>
  288. <div id="findbarOptionsTwoContainer">
  289. <input
  290. type="checkbox"
  291. id="findMatchDiacritics"
  292. class="toolbarField"
  293. tabindex="96"
  294. />
  295. <label
  296. for="findMatchDiacritics"
  297. class="toolbarLabel"
  298. data-l10n-id="find_match_diacritics_label"
  299. >Match Diacritics</label
  300. >
  301. <input
  302. type="checkbox"
  303. id="findEntireWord"
  304. class="toolbarField"
  305. tabindex="97"
  306. />
  307. <label
  308. for="findEntireWord"
  309. class="toolbarLabel"
  310. data-l10n-id="find_entire_word_label"
  311. >Whole Words</label
  312. >
  313. </div>
  314. <div id="findbarMessageContainer" aria-live="polite">
  315. <span id="findResultsCount" class="toolbarLabel"></span>
  316. <span id="findMsg" class="toolbarLabel"></span>
  317. </div>
  318. </div>
  319. <!-- findbar -->
  320. <div
  321. class="editorParamsToolbar hidden doorHangerRight"
  322. id="editorFreeTextParamsToolbar"
  323. >
  324. <div class="editorParamsToolbarContainer">
  325. <div class="editorParamsSetter">
  326. <label
  327. for="editorFreeTextColor"
  328. class="editorParamsLabel"
  329. data-l10n-id="editor_free_text_color"
  330. >Color</label
  331. >
  332. <input
  333. type="color"
  334. id="editorFreeTextColor"
  335. class="editorParamsColor"
  336. tabindex="100"
  337. />
  338. </div>
  339. <div class="editorParamsSetter">
  340. <label
  341. for="editorFreeTextFontSize"
  342. class="editorParamsLabel"
  343. data-l10n-id="editor_free_text_size"
  344. >Size</label
  345. >
  346. <input
  347. type="range"
  348. id="editorFreeTextFontSize"
  349. class="editorParamsSlider"
  350. value="10"
  351. min="5"
  352. max="100"
  353. step="1"
  354. tabindex="101"
  355. />
  356. </div>
  357. </div>
  358. </div>
  359. <div
  360. class="editorParamsToolbar hidden doorHangerRight"
  361. id="editorInkParamsToolbar"
  362. >
  363. <div class="editorParamsToolbarContainer">
  364. <div class="editorParamsSetter">
  365. <label
  366. for="editorInkColor"
  367. class="editorParamsLabel"
  368. data-l10n-id="editor_ink_color"
  369. >Color</label
  370. >
  371. <input
  372. type="color"
  373. id="editorInkColor"
  374. class="editorParamsColor"
  375. tabindex="102"
  376. />
  377. </div>
  378. <div class="editorParamsSetter">
  379. <label
  380. for="editorInkThickness"
  381. class="editorParamsLabel"
  382. data-l10n-id="editor_ink_thickness"
  383. >Thickness</label
  384. >
  385. <input
  386. type="range"
  387. id="editorInkThickness"
  388. class="editorParamsSlider"
  389. value="1"
  390. min="1"
  391. max="20"
  392. step="1"
  393. tabindex="103"
  394. />
  395. </div>
  396. <div class="editorParamsSetter">
  397. <label
  398. for="editorInkOpacity"
  399. class="editorParamsLabel"
  400. data-l10n-id="editor_ink_opacity"
  401. >Opacity</label
  402. >
  403. <input
  404. type="range"
  405. id="editorInkOpacity"
  406. class="editorParamsSlider"
  407. value="100"
  408. min="1"
  409. max="100"
  410. step="1"
  411. tabindex="104"
  412. />
  413. </div>
  414. </div>
  415. </div>
  416. <div
  417. id="secondaryToolbar"
  418. class="secondaryToolbar hidden doorHangerRight"
  419. >
  420. <div id="secondaryToolbarButtonContainer">
  421. <button
  422. id="secondaryOpenFile"
  423. class="secondaryToolbarButton visibleLargeView"
  424. title="Open File"
  425. tabindex="51"
  426. data-l10n-id="open_file"
  427. >
  428. <span data-l10n-id="open_file_label">Open</span>
  429. </button>
  430. <button
  431. id="secondaryPrint"
  432. class="secondaryToolbarButton visibleMediumView"
  433. title="Print"
  434. tabindex="52"
  435. data-l10n-id="print"
  436. >
  437. <span data-l10n-id="print_label">Print</span>
  438. </button>
  439. <button
  440. id="secondaryDownload"
  441. class="secondaryToolbarButton visibleMediumView"
  442. title="Save"
  443. tabindex="53"
  444. data-l10n-id="save"
  445. >
  446. <span data-l10n-id="save_label">Save</span>
  447. </button>
  448. <div class="horizontalToolbarSeparator visibleLargeView"></div>
  449. <button
  450. id="presentationMode"
  451. class="secondaryToolbarButton"
  452. title="Switch to Presentation Mode"
  453. tabindex="54"
  454. data-l10n-id="presentation_mode"
  455. >
  456. <span data-l10n-id="presentation_mode_label"
  457. >Presentation Mode</span
  458. >
  459. </button>
  460. <a
  461. href="#"
  462. id="viewBookmark"
  463. class="secondaryToolbarButton"
  464. title="Current Page (View URL from Current Page)"
  465. tabindex="55"
  466. data-l10n-id="bookmark1"
  467. >
  468. <span data-l10n-id="bookmark1_label">Current Page</span>
  469. </a>
  470. <div
  471. id="viewBookmarkSeparator"
  472. class="horizontalToolbarSeparator"
  473. ></div>
  474. <button
  475. id="firstPage"
  476. class="secondaryToolbarButton"
  477. title="Go to First Page"
  478. tabindex="56"
  479. data-l10n-id="first_page"
  480. >
  481. <span data-l10n-id="first_page_label">Go to First Page</span>
  482. </button>
  483. <button
  484. id="lastPage"
  485. class="secondaryToolbarButton"
  486. title="Go to Last Page"
  487. tabindex="57"
  488. data-l10n-id="last_page"
  489. >
  490. <span data-l10n-id="last_page_label">Go to Last Page</span>
  491. </button>
  492. <div class="horizontalToolbarSeparator"></div>
  493. <button
  494. id="pageRotateCw"
  495. class="secondaryToolbarButton"
  496. title="Rotate Clockwise"
  497. tabindex="58"
  498. data-l10n-id="page_rotate_cw"
  499. >
  500. <span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
  501. </button>
  502. <button
  503. id="pageRotateCcw"
  504. class="secondaryToolbarButton"
  505. title="Rotate Counterclockwise"
  506. tabindex="59"
  507. data-l10n-id="page_rotate_ccw"
  508. >
  509. <span data-l10n-id="page_rotate_ccw_label"
  510. >Rotate Counterclockwise</span
  511. >
  512. </button>
  513. <div class="horizontalToolbarSeparator"></div>
  514. <div id="cursorToolButtons" role="radiogroup">
  515. <button
  516. id="cursorSelectTool"
  517. class="secondaryToolbarButton toggled"
  518. title="Enable Text Selection Tool"
  519. tabindex="60"
  520. data-l10n-id="cursor_text_select_tool"
  521. role="radio"
  522. aria-checked="true"
  523. >
  524. <span data-l10n-id="cursor_text_select_tool_label"
  525. >Text Selection Tool</span
  526. >
  527. </button>
  528. <button
  529. id="cursorHandTool"
  530. class="secondaryToolbarButton"
  531. title="Enable Hand Tool"
  532. tabindex="61"
  533. data-l10n-id="cursor_hand_tool"
  534. role="radio"
  535. aria-checked="false"
  536. >
  537. <span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
  538. </button>
  539. </div>
  540. <div class="horizontalToolbarSeparator"></div>
  541. <div id="scrollModeButtons" role="radiogroup">
  542. <button
  543. id="scrollPage"
  544. class="secondaryToolbarButton"
  545. title="Use Page Scrolling"
  546. tabindex="62"
  547. data-l10n-id="scroll_page"
  548. role="radio"
  549. aria-checked="false"
  550. >
  551. <span data-l10n-id="scroll_page_label">Page Scrolling</span>
  552. </button>
  553. <button
  554. id="scrollVertical"
  555. class="secondaryToolbarButton toggled"
  556. title="Use Vertical Scrolling"
  557. tabindex="63"
  558. data-l10n-id="scroll_vertical"
  559. role="radio"
  560. aria-checked="true"
  561. >
  562. <span data-l10n-id="scroll_vertical_label"
  563. >Vertical Scrolling</span
  564. >
  565. </button>
  566. <button
  567. id="scrollHorizontal"
  568. class="secondaryToolbarButton"
  569. title="Use Horizontal Scrolling"
  570. tabindex="64"
  571. data-l10n-id="scroll_horizontal"
  572. role="radio"
  573. aria-checked="false"
  574. >
  575. <span data-l10n-id="scroll_horizontal_label"
  576. >Horizontal Scrolling</span
  577. >
  578. </button>
  579. <button
  580. id="scrollWrapped"
  581. class="secondaryToolbarButton"
  582. title="Use Wrapped Scrolling"
  583. tabindex="65"
  584. data-l10n-id="scroll_wrapped"
  585. role="radio"
  586. aria-checked="false"
  587. >
  588. <span data-l10n-id="scroll_wrapped_label"
  589. >Wrapped Scrolling</span
  590. >
  591. </button>
  592. </div>
  593. <div class="horizontalToolbarSeparator"></div>
  594. <div id="spreadModeButtons" role="radiogroup">
  595. <button
  596. id="spreadNone"
  597. class="secondaryToolbarButton toggled"
  598. title="Do not join page spreads"
  599. tabindex="66"
  600. data-l10n-id="spread_none"
  601. role="radio"
  602. aria-checked="true"
  603. >
  604. <span data-l10n-id="spread_none_label">No Spreads</span>
  605. </button>
  606. <button
  607. id="spreadOdd"
  608. class="secondaryToolbarButton"
  609. title="Join page spreads starting with odd-numbered pages"
  610. tabindex="67"
  611. data-l10n-id="spread_odd"
  612. role="radio"
  613. aria-checked="false"
  614. >
  615. <span data-l10n-id="spread_odd_label">Odd Spreads</span>
  616. </button>
  617. <button
  618. id="spreadEven"
  619. class="secondaryToolbarButton"
  620. title="Join page spreads starting with even-numbered pages"
  621. tabindex="68"
  622. data-l10n-id="spread_even"
  623. role="radio"
  624. aria-checked="false"
  625. >
  626. <span data-l10n-id="spread_even_label">Even Spreads</span>
  627. </button>
  628. </div>
  629. <div class="horizontalToolbarSeparator"></div>
  630. <button
  631. id="documentProperties"
  632. class="secondaryToolbarButton"
  633. title="Document Properties…"
  634. tabindex="69"
  635. data-l10n-id="document_properties"
  636. aria-controls="documentPropertiesDialog"
  637. >
  638. <span data-l10n-id="document_properties_label"
  639. >Document Properties…</span
  640. >
  641. </button>
  642. </div>
  643. </div>
  644. <!-- secondaryToolbar -->
  645. <div class="toolbar">
  646. <div id="toolbarContainer">
  647. <div id="toolbarViewer">
  648. <div id="toolbarViewerLeft">
  649. <button
  650. id="sidebarToggle"
  651. class="toolbarButton"
  652. title="Toggle Sidebar"
  653. tabindex="11"
  654. data-l10n-id="toggle_sidebar"
  655. aria-expanded="false"
  656. aria-controls="sidebarContainer"
  657. >
  658. <span data-l10n-id="toggle_sidebar_label"
  659. >Toggle Sidebar</span
  660. >
  661. </button>
  662. <div class="toolbarButtonSpacer"></div>
  663. <button
  664. id="viewFind"
  665. class="toolbarButton"
  666. title="Find in Document"
  667. tabindex="12"
  668. data-l10n-id="findbar"
  669. aria-expanded="false"
  670. aria-controls="findbar"
  671. >
  672. <span data-l10n-id="findbar_label">Find</span>
  673. </button>
  674. <div class="splitToolbarButton hiddenSmallView">
  675. <button
  676. class="toolbarButton"
  677. title="Previous Page"
  678. id="previous"
  679. tabindex="13"
  680. data-l10n-id="previous"
  681. >
  682. <span data-l10n-id="previous_label">Previous</span>
  683. </button>
  684. <div class="splitToolbarButtonSeparator"></div>
  685. <button
  686. class="toolbarButton"
  687. title="Next Page"
  688. id="next"
  689. tabindex="14"
  690. data-l10n-id="next"
  691. >
  692. <span data-l10n-id="next_label">Next</span>
  693. </button>
  694. </div>
  695. <input
  696. type="number"
  697. id="pageNumber"
  698. class="toolbarField"
  699. title="Page"
  700. value="1"
  701. min="1"
  702. tabindex="15"
  703. data-l10n-id="page"
  704. autocomplete="off"
  705. />
  706. <span id="numPages" class="toolbarLabel"></span>
  707. </div>
  708. <div id="toolbarViewerRight">
  709. <!-- 打开文件 -->
  710. <button
  711. id="openFile"
  712. class="toolbarButton hiddenLargeView hide_btn"
  713. title="Open File"
  714. tabindex="31"
  715. data-l10n-id="open_file"
  716. >
  717. <span data-l10n-id="open_file_label">Open</span>
  718. </button>
  719. <!-- 打印 -->
  720. <button
  721. id="print"
  722. class="toolbarButton hiddenMediumView hide_btn"
  723. title="Print"
  724. tabindex="32"
  725. data-l10n-id="print"
  726. >
  727. <span data-l10n-id="print_label">Print</span>
  728. </button>
  729. <!-- 下载 -->
  730. <button
  731. id="download"
  732. class="toolbarButton hiddenMediumView hide_btn"
  733. title="Save"
  734. tabindex="33"
  735. data-l10n-id="save"
  736. >
  737. <span data-l10n-id="save_label">Save</span>
  738. </button>
  739. <div class="verticalToolbarSeparator hiddenMediumView"></div>
  740. <!-- 编辑 -->
  741. <div
  742. id="editorModeButtons"
  743. class="splitToolbarButton toggled hide_btn"
  744. role="radiogroup"
  745. >
  746. <button
  747. id="editorFreeText"
  748. class="toolbarButton"
  749. disabled="disabled"
  750. title="Text"
  751. role="radio"
  752. aria-checked="false"
  753. tabindex="34"
  754. data-l10n-id="editor_free_text2"
  755. >
  756. <span data-l10n-id="editor_free_text2_label">Text</span>
  757. </button>
  758. <button
  759. id="editorInk"
  760. class="toolbarButton"
  761. disabled="disabled"
  762. title="Draw"
  763. role="radio"
  764. aria-checked="false"
  765. tabindex="35"
  766. data-l10n-id="editor_ink2"
  767. >
  768. <span data-l10n-id="editor_ink2_label">Draw</span>
  769. </button>
  770. </div>
  771. <div
  772. id="editorModeSeparator"
  773. class="verticalToolbarSeparator"
  774. ></div>
  775. <!-- 功能 -->
  776. <button
  777. id="secondaryToolbarToggle"
  778. class="toolbarButton hide_btn"
  779. title="Tools"
  780. tabindex="48"
  781. data-l10n-id="tools"
  782. aria-expanded="false"
  783. aria-controls="secondaryToolbar"
  784. >
  785. <span data-l10n-id="tools_label">Tools</span>
  786. </button>
  787. </div>
  788. <div id="toolbarViewerMiddle">
  789. <div class="splitToolbarButton">
  790. <button
  791. id="zoomOut"
  792. class="toolbarButton"
  793. title="Zoom Out"
  794. tabindex="21"
  795. data-l10n-id="zoom_out"
  796. >
  797. <span data-l10n-id="zoom_out_label">Zoom Out</span>
  798. </button>
  799. <div class="splitToolbarButtonSeparator"></div>
  800. <button
  801. id="zoomIn"
  802. class="toolbarButton"
  803. title="Zoom In"
  804. tabindex="22"
  805. data-l10n-id="zoom_in"
  806. >
  807. <span data-l10n-id="zoom_in_label">Zoom In</span>
  808. </button>
  809. </div>
  810. <span id="scaleSelectContainer" class="dropdownToolbarButton">
  811. <select
  812. id="scaleSelect"
  813. title="Zoom"
  814. tabindex="23"
  815. data-l10n-id="zoom"
  816. >
  817. <option
  818. id="pageAutoOption"
  819. title=""
  820. value="auto"
  821. selected="selected"
  822. data-l10n-id="page_scale_auto"
  823. >
  824. Automatic Zoom
  825. </option>
  826. <option
  827. id="pageActualOption"
  828. title=""
  829. value="page-actual"
  830. data-l10n-id="page_scale_actual"
  831. >
  832. Actual Size
  833. </option>
  834. <option
  835. id="pageFitOption"
  836. title=""
  837. value="page-fit"
  838. data-l10n-id="page_scale_fit"
  839. >
  840. Page Fit
  841. </option>
  842. <option
  843. id="pageWidthOption"
  844. title=""
  845. value="page-width"
  846. data-l10n-id="page_scale_width"
  847. >
  848. Page Width
  849. </option>
  850. <option
  851. id="customScaleOption"
  852. title=""
  853. value="custom"
  854. disabled="disabled"
  855. hidden="true"
  856. ></option>
  857. <option
  858. title=""
  859. value="0.5"
  860. data-l10n-id="page_scale_percent"
  861. data-l10n-args='{ "scale": 50 }'
  862. >
  863. 50%
  864. </option>
  865. <option
  866. title=""
  867. value="0.75"
  868. data-l10n-id="page_scale_percent"
  869. data-l10n-args='{ "scale": 75 }'
  870. >
  871. 75%
  872. </option>
  873. <option
  874. title=""
  875. value="1"
  876. data-l10n-id="page_scale_percent"
  877. data-l10n-args='{ "scale": 100 }'
  878. >
  879. 100%
  880. </option>
  881. <option
  882. title=""
  883. value="1.25"
  884. data-l10n-id="page_scale_percent"
  885. data-l10n-args='{ "scale": 125 }'
  886. >
  887. 125%
  888. </option>
  889. <option
  890. title=""
  891. value="1.5"
  892. data-l10n-id="page_scale_percent"
  893. data-l10n-args='{ "scale": 150 }'
  894. >
  895. 150%
  896. </option>
  897. <option
  898. title=""
  899. value="2"
  900. data-l10n-id="page_scale_percent"
  901. data-l10n-args='{ "scale": 200 }'
  902. >
  903. 200%
  904. </option>
  905. <option
  906. title=""
  907. value="3"
  908. data-l10n-id="page_scale_percent"
  909. data-l10n-args='{ "scale": 300 }'
  910. >
  911. 300%
  912. </option>
  913. <option
  914. title=""
  915. value="4"
  916. data-l10n-id="page_scale_percent"
  917. data-l10n-args='{ "scale": 400 }'
  918. >
  919. 400%
  920. </option>
  921. </select>
  922. </span>
  923. </div>
  924. </div>
  925. <div id="loadingBar">
  926. <div class="progress">
  927. <div class="glimmer"></div>
  928. </div>
  929. </div>
  930. </div>
  931. </div>
  932. <div id="viewerContainer" tabindex="0">
  933. <div id="viewer" class="pdfViewer"></div>
  934. </div>
  935. </div>
  936. <!-- mainContainer -->
  937. <div id="dialogContainer">
  938. <dialog id="passwordDialog">
  939. <div class="row">
  940. <label
  941. for="password"
  942. id="passwordText"
  943. data-l10n-id="password_label"
  944. >Enter the password to open this PDF file:</label
  945. >
  946. </div>
  947. <div class="row">
  948. <input type="password" id="password" class="toolbarField" />
  949. </div>
  950. <div class="buttonRow">
  951. <button id="passwordCancel" class="dialogButton">
  952. <span data-l10n-id="password_cancel">Cancel</span>
  953. </button>
  954. <button id="passwordSubmit" class="dialogButton">
  955. <span data-l10n-id="password_ok">OK</span>
  956. </button>
  957. </div>
  958. </dialog>
  959. <dialog id="documentPropertiesDialog">
  960. <div class="row">
  961. <span
  962. id="fileNameLabel"
  963. data-l10n-id="document_properties_file_name"
  964. >File name:</span
  965. >
  966. <p id="fileNameField" aria-labelledby="fileNameLabel">-</p>
  967. </div>
  968. <div class="row">
  969. <span
  970. id="fileSizeLabel"
  971. data-l10n-id="document_properties_file_size"
  972. >File size:</span
  973. >
  974. <p id="fileSizeField" aria-labelledby="fileSizeLabel">-</p>
  975. </div>
  976. <div class="separator"></div>
  977. <div class="row">
  978. <span id="titleLabel" data-l10n-id="document_properties_title"
  979. >Title:</span
  980. >
  981. <p id="titleField" aria-labelledby="titleLabel">-</p>
  982. </div>
  983. <div class="row">
  984. <span id="authorLabel" data-l10n-id="document_properties_author"
  985. >Author:</span
  986. >
  987. <p id="authorField" aria-labelledby="authorLabel">-</p>
  988. </div>
  989. <div class="row">
  990. <span id="subjectLabel" data-l10n-id="document_properties_subject"
  991. >Subject:</span
  992. >
  993. <p id="subjectField" aria-labelledby="subjectLabel">-</p>
  994. </div>
  995. <div class="row">
  996. <span id="keywordsLabel" data-l10n-id="document_properties_keywords"
  997. >Keywords:</span
  998. >
  999. <p id="keywordsField" aria-labelledby="keywordsLabel">-</p>
  1000. </div>
  1001. <div class="row">
  1002. <span
  1003. id="creationDateLabel"
  1004. data-l10n-id="document_properties_creation_date"
  1005. >Creation Date:</span
  1006. >
  1007. <p id="creationDateField" aria-labelledby="creationDateLabel">-</p>
  1008. </div>
  1009. <div class="row">
  1010. <span
  1011. id="modificationDateLabel"
  1012. data-l10n-id="document_properties_modification_date"
  1013. >Modification Date:</span
  1014. >
  1015. <p
  1016. id="modificationDateField"
  1017. aria-labelledby="modificationDateLabel"
  1018. >
  1019. -
  1020. </p>
  1021. </div>
  1022. <div class="row">
  1023. <span id="creatorLabel" data-l10n-id="document_properties_creator"
  1024. >Creator:</span
  1025. >
  1026. <p id="creatorField" aria-labelledby="creatorLabel">-</p>
  1027. </div>
  1028. <div class="separator"></div>
  1029. <div class="row">
  1030. <span id="producerLabel" data-l10n-id="document_properties_producer"
  1031. >PDF Producer:</span
  1032. >
  1033. <p id="producerField" aria-labelledby="producerLabel">-</p>
  1034. </div>
  1035. <div class="row">
  1036. <span id="versionLabel" data-l10n-id="document_properties_version"
  1037. >PDF Version:</span
  1038. >
  1039. <p id="versionField" aria-labelledby="versionLabel">-</p>
  1040. </div>
  1041. <div class="row">
  1042. <span
  1043. id="pageCountLabel"
  1044. data-l10n-id="document_properties_page_count"
  1045. >Page Count:</span
  1046. >
  1047. <p id="pageCountField" aria-labelledby="pageCountLabel">-</p>
  1048. </div>
  1049. <div class="row">
  1050. <span
  1051. id="pageSizeLabel"
  1052. data-l10n-id="document_properties_page_size"
  1053. >Page Size:</span
  1054. >
  1055. <p id="pageSizeField" aria-labelledby="pageSizeLabel">-</p>
  1056. </div>
  1057. <div class="separator"></div>
  1058. <div class="row">
  1059. <span
  1060. id="linearizedLabel"
  1061. data-l10n-id="document_properties_linearized"
  1062. >Fast Web View:</span
  1063. >
  1064. <p id="linearizedField" aria-labelledby="linearizedLabel">-</p>
  1065. </div>
  1066. <div class="buttonRow">
  1067. <button id="documentPropertiesClose" class="dialogButton">
  1068. <span data-l10n-id="document_properties_close">Close</span>
  1069. </button>
  1070. </div>
  1071. </dialog>
  1072. <dialog id="printServiceDialog" style="min-width: 200px">
  1073. <div class="row">
  1074. <span data-l10n-id="print_progress_message"
  1075. >Preparing document for printing…</span
  1076. >
  1077. </div>
  1078. <div class="row">
  1079. <progress value="0" max="100"></progress>
  1080. <span
  1081. data-l10n-id="print_progress_percent"
  1082. data-l10n-args='{ "progress": 0 }'
  1083. class="relative-progress"
  1084. >0%</span
  1085. >
  1086. </div>
  1087. <div class="buttonRow">
  1088. <button id="printCancel" class="dialogButton">
  1089. <span data-l10n-id="print_progress_close">Cancel</span>
  1090. </button>
  1091. </div>
  1092. </dialog>
  1093. </div>
  1094. <!-- dialogContainer -->
  1095. </div>
  1096. <!-- outerContainer -->
  1097. <div id="printContainer"></div>
  1098. <input type="file" id="fileInput" class="hidden" />
  1099. </body>
  1100. </html>