{"id":19003870,"url":"https://github.com/FranckFreiburger/vue-pdf","last_synced_at":"2025-04-16T22:32:30.635Z","repository":{"id":37431157,"uuid":"87447705","full_name":"FranckFreiburger/vue-pdf","owner":"FranckFreiburger","description":"vue.js pdf viewer","archived":false,"fork":false,"pushed_at":"2024-07-24T01:06:30.000Z","size":139,"stargazers_count":2267,"open_issues_count":255,"forks_count":531,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-04-09T11:51:49.873Z","etag":null,"topics":["component","pdf","pdf-viewer","vue-pdf","vuejs2"],"latest_commit_sha":null,"homepage":null,"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/FranckFreiburger.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,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2017-04-06T15:51:40.000Z","updated_at":"2025-04-08T07:07:23.000Z","dependencies_parsed_at":"2023-02-06T10:31:36.388Z","dependency_job_id":"d73a0053-f300-45da-ba99-28b48fe2b8ce","html_url":"https://github.com/FranckFreiburger/vue-pdf","commit_stats":{"total_commits":188,"total_committers":21,"mean_commits":8.952380952380953,"dds":"0.14893617021276595","last_synced_commit":"a9f01b2392c4cc29587de271c614dd298708649e"},"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fvue-pdf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fvue-pdf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fvue-pdf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranckFreiburger%2Fvue-pdf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FranckFreiburger","download_url":"https://codeload.github.com/FranckFreiburger/vue-pdf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249283094,"owners_count":21243675,"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","pdf","pdf-viewer","vue-pdf","vuejs2"],"created_at":"2024-11-08T18:20:37.090Z","updated_at":"2025-04-16T22:32:30.383Z","avatar_url":"https://github.com/FranckFreiburger.png","language":"JavaScript","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)","Viewers"],"sub_categories":["PDF","UI Components"],"readme":"# vue-pdf\nvue.js pdf viewer is a package for Vue that enables you to display and view PDF's easily via vue components.\n\n## Install via NPM/Yarn\n```bash\nnpm install vue-pdf\n```\n\n```bash\nyarn add vue-pdf\n```\n\n## Example - basic\n```vue\n\u003ctemplate\u003e\n  \u003cpdf src=\"./path/to/static/relativity.pdf\"\u003e\u003c/pdf\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport pdf from 'vue-pdf'\n\nexport default {\n  components: {\n    pdf\n  }\n}\n```\n\n## Demo\n\n[vue-pdf demo on jsfiddle](https://jsfiddle.net/fossfiddler/5k4ptmqg/145/)\n\n_TBD: fix the demo_\n\n## Browser support\nSame browser support as [Vue.js 2](https://github.com/vuejs/vue/blob/dev/README.md)\n\n## Note\nsince v2.x, the script is exported as esm.\n\n## API\n\n### Props\n\n#### :src \u003csup\u003eString / Object - default: ''\u003csup\u003e\nThe url of the given pdf. `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.\nEG: 90, 180, 270, 360, ...\n\n### Events\n\n#### @password \u003csup\u003e(updatePassword, reason)\u003csup\u003e\n  * `updatePassword`: The function to call with the pdf password.\n  * `reason`: the reason why this function is called `'NEED_PASSWORD'` or `'INCORRECT_PASSWORD'`\n\n#### @progress \u003csup\u003eNumber\u003csup\u003e\nDocument loading progress. Range [0, 1].\n\n#### @loaded\nTriggers when the document is loaded.\n\n#### @page-loaded \u003csup\u003eNumber\u003csup\u003e\nTriggers when a page is loaded.\n\n#### @num-pages \u003csup\u003eNumber\u003csup\u003e\nThe sum of all pages from the given pdf.\n\n#### @error \u003csup\u003eObject\u003csup\u003e\nTriggers when an error occurs.\n\n#### @link-clicked \u003csup\u003eNumber\u003csup\u003e\nTriggers when an internal link is clicked\n\n\n### Public methods\n\n#### print(dpi, pageList) * _experimental_ *\n  * `dpi`: the print resolution of the document (try 100).\n  * `pageList`: the list (array) of pages to print.\n\n### Public static methods\n\n#### createLoadingTask(src[, options])\n  * `src`: see `:src` prop  \n  * `options`: an object of options. \n  This function creates a PDFJS loading task that can be used and reused as `:src` property.  \n  The loading task is a promise that resolves with the PDFJS pdf document that exposes the `numPages` property (see example below).\n  \n  **beware:** when the component is destroyed, the object returned by `createLoadingTask()` become invalid. \n  \n  Supported options:\n  * onPassword: Callback that's called when a password protected PDF is being opened.\n  * onProgress: Callback return loading progress.\n  * withCredentials: Wheter or not to send cookies in the fetch request.\n\n\n## Examples\n\n##### Example - current page / page count\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t{{currentPage}} / {{pageCount}}\n\t\t\u003cpdf\n\t\t\tsrc=\"https://cdn.mozilla.net/pdfjs/tracemonkey.pdf\"\n\t\t\t@num-pages=\"pageCount = $event\"\n\t\t\t@page-loaded=\"currentPage = $event\"\n\t\t\u003e\u003c/pdf\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\nimport pdf from 'vue-pdf'\n\nexport default {\n\tcomponents: {\n\t\tpdf\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcurrentPage: 0,\n\t\t\tpageCount: 0,\n\t\t}\n\t}\n}\n\n\u003c/script\u003e\n```\n\n\n##### Example - display multiple pages of the same pdf document\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cpdf\n\t\t\tv-for=\"i in numPages\"\n\t\t\t:key=\"i\"\n\t\t\t:src=\"src\"\n\t\t\t:page=\"i\"\n\t\t\tstyle=\"display: inline-block; width: 25%\"\n\t\t\u003e\u003c/pdf\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\nimport pdf from 'vue-pdf'\n\nvar loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');\n\nexport default {\n\tcomponents: {\n\t\tpdf\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsrc: loadingTask,\n\t\t\tnumPages: undefined,\n\t\t}\n\t},\n\tmounted() {\n\n\t\tthis.src.promise.then(pdf =\u003e {\n\n\t\t\tthis.numPages = pdf.numPages;\n\t\t});\n\t}\n}\n\n\u003c/script\u003e\n```\n\n\n##### Example - print all pages\n```vue\n\u003ctemplate\u003e\n\t\u003cbutton @click=\"$refs.myPdfComponent.print()\"\u003eprint\u003c/button\u003e\n\t\u003cpdf ref=\"myPdfComponent\" src=\"https://cdn.mozilla.net/pdfjs/tracemonkey.pdf\"\u003e\u003c/pdf\u003e\n\u003c/template\u003e\n```\n\n\n##### Example - print multiple pages\n```vue\n\u003ctemplate\u003e\n\t\u003cbutton @click=\"$refs.myPdfComponent.print(100, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14])\"\u003eprint\u003c/button\u003e\n\t\u003cpdf ref=\"myPdfComponent\" src=\"https://cdn.mozilla.net/pdfjs/tracemonkey.pdf\"\u003e\u003c/pdf\u003e\n\u003c/template\u003e\n```\n\n\n##### Example - get text content\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cbutton\n\t\t\t@click=\"logContent\"\n\t\t\u003e\n\t\t\tlog content\n\t\t\u003c/button\u003e\n\t\t\u003cpdf\n\t\t\tref=\"myPdfComponent\"\n\t\t\tsrc=\"https://cdn.mozilla.net/pdfjs/tracemonkey.pdf\"\n\t\t\u003e\u003c/pdf\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\nimport pdf from 'vue-pdf'\n\nexport default {\n\tcomponents: {\n\t\tpdf\n\t},\n\tmethods: {\n\t\tlogContent() {\n\n\t\t\tthis.$refs.myPdfComponent.pdf.forEachPage(function(page) {\n\n\t\t\t\treturn page.getTextContent()\n\t\t\t\t.then(function(content) {\n\n\t\t\t\t\tvar text = content.items.map(item =\u003e item.str);\n\t\t\t\t\tconsole.log(text);\n\t\t\t\t})\n\t\t\t});\n\t\t}\n\t}\n}\n\n\u003c/script\u003e\n```\n\n\n##### Example - complete\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cinput type=\"checkbox\" v-model=\"show\"\u003e\n\t\t\u003cselect v-model=\"src\" style=\"width: 30em\"\u003e\n\t\t\t\u003coption v-for=\"item in pdfList\" :value=\"item\" v-text=\"item\"\u003e\u003c/option\u003e\n\t\t\u003c/select\u003e\n\t\t\u003cinput v-model.number=\"page\" type=\"number\" style=\"width: 5em\"\u003e /{{numPages}}\n\t\t\u003cbutton @click=\"rotate += 90\"\u003e\u0026#x27F3;\u003c/button\u003e\n\t\t\u003cbutton @click=\"rotate -= 90\"\u003e\u0026#x27F2;\u003c/button\u003e\n\t\t\u003cbutton @click=\"$refs.pdf.print()\"\u003eprint\u003c/button\u003e\n\t\t\u003cdiv style=\"width: 50%\"\u003e\n\t\t\t\u003cdiv v-if=\"loadedRatio \u003e 0 \u0026\u0026 loadedRatio \u003c 1\" style=\"background-color: green; color: white; text-align: center\" :style=\"{ width: loadedRatio * 100 + '%' }\"\u003e{{ Math.floor(loadedRatio * 100) }}%\u003c/div\u003e\n\t\t\t\u003cpdf v-if=\"show\" ref=\"pdf\" style=\"border: 1px solid red\" :src=\"src\" :page=\"page\" :rotate=\"rotate\" @password=\"password\" @progress=\"loadedRatio = $event\" @error=\"error\" @num-pages=\"numPages = $event\" @link-clicked=\"page = $event\"\u003e\u003c/pdf\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport pdf from 'vue-pdf'\n\nexport default {\n\tcomponents: {\n\t\tpdf: pdf\n\t},\n\tdata () {\n\t\treturn {\n\t\t\tshow: true,\n\t\t\tpdfList: [\n\t\t\t\t'',\n\t\t\t\t'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf',\n\t\t\t\t'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/freeculture.pdf',\n\t\t\t\t'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/annotation-link-text-popup.pdf',\n\t\t\t\t'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/calrgb.pdf',\n\t\t\t\t'https://cdn.rawgit.com/sayanee/angularjs-pdf/68066e85/example/pdf/relativity.protected.pdf',\n\t\t\t\t'data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nE2NuwoCQQxF+/mK+wMbk5lkHl+wIFislmIhPhYEi10Lf9/MVgZCAufmZAkMppJ6+ZLUuFWsM3ZXxvzpFNaMYjEriqpCtbZSBOsDzw0zjqPHZYtTrEmz4eto7/0K54t7GfegOGCBbBdDH3+y2zsMsVERc9SoRkXORqKGJupS6/9OmMIUfgypJL4KZW5kc3RyZWFtCmVuZG9iago0IDAgb2JqCiAgIDEzOAplbmRvYmoKMiAwIG9iago8PAogICAvRXh0R1N0YXRlIDw8CiAgICAgIC9hMCA8PCAvQ0EgMC42MTE5ODcgL2NhIDAuNjExOTg3ID4+CiAgICAgIC9hMSA8PCAvQ0EgMSAvY2EgMSA+PgogICA+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGFnZQogICAvUGFyZW50IDEgMCBSCiAgIC9NZWRpYUJveCBbIDAgMCA1OTUuMjc1NTc0IDg0MS44ODk3NzEgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9DUyAvRGV2aWNlUkdCCiAgID4+CiAgIC9SZXNvdXJjZXMgMiAwIFIKPj4KZW5kb2JqCjEgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzCiAgIC9LaWRzIFsgNSAwIFIgXQogICAvQ291bnQgMQo+PgplbmRvYmoKNiAwIG9iago8PCAvQ3JlYXRvciAoY2Fpcm8gMS4xMS4yIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQogICAvUHJvZHVjZXIgKGNhaXJvIDEuMTEuMiAoaHR0cDovL2NhaXJvZ3JhcGhpY3Mub3JnKSkKPj4KZW5kb2JqCjcgMCBvYmoKPDwgL1R5cGUgL0NhdGFsb2cKICAgL1BhZ2VzIDEgMCBSCj4+CmVuZG9iagp4cmVmCjAgOAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDA1ODAgMDAwMDAgbiAKMDAwMDAwMDI1MiAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDAyMzAgMDAwMDAgbiAKMDAwMDAwMDM2NiAwMDAwMCBuIAowMDAwMDAwNjQ1IDAwMDAwIG4gCjAwMDAwMDA3NzIgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA4CiAgIC9Sb290IDcgMCBSCiAgIC9JbmZvIDYgMCBSCj4+CnN0YXJ0eHJlZgo4MjQKJSVFT0YK',\n\t\t\t],\n\t\t\tsrc:'',\n\t\t\tloadedRatio: 0,\n\t\t\tpage: 1,\n\t\t\tnumPages: 0,\n\t\t\trotate: 0,\n\t\t}\n\t},\n\tmethods: {\n\t\tpassword: function(updatePassword, reason) {\n\n\t\t\tupdatePassword(prompt('password is \"test\"'));\n\t\t},\n\t\terror: function(err) {\n\n\t\t\tconsole.log(err);\n\t\t}\n\t}\n}\n\u003c/script\u003e\n```\n\n## Credits\n[\u003cimg src=\"https://www.franck-freiburger.com/FF.png\" width=\"16\"\u003e Franck Freiburger](https://www.franck-freiburger.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFranckFreiburger%2Fvue-pdf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFranckFreiburger%2Fvue-pdf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFranckFreiburger%2Fvue-pdf/lists"}