{"id":13495276,"url":"https://github.com/sandanat/vue-pdf-app","last_synced_at":"2025-04-04T08:07:08.495Z","repository":{"id":47407478,"uuid":"288262463","full_name":"sandanat/vue-pdf-app","owner":"sandanat","description":"VUEjs v2 PDF viewer based on Mozilla's PDFJS","archived":false,"fork":false,"pushed_at":"2021-09-01T16:16:20.000Z","size":6056,"stargazers_count":232,"open_issues_count":55,"forks_count":108,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T07:07:13.438Z","etag":null,"topics":["pdf","vue2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sandanat.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-17T18:57:45.000Z","updated_at":"2025-03-17T23:46:19.000Z","dependencies_parsed_at":"2022-09-06T02:11:26.907Z","dependency_job_id":null,"html_url":"https://github.com/sandanat/vue-pdf-app","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandanat%2Fvue-pdf-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandanat%2Fvue-pdf-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandanat%2Fvue-pdf-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandanat%2Fvue-pdf-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sandanat","download_url":"https://codeload.github.com/sandanat/vue-pdf-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247142064,"owners_count":20890652,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pdf","vue2"],"created_at":"2024-07-31T19:01:33.127Z","updated_at":"2025-04-04T08:07:08.472Z","avatar_url":"https://github.com/sandanat.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"VUEjs v2 PDF viewer based on Mozilla's PDFJS.\n\n[![](https://data.jsdelivr.com/v1/package/npm/vue-pdf-app/badge)](https://www.jsdelivr.com/package/npm/vue-pdf-app)\n\n[![npm version](https://badge.fury.io/js/vue-pdf-app.svg)](https://badge.fury.io/js/vue-pdf-app)\n\n100% PDFJS functionality:\n\n- zoom\n- open\n- print\n- download\n- rotate\n- text selection\n- search panel\n- pdf document password\n- thumbnail, outline, attachments, annotation layers\n\nEasily localized configurable toolbar\n\n\u003csup style=\"color: red\"\u003eNEW\u003c/sup\u003e Toolbar custom UI\n\nCross-browser support (including IE11)\n\nColor customization (IE11 not supported)\n\nButtons icons customization\n\nLight/dark themes\n\nBuilt-in typescript support\n\nUMD/Unpkg support:\n\n| File                   | Size                               | Gzipped    |\n| ---------------------- | ---------------------------------- | ---------- |\n| vue-pdf-app.umd.min.js | 1742.89 KiB                        | 478.86 KiB |\n| vue-pdf-app.umd.js     | 3115.59 KiB                        | 677.87 KiB |\n| vue-pdf-app.common.js  | 3115.12 KiB                        | 677.71 KiB |\n| icons/main.css         | 15 - 40 KiB (depends from browser) |            |\n\n# Example\n\n```vue\n\u003ctemplate\u003e\n  \u003c!-- used `style=\"height: 100vh;\"` because without it in the Firefox 89 and Chrome 91 (June 2021) the `vue-pdf-app` is not rendering on the page, just empty space without any errors (since `vue-pdf-app` does not have height and it is the top tag in the generated markup ) --\u003e\n  \u003c!-- or you can just wrap `vue-pdf-app` in \u003cdiv\u003e tag and set height for it via CSS (like in `Script tag (unpkg)` example below) --\u003e\n  \u003cvue-pdf-app style=\"height: 100vh;\" pdf=\"https://file-examples-com.github.io/uploads/2017/10/file-example_PDF_1MB.pdf\"\u003e\u003c/vue-pdf-app\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VuePdfApp from \"vue-pdf-app\";\n// import this to use default icons for buttons\nimport \"vue-pdf-app/dist/icons/main.css\";\n\nexport default {\n  components: {\n    VuePdfApp\n  }\n};\n\u003c/script\u003e\n```\n\n![pdf sample](./readme/sample.png \"Pdf expample\")\n\n[Live demo](https://codesandbox.io/s/vue-2-vue-pdf-app-wz5kv)\n\n[Live demo 2](https://codepen.io/sandanat/pen/xxVdgYM)\n\n[Examples source code](https://github.com/sandanat/vue-pdf-app/tree/master/examples \"Examples source code\")\n\n[FAQ](https://github.com/sandanat/vue-pdf-app/blob/master/FAQ.md)\n\n# API\n\n## :pdf\n\n- Type: `string | null | ArrayBuffer | TypedArray`\n- Required: `false`\n- Usage:\n\n```vue\n\u003cvue-pdf-app pdf=\"https://example.com/sample.pdf\" /\u003e\n\u003cvue-pdf-app :pdf=\"ArrayBuffer\" /\u003e\n```\n\n## :title\n\n- Description: `true` renames document title to pdf file name.\n- Type: `boolean`\n- Required: `false`\n- Default: `false`\n- Usage:\n\n```vue\n\u003cvue-pdf-app :title=\"true\" /\u003e\n```\n\n## :theme.sync\n\n- Type: `\"dark\" | \"light\"`\n- Required: `false`\n- Usage:\n\n```vue\n\u003cvue-pdf-app theme=\"dark\" /\u003e\n\u003cvue-pdf-app :theme=\"theme\" /\u003e\n\u003cvue-pdf-app :theme.sync=\"theme\" /\u003e\n```\n\n## \u003csup style=\"color: red\"\u003enew\u003c/sup\u003e :fileName\n\n- Description: when pdf is passed like an array buffer default download file name is `document.pdf`. Set this prop to override it.\n- Type: `string`\n- Required: `false`\n- Usage:\n\n```vue\n\u003cvue-pdf-app :pdf=\"ArrayBuffer\" file-name=\"file name\" /\u003e\n```\n\n## \u003csup style=\"color: red\"\u003enew\u003c/sup\u003e :pageScale\n\n- Description: default page scale.\n- Type: `number | \"page-actual\"| \"page-width\"| \"page-height\"| \"page-fit\"| \"auto\"`\n- Required: `false`\n- Usage:\n\n```vue\n// 20%\n\u003cvue-pdf-app page-scale=\"20\" /\u003e\n\u003cvue-pdf-app :page-scale=\"20\" /\u003e\n\u003cvue-pdf-app :page-scale=\"page-actual\" /\u003e\n```\n\n## \u003csup style=\"color: red\"\u003enew\u003c/sup\u003e :pageNumber\n\n- Description: pdfjs stores last viewed page of a file in `window.localStorage.getItem(\"pdfjs.history\")`. Specify the prop to override it.\n- Type: `number`\n- Required: `false`\n- Usage:\n\n```vue\n\u003cvue-pdf-app :page-number=\"1\" /\u003e\n```\n\n## :config\n\n- Description: toolbar configuration. Toolbar is available by default. Specify `false` for buttons or whole group of buttons to disable them.\n- Type: `toolbar config (see below)`\n- Required: `false`\n- Default: `toolbar config`\n- Usage:\n\n```vue\n\u003cvue-pdf-app :config=\"config\" /\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      // disable \"Previous page\" button\n      config: {\n        toolbar: {\n          toolbarViewerLeft: {\n            previous: false\n          }\n        }\n      },\n\n      // disable whole page navigation panel\n      config2: {\n        toolbar: {\n          toolbarViewerLeft: false\n        }\n      },\n\n      // disable whole panel\n      config3: {\n        toolbar: false\n      }\n    };\n  }\n};\n\u003c/script\u003e\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eConfig specification\u003c/summary\u003e\n\n![Config legend](./readme/config-legend.jpg \"Config legend\")\n\n\u003ccode\u003e\n\u003cpre\u003e\n{\n  sidebar: {\n    viewThumbnail: true,\n    viewOutline: true,\n    viewAttachments: true,\n  },\n  secondaryToolbar: {\n    secondaryPresentationMode: true,\n    secondaryOpenFile: true,\n    secondaryPrint: true,\n    secondaryDownload: true,\n    secondaryViewBookmark: true,\n    firstPage: true,\n    lastPage: true,\n    pageRotateCw: true,\n    pageRotateCcw: true,\n    cursorSelectTool: true,\n    cursorHandTool: true,\n    scrollVertical: true,\n    scrollHorizontal: true,\n    scrollWrapped: true,\n    spreadNone: true,\n    spreadOdd: true,\n    spreadEven: true,\n    documentProperties: true,\n  },\n  toolbar: {\n    toolbarViewerLeft: {\n      findbar: true,\n      previous: true,\n      next: true,\n      pageNumber: true,\n    },\n    toolbarViewerRight: {\n      presentationMode: true,\n      openFile: true,\n      print: true,\n      download: true,\n      viewBookmark: true,\n    },\n    toolbarViewerMiddle: {\n      zoomOut: true,\n      zoomIn: true,\n      scaleSelectContainer: true,\n    },\n  },\n  errorWrapper: true,\n};\n\u003c/pre\u003e\n\u003c/code\u003e\n\u003c/details\u003e\n\n## \u003csup style=\"color: red\"\u003enew\u003c/sup\u003e :id-config\n\n- Description: If default toolbar UI doesn't suite you it is possible to build custom toolbar. The prop contains elements ID to which to bind functionality. If element ID is specified in this prop appropriate button will be hidden in a default toolbar. May not work with UI framework components. That is because pdfjs internally manages attributes specific to a certain HTML element (for instance pdfjs toggles `disabled` attribute of a button but it won't if a div is used instead of a button). So it is better to use native HTML element specified as recommended in ID config specification below. Four slots are specially designed to build custom toolbar (are situated near a pdf page): `viewer-header, viewer-prepend, viewer-append, viewer-footer` (refer slots API). It is also possible to use other slots or elements outside vue-pdf-app.\n- Type: `ID config (see below)`\n- Required: `false`\n- Usage:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton :id=\"idConfig.zoomOut\" type=\"button\"\u003eZoom out\u003c/button\u003e\n    \u003cvue-pdf-app :id-config=\"idConfig\"\u003e\n      \u003ctemplate #viewer-prepend\u003e\n        \u003cdiv class=\"viewer-prepend\"\u003e\n          \u003cbutton :id=\"idConfig.zoomIn\" type=\"button\"\u003eZoom in\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/template\u003e\n    \u003c/vue-pdf-app\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      idConfig: { zoomIn: \"zoomInId\", zoomOut: \"zoomOutId\" }\n    };\n  }\n};\n\u003c/script\u003e\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eID config specification\u003c/summary\u003e\n\u003ccode\u003e\n\u003cpre\u003e\n{\n\ncursorHandTool?: string; // \u0026lt;button\u0026gt; is recommended\ncursorSelectTool?: string; // \u0026lt;button\u0026gt; is recommended\ndocumentProperties?: string; // \u0026lt;button\u0026gt; is recommended\ndownload?: string; // \u0026lt;button\u0026gt; is recommended\nfindbar?: string; // \u0026lt;div\u0026gt; is recommended\nfindEntireWord?: string; // \u0026lt;input type=\"checkbox\"\u0026gt; is recommended\nfindHighlightAll?: string; // \u0026lt;input type=\"checkbox\"\u0026gt; is recommended\nfindMessage?: string; // \u0026lt;span\u0026gt; is recommended\nfindInput?: string; // \u0026lt;input type=\"text\"\u0026gt; is recommended\nfindMatchCase?: string; // \u0026lt;input type=\"checkbox\"\u0026gt; is recommended\nfindNext?: string; // \u0026lt;button\u0026gt; is recommended\nfindPrevious?: string; // \u0026lt;button\u0026gt; is recommended\nfindResultsCount?: string; // \u0026lt;span\u0026gt; is recommended\nfirstPage?: string; // \u0026lt;button\u0026gt; is recommended\nlastPage?: string; // \u0026lt;button\u0026gt; is recommended\nnextPage?: string; // \u0026lt;button\u0026gt; is recommended\nnumPages?: string; // total pages qty. \u0026lt;span\u0026gt; is recommended\nopenFile?: string; // \u0026lt;button\u0026gt; is recommended\npageNumber?: string; // input for page number. \u0026lt;input type=\"number\"\u0026gt; is recommended\npageRotateCcw?: string; // \u0026lt;button\u0026gt; is recommended\npageRotateCw?: string; // \u0026lt;button\u0026gt; is recommended\npresentationMode?: string; // \u0026lt;button\u0026gt; is recommended\npreviousPage?: string; // \u0026lt;button\u0026gt; is recommended\nprint?: string; // \u0026lt;button\u0026gt; is recommended\nscrollHorizontal?: string; // \u0026lt;button\u0026gt; is recommended\nscrollVertical?: string; // \u0026lt;button\u0026gt; is recommended\nscrollWrapped?: string; // \u0026lt;button\u0026gt; is recommended\nsidebarToggle?: string; // \u0026lt;button\u0026gt; is recommended\nspreadEven?: string; // \u0026lt;button\u0026gt; is recommended\nspreadNone?: string; // \u0026lt;button\u0026gt; is recommended\nspreadOdd?: string; // \u0026lt;button\u0026gt; is recommended\ntoggleFindbar?: string; // \u0026lt;button\u0026gt; is recommended\nviewAttachments?: string; // \u0026lt;button\u0026gt; is recommended\nviewBookmark?: string; // \u0026lt;a\u0026gt; tag is recommended\nviewOutline?: string; // \u0026lt;button\u0026gt; tag is recommended\nviewThumbnail?: string; // \u0026lt;button\u0026gt; tag is recommended\nzoomIn?: string; // \u0026lt;button\u0026gt; tag is recommended\nzoomOut?: string; // \u0026lt;button\u0026gt; tag is recommended\n}\n\n\u003c/pre\u003e\n\u003c/code\u003e\n\u003c/details\u003e\n\n\u003e ℹ️ Note that elements must be in HTML document by the time vue-pdf-app is mounting (use `v-show` instead of `v-if` directive if necessary). Otherwise an error occurs.\n\n## @after-created(PDFViewerApplication)\n\n- Description: emitted only once when Pdfjs library is binded to vue component. Can be used to set Pdfjs config before pdf document opening.\n- Arguments:\n  - PDFViewerApplication - [pdf application](https://github.com/mozilla/pdf.js/blob/master/web/app.js#L198)\n- Usage:\n\n```vue\n\u003cvue-pdf-app @after-created=\"afterCreated\" /\u003e\n```\n\n## @open(PDFViewerApplication)\n\n- Description: emitted when pdf is opened but pages are not rendered.\n- Arguments:\n  - PDFViewerApplication - [pdf application](https://github.com/mozilla/pdf.js/blob/master/web/app.js#L198)\n- Usage:\n\n```vue\n\u003cvue-pdf-app @open=\"openHandler\" /\u003e\n```\n\n## @pages-rendered(PDFViewerApplication)\n\n- Description: emitted when pdf document pages are rendered. Can be used to set default pages scale, for instance.\n- Arguments:\n  - PDFViewerApplication - [pdf application](https://github.com/mozilla/pdf.js/blob/master/web/app.js#L198)\n- Usage:\n\n```vue\n\u003cvue-pdf-app @pages-rendered=\"pagesRendered\" /\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    pagesRendered(pdfApp) {\n      setTimeout(() =\u003e (pdfApp.pdfViewer.currentScaleValue = \"page-height\"));\n    }\n  }\n};\n\u003c/script\u003e\n```\n\n\u003e ℹ️ Events are triggered in the following order `after-created (once) =\u003e open =\u003e pages-rendered`\n\n## Slots\n\n### Slot names\n\n- toolbar-left-prepend\n- toolbar-left-append\n- toolbar-middle-prepend\n- toolbar-middle-append\n- toolbar-right-prepend\n- toolbar-right-append\n- toolbar-sidebar-prepend\n- toolbar-sidebar-append\n- secondary-toolbar-prepend\n- secondary-toolbar-append\n- footer\n- \u003csup style=\"color: red\"\u003eNEW\u003c/sup\u003e viewer-header: slot before `viewer-prepend` slot. Can be used to build custom toolbar.\n- \u003csup style=\"color: red\"\u003eNEW\u003c/sup\u003e viewer-prepend: slot before `viewerContainer` div. Can be used to build custom toolbar.\n- \u003csup style=\"color: red\"\u003eNEW\u003c/sup\u003e viewer-append: slot after `viewerContainer` div. Can be used to build custom toolbar.\n- \u003csup style=\"color: red\"\u003eNEW\u003c/sup\u003e viewer-footer: slot after `viewer-append` slot. Can be used to build custom toolbar.\n\n### Slot props\n\nEach slot has props:\n\n1. toggleTheme\n\n   Type: (): void.\n\n   Description: toggle theme handler\n\n1. \u003csup style=\"color: red\"\u003eNEW\u003c/sup\u003e isSidebarHidden\n\n   Type: boolean\n\n   Description: state of a sidebar (visible or hidden). Can be used to manage visibility of custom Attachments, Outline and Thumbnail buttons\n\n1. \u003csup style=\"color: red\"\u003eNEW\u003c/sup\u003e isFindbarHidden\n\n   Type: boolean\n\n   Description: state of a findbar (visible or hidden). Can be used to manage visibility of custom findbar\n\n```vue\n\u003cvue-pdf-app\u003e\n  \u003ctemplate #toolbar-left-prepend=\"{ toggleTheme }\"\u003e\n    \u003cbutton @click=\"toggleTheme\" type=\"button\"\u003eToggle theme\u003c/button\u003e\n  \u003c/template\u003e\n\u003c/vue-pdf-app\u003e\n```\n\n# Color customization (IE11 not supported)\n\nColors of the pdf viewer are customized via custom css properties:\n\n```html\n\u003cstyle\u003e\n  /* for dark theme */\n  .pdf-app.dark {\n    --pdf-toolbar-color: black;\n  }\n\n  /* for light theme */\n  .pdf-app.light {\n    --pdf-toolbar-color: white;\n  }\n\u003c/style\u003e\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eCustom css properties specification\u003c/summary\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProperty\u003c/th\u003e\n      \u003cth\u003eApplied to selectors\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-app-background-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app\u003c/td\u003e\n      \u003ctd\u003eBackground color for root pdf container\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-button-hover-font-color\u003c/td\u003e\n      \u003ctd\u003e\n        .pdf-app .toolbarButton:hover\n        \u003chr\u003e\n        .pdf-app .toolbarButton:focus\n        \u003chr\u003e\n        .pdf-app .dropdownToolbarButton:hover\n        \u003chr\u003e\n        .pdf-app .secondaryToolbarButton:hover\n        \u003chr\u003e\n        .pdf-app .secondaryToolbarButton:focus\n        \u003chr\u003e\n      \u003c/td\u003e\n      \u003ctd\u003eHover color for buttons of toolbar and secondary toolbar\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-button-toggled-color\u003c/td\u003e\n      \u003ctd\u003e\n        .pdf-app .toolbarButton.toggled\n        \u003chr\u003e\n        .pdf-app .splitToolbarButton.toggled \u003e .toolbarButton.toggled\n        \u003chr\u003e\n        .pdf-app .secondaryToolbarButton.toggled\n        \u003chr\u003e\n        .pdf-app .outlineItemToggler:hover\n        \u003chr\u003e\n        .pdf-app .outlineItemToggler:hover + a\n        \u003chr\u003e\n        .pdf-app .outlineItemToggler:hover ~ .outlineItems\n        \u003chr\u003e\n        .pdf-app .outlineItem \u003e a:hover\n        \u003chr\u003e\n        .pdf-app .attachmentsItem \u003e button:hover\n      \u003c/td\u003e\n      \u003ctd\u003e\n        Background color for toggleable buttons when selected, outline items on hover, attachment items on hover\n        \u003cimg src=\"./readme/toggleable-items.jpg\" alt=\"toggleable items\"\u003e\n       \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-dialog-button-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app .dialog .overlayButton\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/dialog-buttons.jpg\" alt=\"dialog buttons\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-dialog-button-font-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app .dialog .overlayButton\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/dialog-buttons.jpg\" alt=\"dialog buttons\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-error-more-info-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #errorMoreInfo\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/error-more-info.jpg\" alt=\"error more info\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-error-more-info-font-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #errorMoreInfo\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/error-more-info.jpg\" alt=\"error more info\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-error-wrapper-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #errorWrapper\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/error-wrapper.jpg\" alt=\"error wrapper\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-find-input-placeholder-font-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #findInput::placeholder\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/find-input-placeholder.jpg\" alt=\"find input placeholder\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-find-message-font-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #findMsg\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/find-message.jpg\" alt=\"find message\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-find-results-count-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #findResultsCount\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/find-results-count.jpg\" alt=\"find results count\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-find-results-count-font-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #findResultsCount\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/find-results-count.jpg\" alt=\"find results count\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-horizontal-toolbar-separator-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app .horizontalToolbarSeparator\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/horizontal-separator.jpg\" alt=\"horizontal separator\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-input-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app .toolbarField\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/toolbar-field.jpg\" alt=\"toolbar field\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-input-font-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app .toolbarField\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/toolbar-field.jpg\" alt=\"toolbar field\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-loading-bar-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #loadingBar .progress\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/loading-bar-color.jpg\" alt=\"loading bar color\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-loading-bar-secondary-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #loadingBar .progress.indeterminate .glimmer\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/loading-bar-secondary-color.jpg\" alt=\"loading bar secondary color\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-not-found-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #findInput.notFound\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/not-found.jpg\" alt=\"not found\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-overlay-container-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #overlayContainer\u003c/td\u003e\n      \u003ctd\u003eBackground color for overlay container of dialogs\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-overlay-container-dialog-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #overlayContainer \u003e .container \u003e .dialog\u003c/td\u003e\n      \u003ctd\u003e\n        Background color for document properties, password, print dialogs\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-overlay-container-dialog-font-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #overlayContainer \u003e .container \u003e .dialog\u003c/td\u003e\n      \u003ctd\u003e\n        Font color for document properties, password, print dialogs\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-overlay-container-dialog-separator-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app .dialog .separator\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/dialog-separator.jpg\" alt=\"dialog separator\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-sidebar-content-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #sidebarContent\u003c/td\u003e\n      \u003ctd\u003e\n        Background color for sidebar\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-split-toolbar-button-separator-color\u003c/td\u003e\n      \u003ctd\u003e\n        .pdf-app .splitToolbarButtonSeparator\n        \u003chr\u003e\n        .pdf-app .verticalToolbarSeparator\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/vertical-separator.jpg\" alt=\"vertical separator\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-thumbnail-selection-ring-selected-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app .thumbnail.selected \u003e .thumbnailSelectionRing\u003c/td\u003e\n      \u003ctd\u003e\n        Border color for selected thumbnail\n        \u003cimg src=\"./readme/thumbnail-border.jpg\" alt=\"thumbnail border\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-thumbnail-selection-ring-color\u003c/td\u003e\n      \u003ctd\u003e\n        .pdf-app a:focus \u003e .thumbnail \u003e .thumbnailSelectionRing\n        \u003chr\u003e\n        .pdf-app .thumbnail:hover \u003e .thumbnailSelectionRing\n      \u003c/td\u003e\n      \u003ctd\u003e\n        Border color for thumbnail on hover and focus\n        \u003cimg src=\"./readme/thumbnail-border.jpg\" alt=\"thumbnail border\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-toolbar-color\u003c/td\u003e\n      \u003ctd\u003e\n        .pdf-app #toolbarContainer\n        \u003chr\u003e\n        .pdf-app .findbar\n        \u003chr\u003e\n        .pdf-app .secondaryToolbar\n        \u003chr\u003e\n        .pdf-app .doorHanger:after\n        \u003chr\u003e\n        .pdf-app .doorHangerRight:after\n        \u003chr\u003e\n        .pdf-app .dropdownToolbarButton \u003e select\n        \u003chr\u003e\n        .pdf-app .dropdownToolbarButton \u003e select \u003e option\n      \u003c/td\u003e\n      \u003ctd\u003e\n        Background color for toolbar, findbar, secondary toolbar, page scale dropdown\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-toolbar-font-color\u003c/td\u003e\n      \u003ctd\u003e\n        .pdf-app .toolbarButton\n        \u003chr\u003e\n        .pdf-app .dropdownToolbarButton\n        \u003chr\u003e\n        .pdf-app .secondaryToolbarButton\n        \u003chr\u003e\n        .pdf-app .dropdownToolbarButton \u003e select\n        \u003chr\u003e\n        .pdf-app .toolbarLabel\n        \u003chr\u003e\n        .pdf-app .outlineItem \u003e a\n        \u003chr\u003e\n        .pdf-app .attachmentsItem \u003e button\n      \u003c/td\u003e\n      \u003ctd\u003e\n        Font color for toolbar, findbar, secondary toolbar, page scale dropdown, attachments name\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e--pdf-toolbar-sidebar-color\u003c/td\u003e\n      \u003ctd\u003e.pdf-app #toolbarSidebar\u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg src=\"./readme/sidebar.jpg\" alt=\"sidebar\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/details\u003e\n\n# Icons customization\n\nTo use default icons `import \"vue-pdf-app/dist/icons/main.css\";`.\n\nTo use custom icons you have to implement [icons.css](https://github.com/sandanat/vue-pdf-app/blob/master/src/sass/icons.scss):\n\n```css\n.vue-pdf-app-icon::before,\n.vue-pdf-app-icon::after {\n  font-family: \"your font family\";\n}\n\n.vue-pdf-app-icon.zoom-out::before {\n  content: \"icon code\";\n}\n```\n\n# Light/dark themes\n\n\u003cdetails\u003e\n\u003csummary\u003eAlgorithm of theme apply\u003c/summary\u003e\n\u003cimg src=\"./readme/algorithm-of-theme-apply.jpg\" alt=\"Algorithm of theme apply\"\u003e\n\u003c/details\u003e\n\nToggle theme button is not implemented by default.\nIt's up to you to decide where to place it.\nThe button can be implemented with slots:\n\n```vue\n\u003cvue-pdf-app\u003e\n  \u003ctemplate #footer=\"{ toggleTheme }\"\u003e\n    \u003cbutton @click=\"toggleTheme\" type=\"button\"\u003eToggle theme\u003c/button\u003e\n  \u003c/template\u003e\n\u003c/vue-pdf-app\u003e\n```\n\n# Localized panel\n\nEnglish is the default language for panel.\nUse `\u003clink rel=\"resource\" type=\"application/l10n\" href=\"path-to-localization-file\"\u003e` in your html for localization.\nSee [localization file examples](https://github.com/mozilla/pdf.js/tree/master/l10n \"file examples\").\n\n# Examples\n\n## Script tag (unpkg)\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003ctitle\u003eVue-pdf-app demo\u003c/title\u003e\n    \u003clink\n      rel=\"stylesheet\"\n      href=\"https://unpkg.com/vue-pdf-app@2.0.0/dist/icons/main.css\"\n    /\u003e\n    \u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/vue-pdf-app@2.0.0\"\u003e\u003c/script\u003e\n    \u003cstyle\u003e\n      body,\n      html {\n        padding: 0;\n        margin: 0;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003cdiv id=\"app\" style=\"height: 100vh;\"\u003e\n      \u003cvue-pdf-app pdf=\"/sample.pdf\"\u003e\u003c/vue-pdf-app\u003e\n    \u003c/div\u003e\n    \u003cscript\u003e\n      new Vue({\n        components: {\n          VuePdfApp: window[\"vue-pdf-app\"]\n        }\n      }).$mount(\"#app\");\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Typescript\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-pdf-app pdf=\"/sample.pdf\"\u003e\u003c/vue-pdf-app\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport \"vue-pdf-app/dist/icons/main.css\";\nimport VuePdfApp from \"vue-pdf-app\";\nimport { Component, Vue } from \"vue-property-decorator\";\n\n@Component({\n  components: {\n    VuePdfApp\n  }\n})\nexport default class App extends Vue {}\n\u003c/script\u003e\n```\n\n## Lazy loading\n\nPDFJS is a huge package (see the library size table above).\nSo use lazy loading to split your bundle into small pieces.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-pdf-app\u003e\u003c/vue-pdf-app\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport \"vue-pdf-app/dist/icons/main.css\";\nimport Loader from \"./components/Loader.vue\";\n\nexport default {\n  name: \"App\",\n  components: {\n    \"vue-pdf-app\": () =\u003e ({\n      component: new Promise((res) =\u003e {\n        return setTimeout(\n          () =\u003e res(import(/* webpackChunkName: \"pdf-viewer\" */ \"vue-pdf-app\")),\n          4000\n        );\n      }),\n      loading: Loader\n    })\n  }\n};\n\u003c/script\u003e\n```\n\n## PDFJS interaction\n\nYou can interact with pdfjs library when pdf is opened via `open` event.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv id=\"pdf-wrapper\"\u003e\n      \u003cvue-pdf-app pdf=\"/sample.pdf\" @open=\"openHandler\"\u003e\u003c/vue-pdf-app\u003e\n    \u003c/div\u003e\n    \u003cdiv id=\"info\"\u003e\n      \u003ch1\u003ePDF info:\u003c/h1\u003e\n      \u003cdiv v-for=\"item in info\" :key=\"item.name\"\u003e\n        \u003cspan\u003e{{ item.name }}: {{ item.value }}\u003c/span\u003e\n        \u003cbr /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport \"vue-pdf-app/dist/icons/main.css\";\nimport VuePdfApp from \"vue-pdf-app\";\n\nexport default {\n  name: \"App\",\n  components: {\n    VuePdfApp\n  },\n  data() {\n    return {\n      info: []\n    };\n  },\n  methods: {\n    async openHandler(pdfApp) {\n      this.info = [];\n      const info = await pdfApp.pdfDocument\n        .getMetadata()\n        .catch(console.error.bind(console));\n\n      if (!info) return;\n      const props = Object.keys(info.info);\n      props.forEach((prop) =\u003e {\n        const obj = {\n          name: prop,\n          value: info.info[prop]\n        };\n        this.info.push(obj);\n      });\n    }\n  }\n};\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandanat%2Fvue-pdf-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandanat%2Fvue-pdf-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandanat%2Fvue-pdf-app/lists"}