{"id":13674863,"url":"https://github.com/arkokoley/pdfvuer","last_synced_at":"2025-05-15T05:03:28.139Z","repository":{"id":38146614,"uuid":"138085250","full_name":"arkokoley/pdfvuer","owner":"arkokoley","description":"A PDF viewer for Vue using Mozilla's PDF.js that supports both Vue2 and Vue3","archived":false,"fork":false,"pushed_at":"2023-03-28T21:21:51.000Z","size":9566,"stargazers_count":927,"open_issues_count":36,"forks_count":131,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-07T00:09:29.563Z","etag":null,"topics":["component","hacktoberfest","mozilla-pdf","pdf","pdf-viewer","vue","vue-component","vue2","vue3"],"latest_commit_sha":null,"homepage":"https://arkokoley.github.io/pdfvuer","language":"Vue","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/arkokoley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["arkokoley"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-06-20T20:58:42.000Z","updated_at":"2025-03-29T16:13:12.000Z","dependencies_parsed_at":"2024-04-12T18:47:30.452Z","dependency_job_id":"daa4d873-6d00-421a-83e9-4b15d7650c3a","html_url":"https://github.com/arkokoley/pdfvuer","commit_stats":{"total_commits":111,"total_committers":22,"mean_commits":5.045454545454546,"dds":0.5855855855855856,"last_synced_commit":"725ad9b0e03de65cfe47818b26f1a4370cab8184"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkokoley%2Fpdfvuer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkokoley%2Fpdfvuer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkokoley%2Fpdfvuer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkokoley%2Fpdfvuer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arkokoley","download_url":"https://codeload.github.com/arkokoley/pdfvuer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248657859,"owners_count":21140844,"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":["component","hacktoberfest","mozilla-pdf","pdf","pdf-viewer","vue","vue-component","vue2","vue3"],"created_at":"2024-08-02T11:01:05.368Z","updated_at":"2025-04-14T04:14:03.279Z","avatar_url":"https://github.com/arkokoley.png","language":"Vue","funding_links":["https://github.com/sponsors/arkokoley"],"categories":["Vue","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","PDF"],"readme":"# Pdfvuer\n\n\u003e A PDF viewer for Vue using Mozilla's PDF.js\n\n[![Awesome](https://raw.githubusercontent.com/sindresorhus/awesome/main/media/mentioned-badge.svg)](https://github.com/vuejs/awesome-vue)\n[![npm](https://img.shields.io/npm/v/pdfvuer)](https://npmjs.com/package/pdfvuer)\n[![npm](https://img.shields.io/npm/dm/pdfvuer)](https://npmjs.com/package/pdfvuer)\n[![GitHub Repo stars](https://img.shields.io/github/stars/arkokoley/pdfvuer)](https://github.com/arkokoley/pdfvuer)\n[![npm](https://img.shields.io/npm/l/pdfvuer)](https://github.com/arkokoley/pdfvuer/blob/master/LICENSE)\n\n## Install \n\nFor Vue 2:\n```\nnpm install --save pdfvuer\n```\n\nFor Vue 3:\n```\nnpm i pdfvuer@next --save\n```\n\n## Example - basic\n```vue\n\u003ctemplate\u003e\n  \u003cpdf src=\"./static/relativity.pdf\" :page=\"1\"\u003e\n    \u003ctemplate slot=\"loading\"\u003e\n      loading content here...\n    \u003c/template\u003e\n  \u003c/pdf\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport pdf from 'pdfvuer'\nimport 'pdfjs-dist/build/pdf.worker.entry' // not needed since v1.9.1\n\nexport default {\n  components: {\n    pdf\n  }\n}\n\u003c/script\u003e\n```\n\n## Example - Advanced\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"pdfvuer\"\u003e\n    \u003cdiv id=\"buttons\" class=\"ui grey three item inverted bottom fixed menu transition hidden\"\u003e\n      \u003ca class=\"item\" @click=\"page \u003e 1 ? page-- : 1\"\u003e\n        \u003ci class=\"left chevron icon\"\u003e\u003c/i\u003e\n        Back\n      \u003c/a\u003e\n      \u003ca class=\"ui active item\"\u003e\n        {{page}} / {{ numPages ? numPages : '∞' }}\n      \u003c/a\u003e\n      \u003ca class=\"item\" @click=\"page \u003c numPages ? page++ : 1\"\u003e\n        Forward\n        \u003ci class=\"right chevron icon\"\u003e\u003c/i\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n    \u003cdiv id=\"buttons\" class=\"ui grey three item inverted bottom fixed menu transition hidden\"\u003e\n      \u003ca class=\"item\" @click=\"scale -= scale \u003e 0.2 ? 0.1 : 0\"\u003e\n        \u003ci class=\"left chevron icon\" /\u003e\n          Zoom -\n      \u003c/a\u003e\n      \u003ca class=\"ui active item\"\u003e\n        {{ formattedZoom }} %\n      \u003c/a\u003e\n      \u003ca class=\"item\" @click=\"scale += scale \u003c 2 ? 0.1 : 0\"\u003e\n        Zoom +\n        \u003ci class=\"right chevron icon\" /\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n    \u003cpdf :src=\"pdfdata\" v-for=\"i in numPages\" :key=\"i\" :id=\"i\" :page=\"i\"\n      :scale.sync=\"scale\" style=\"width:100%;margin:20px auto;\"\n        :annotation=\"true\"\n        :resize=\"true\"\n        @link-clicked=\"handle_pdf_link\"\u003e\n      \u003ctemplate slot=\"loading\"\u003e\n        loading content here...\n      \u003c/template\u003e\n    \u003c/pdf\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport pdfvuer from 'pdfvuer'\nimport 'pdfjs-dist/build/pdf.worker.entry' // not needed since v1.9.1\n\nexport default {\n  components: {\n    pdf: pdfvuer\n  },\n  data () {\n    return {\n      page: 1,\n      numPages: 0,\n      pdfdata: undefined,\n      errors: [],\n      scale: 'page-width'\n    }\n  },\n  computed: {\n    formattedZoom () {\n        return Number.parseInt(this.scale * 100);\n    },\n  },\n  mounted () {\n    this.getPdf()\n  },\n  watch: {\n    show: function (s) {\n      if(s) {\n        this.getPdf();\n      }\n    },\n    page: function (p) {\n      if( window.pageYOffset \u003c= this.findPos(document.getElementById(p)) || ( document.getElementById(p+1) \u0026\u0026 window.pageYOffset \u003e= this.findPos(document.getElementById(p+1)) )) {\n        // window.scrollTo(0,this.findPos(document.getElementById(p)));\n        document.getElementById(p).scrollIntoView();\n      }\n    }\n  },\n  methods: {\n    handle_pdf_link: function (params) {\n      // Scroll to the appropriate place on our page - the Y component of\n      // params.destArray * (div height / ???), from the bottom of the page div\n      var page = document.getElementById(String(params.pageNumber));\n      page.scrollIntoView();\n    },\n    getPdf () {\n      var self = this;\n      self.pdfdata = pdfvuer.createLoadingTask('./static/relativity.pdf');\n      self.pdfdata.then(pdf =\u003e {\n        self.numPages = pdf.numPages;\n        window.onscroll = function() { \n          changePage() \n          stickyNav()  \n        }\n\n        // Get the offset position of the navbar\n        var sticky = $('#buttons')[0].offsetTop\n\n        // Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove \"sticky\" when you leave the scroll position\n        function stickyNav() {\n          if (window.pageYOffset \u003e= sticky) {\n            $('#buttons')[0].classList.remove(\"hidden\")\n          } else {\n            $('#buttons')[0].classList.add(\"hidden\")\n          }\n        }\n\n        function changePage () {\n          var i = 1, count = Number(pdf.numPages);\n          do {\n            if(window.pageYOffset \u003e= self.findPos(document.getElementById(i)) \u0026\u0026 \n                window.pageYOffset \u003c= self.findPos(document.getElementById(i+1))) {\n              self.page = i\n            }\n            i++\n          } while ( i \u003c count)\n          if (window.pageYOffset \u003e= self.findPos(document.getElementById(i))) {\n            self.page = i\n          }\n        }\n      });\n    },\n    findPos(obj) {\n      return obj.offsetTop;\n    }\n  }\n}\n\u003c/script\u003e\n\u003cstyle src=\"pdfvuer/dist/pdfvuer.css\"\u003e\u003c/style\u003e\n\u003cstyle lang=\"css\" scoped\u003e\n  #buttons {\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n  }\n  /* Page content */\n  .content {\n    padding: 16px;\n  }\n\u003c/style\u003e\n\n```\n\n## API\n\n### Props\n\n#### :src \u003csup\u003eString / Object - default: ''\u003csup\u003e\nThe url of the pdf file. `src` may also be a `string|TypedArray|DocumentInitParameters|PDFDataRangeTransport` for more details, see [`PDFJS.getDocument()`](https://github.com/mozilla/pdf.js/blob/8ff1fbe7f819513e7d0023df961e3d223b35aefa/src/display/api.js#L117).\n\n#### :page \u003csup\u003eNumber - default: 1\u003csup\u003e\nThe page number to display.\n\n#### :rotate \u003csup\u003eNumber - default: 0\u003csup\u003e\nThe page rotation in degrees, only multiple of 90 are valid.\n\n#### :scale \u003csup\u003eNumber / String - default: 'page-width' - .sync\u003c/sup\u003e\nThe scaling factor. By default, the pdf will be scaled to match the page width\nwith the container width.\nWhen passed value `page-width` and / or using `resize` prop, will send back the scale\ncomputed accordingly via `update:scale` event (use it with `scale.sync=\"scale\"`)\n\n#### :resize \u003csup\u003eBoolean - default: false\u003c/sup\u003e\nEnable Auto Resizing on window resize. By default, autoresizing is disabled.\n\n#### :annotation \u003csup\u003eBoolean - default: false\u003c/sup\u003e\nShow the annotations in the pdf. By default, annotation layer is disabled.\n\n#### :text \u003csup\u003eBoolean - default: true\u003c/sup\u003e\nShow the text layer in the pdf. By default, text layer is enabled.\n\n### Events\n\n#### @numpages \u003csup\u003eNumber\u003csup\u003e\nThe total number of pages of the pdf.\n\n#### @loading \u003csup\u003eBoolean\u003csup\u003e\nThe provided PDF's loading state\n\n#### @error \u003csup\u003eFunction\u003csup\u003e\nFunction handler for errors occurred during loading/drawing PDF source.\n\n#### @link-clicked \u003csup\u003eFunction\u003csup\u003e\nFunction handler for errors occurred during loading/drawing PDF source.\nExample:\n```js\n    handle_pdf_link: function (params) {\n      // Scroll to the appropriate place on our page - the Y component of\n      // params.destArray * (div height / ???), from the bottom of the page div\n      var page = document.getElementById(String(params.pageNumber));\n      page.scrollIntoView();\n    }\n```\n\n\n### Public static methods\n\n#### createLoadingTask(src)\n  * `src`: see `:src` prop  \n  This function creates a PDFJS loading task that can be used and reused as `:src` property.  \n\n## Public Demo\n\nAdvanced Example - [https://arkokoley.github.io/pdfvuer](https://arkokoley.github.io/pdfvuer)\n\n[Used in production by  Gratia](https://goodwill.zense.co.in/resources/1)\n\n\u003e Made with :heart: in Bangalore, India\n\n## License \nMIT \u0026copy; [Gaurav Koley](https://gaurav.koley.in), 2021\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkokoley%2Fpdfvuer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farkokoley%2Fpdfvuer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkokoley%2Fpdfvuer/lists"}