[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9056":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},9056,"pdfvuer","arkokoley\u002Fpdfvuer","arkokoley","A PDF viewer for Vue using Mozilla's PDF.js that supports both Vue2 and Vue3","https:\u002F\u002Farkokoley.github.io\u002Fpdfvuer",null,"Vue",953,134,13,33,0,50.39,"MIT License",false,"master",true,[23,24,25,26,27,28,29,30,31],"component","hacktoberfest","mozilla-pdf","pdf","pdf-viewer","vue","vue-component","vue2","vue3","2026-06-12 04:00:42","# Pdfvuer\n\n> A PDF viewer for Vue using Mozilla's PDF.js\n\n[![Awesome](https:\u002F\u002Fraw.githubusercontent.com\u002Fsindresorhus\u002Fawesome\u002Fmain\u002Fmedia\u002Fmentioned-badge.svg)](https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fawesome-vue)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fpdfvuer)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fpdfvuer)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fpdfvuer)](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fpdfvuer)\n[![GitHub Repo stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Farkokoley\u002Fpdfvuer)](https:\u002F\u002Fgithub.com\u002Farkokoley\u002Fpdfvuer)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002Fpdfvuer)](https:\u002F\u002Fgithub.com\u002Farkokoley\u002Fpdfvuer\u002Fblob\u002Fmaster\u002FLICENSE)\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>\n  \u003Cpdf src=\".\u002Fstatic\u002Frelativity.pdf\" :page=\"1\">\n    \u003Ctemplate slot=\"loading\">\n      loading content here...\n    \u003C\u002Ftemplate>\n  \u003C\u002Fpdf>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport pdf from 'pdfvuer'\nimport 'pdfjs-dist\u002Fbuild\u002Fpdf.worker.entry' \u002F\u002F not needed since v1.9.1\n\nexport default {\n  components: {\n    pdf\n  }\n}\n\u003C\u002Fscript>\n```\n\n## Example - Advanced\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv id=\"pdfvuer\">\n    \u003Cdiv id=\"buttons\" class=\"ui grey three item inverted bottom fixed menu transition hidden\">\n      \u003Ca class=\"item\" @click=\"page > 1 ? page-- : 1\">\n        \u003Ci class=\"left chevron icon\">\u003C\u002Fi>\n        Back\n      \u003C\u002Fa>\n      \u003Ca class=\"ui active item\">\n        {{page}} \u002F {{ numPages ? numPages : '∞' }}\n      \u003C\u002Fa>\n      \u003Ca class=\"item\" @click=\"page \u003C numPages ? page++ : 1\">\n        Forward\n        \u003Ci class=\"right chevron icon\">\u003C\u002Fi>\n      \u003C\u002Fa>\n    \u003C\u002Fdiv>\n    \u003Cdiv id=\"buttons\" class=\"ui grey three item inverted bottom fixed menu transition hidden\">\n      \u003Ca class=\"item\" @click=\"scale -= scale > 0.2 ? 0.1 : 0\">\n        \u003Ci class=\"left chevron icon\" \u002F>\n          Zoom -\n      \u003C\u002Fa>\n      \u003Ca class=\"ui active item\">\n        {{ formattedZoom }} %\n      \u003C\u002Fa>\n      \u003Ca class=\"item\" @click=\"scale += scale \u003C 2 ? 0.1 : 0\">\n        Zoom +\n        \u003Ci class=\"right chevron icon\" \u002F>\n      \u003C\u002Fa>\n    \u003C\u002Fdiv>\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\">\n      \u003Ctemplate slot=\"loading\">\n        loading content here...\n      \u003C\u002Ftemplate>\n    \u003C\u002Fpdf>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport pdfvuer from 'pdfvuer'\nimport 'pdfjs-dist\u002Fbuild\u002Fpdf.worker.entry' \u002F\u002F 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) && window.pageYOffset >= this.findPos(document.getElementById(p+1)) )) {\n        \u002F\u002F 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      \u002F\u002F Scroll to the appropriate place on our page - the Y component of\n      \u002F\u002F params.destArray * (div height \u002F ???), 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('.\u002Fstatic\u002Frelativity.pdf');\n      self.pdfdata.then(pdf => {\n        self.numPages = pdf.numPages;\n        window.onscroll = function() { \n          changePage() \n          stickyNav()  \n        }\n\n        \u002F\u002F Get the offset position of the navbar\n        var sticky = $('#buttons')[0].offsetTop\n\n        \u002F\u002F 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 >= 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 >= self.findPos(document.getElementById(i)) && \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 >= 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\u002Fscript>\n\u003Cstyle src=\"pdfvuer\u002Fdist\u002Fpdfvuer.css\">\u003C\u002Fstyle>\n\u003Cstyle lang=\"css\" scoped>\n  #buttons {\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n  }\n  \u002F* Page content *\u002F\n  .content {\n    padding: 16px;\n  }\n\u003C\u002Fstyle>\n\n```\n\n## API\n\n### Props\n\n#### :src \u003Csup>String \u002F Object - default: ''\u003Csup>\nThe url of the pdf file. `src` may also be a `string|TypedArray|DocumentInitParameters|PDFDataRangeTransport` for more details, see [`PDFJS.getDocument()`](https:\u002F\u002Fgithub.com\u002Fmozilla\u002Fpdf.js\u002Fblob\u002F8ff1fbe7f819513e7d0023df961e3d223b35aefa\u002Fsrc\u002Fdisplay\u002Fapi.js#L117).\n\n#### :page \u003Csup>Number - default: 1\u003Csup>\nThe page number to display.\n\n#### :rotate \u003Csup>Number - default: 0\u003Csup>\nThe page rotation in degrees, only multiple of 90 are valid.\n\n#### :scale \u003Csup>Number \u002F String - default: 'page-width' - .sync\u003C\u002Fsup>\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 \u002F 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>Boolean - default: false\u003C\u002Fsup>\nEnable Auto Resizing on window resize. By default, autoresizing is disabled.\n\n#### :annotation \u003Csup>Boolean - default: false\u003C\u002Fsup>\nShow the annotations in the pdf. By default, annotation layer is disabled.\n\n#### :text \u003Csup>Boolean - default: true\u003C\u002Fsup>\nShow the text layer in the pdf. By default, text layer is enabled.\n\n### Events\n\n#### @numpages \u003Csup>Number\u003Csup>\nThe total number of pages of the pdf.\n\n#### @loading \u003Csup>Boolean\u003Csup>\nThe provided PDF's loading state\n\n#### @error \u003Csup>Function\u003Csup>\nFunction handler for errors occurred during loading\u002Fdrawing PDF source.\n\n#### @link-clicked \u003Csup>Function\u003Csup>\nFunction handler for errors occurred during loading\u002Fdrawing PDF source.\nExample:\n```js\n    handle_pdf_link: function (params) {\n      \u002F\u002F Scroll to the appropriate place on our page - the Y component of\n      \u002F\u002F params.destArray * (div height \u002F ???), 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:\u002F\u002Farkokoley.github.io\u002Fpdfvuer](https:\u002F\u002Farkokoley.github.io\u002Fpdfvuer)\n\n[Used in production by  Gratia](https:\u002F\u002Fgoodwill.zense.co.in\u002Fresources\u002F1)\n\n> Made with :heart: in Bangalore, India\n\n## License \nMIT © [Gaurav Koley](https:\u002F\u002Fgaurav.koley.in), 2021\n","pdfvuer 是一个基于 Mozilla's PDF.js 的 Vue 组件，支持 Vue2 和 Vue3 两种版本。其核心功能包括渲染 PDF 文件、支持页面导航、缩放以及注释等高级特性，并且能够自定义加载界面。该组件利用了 PDF.js 强大的 PDF 渲染能力，同时保持了 Vue 框架的简洁与易用性。适用于需要在 Vue 应用中嵌入 PDF 阅读功能的各种场景，如在线文档预览、电子书阅读器或任何需要展示 PDF 内容的应用程序。",2,"2026-06-11 03:20:58","top_language"]