{"id":13859072,"url":"https://github.com/vinodnimbalkar/svelte-pdf","last_synced_at":"2025-05-15T15:02:19.148Z","repository":{"id":40479965,"uuid":"247415128","full_name":"vinodnimbalkar/svelte-pdf","owner":"vinodnimbalkar","description":"svelte-pdf provides a component for rendering PDF documents using PDF.js","archived":false,"fork":false,"pushed_at":"2025-04-14T20:02:40.000Z","size":2149,"stargazers_count":218,"open_issues_count":10,"forks_count":49,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T11:57:09.642Z","etag":null,"topics":["javascript","pdf","pdf-viewer","pdf-viewer-component","pdfjs","pdfjs-dist","svelte"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svelte-pdf","language":"Svelte","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/vinodnimbalkar.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":["vinodnimbalkar"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://paypal.me/vinodnimbalkar"]}},"created_at":"2020-03-15T06:38:41.000Z","updated_at":"2025-04-21T12:34:08.000Z","dependencies_parsed_at":"2024-02-29T16:35:13.130Z","dependency_job_id":"edbb6c04-21d1-44ae-9837-8a6b7afa6985","html_url":"https://github.com/vinodnimbalkar/svelte-pdf","commit_stats":{"total_commits":69,"total_committers":8,"mean_commits":8.625,"dds":"0.34782608695652173","last_synced_commit":"4ec76af75dfc729d949f766fc575b29341ec49a8"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinodnimbalkar%2Fsvelte-pdf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinodnimbalkar%2Fsvelte-pdf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinodnimbalkar%2Fsvelte-pdf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinodnimbalkar%2Fsvelte-pdf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinodnimbalkar","download_url":"https://codeload.github.com/vinodnimbalkar/svelte-pdf/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252873985,"owners_count":21817711,"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":["javascript","pdf","pdf-viewer","pdf-viewer-component","pdfjs","pdfjs-dist","svelte"],"created_at":"2024-08-05T03:02:31.480Z","updated_at":"2025-05-07T11:57:20.356Z","avatar_url":"https://github.com/vinodnimbalkar.png","language":"Svelte","funding_links":["https://github.com/sponsors/vinodnimbalkar","https://paypal.me/vinodnimbalkar"],"categories":["Svelte"],"sub_categories":[],"readme":"# svelte-pdf\n\n[![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/2346-shield.svg)](https://madewithsvelte.com/p/svelte-pdf/shield-link)\n![npm](https://img.shields.io/npm/dw/svelte-pdf?style=flat-square)\n![npm](https://img.shields.io/npm/v/svelte-pdf?style=flat-square)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/7a836d5a-d877-412f-8219-731b7a4d9d13/deploy-status)](https://app.netlify.com/sites/svelte-pdf/deploys)\n\nSimple svelte PDF Viewer component with controls like\n\n- Page navigation\n- Zoom\n- Rotation\n- Print\n- AutoFlip Page\n\n## Demo\n\nSource code of demo page is included in example directory.\n\nhttps://svelte-pdf.vinversion.com\n\n## How to install\n\n```\nnpm install svelte-pdf\n```\n\n## How to use\n\n#### Using local path\n\n```js\n\u003cscript\u003e\n\timport PdfViewer from 'svelte-pdf';\n\u003c/script\u003e\n\n\u003cPdfViewer url='./sample.pdf' /\u003e\n\n```\n\n#### Using url\n\n```js\n\u003cscript\u003e\n\timport PdfViewer from 'svelte-pdf';\n\u003c/script\u003e\n\n\u003cPdfViewer url='https://raw.githubusercontent.com/vinodnimbalkar/svelte-pdf/369db2f9edbf5ab8c87184193e1404340729bb3a/public/sample.pdf' /\u003e\n\n```\n\n#### Using `base64` encoded string\n\n```js\n\u003cscript\u003e\n\timport PdfViewer from 'svelte-pdf';\n  const base64 =\n    \"JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G\";\n\u003c/script\u003e\n\n\u003cPdfViewer data={atob(base64)} /\u003e\n\n```\n\n#### Monitoring loading progress\n\nFor large PDFs, you can monitor the loading progress using the `onProgress` callback:\n\n```js\n\u003cscript\u003e\n    import PdfViewer from 'svelte-pdf';\n\n  function handleProgress(data) {\n    const { loaded, total } = data;\n    console.log(`Loading: ${Math.round((loaded / total) * 100)}%`);\n    // You could update a progress bar or other UI element here\n  }\n\u003c/script\u003e\n\n\u003cPdfViewer url='./large-sample.pdf' onProgress={handleProgress} /\u003e\n```\n\n## Props\n\n| prop name          | type      | default                                                                                     |\n| ------------------ | --------- | ------------------------------------------------------------------------------------------- |\n| `url`              | `string`  | `N/A`                                                                                       |\n| `data`             | `string`  | `N/A`                                                                                       |\n| `scale`            | `float`   | `1.8`                                                                                       |\n| `pageNum`          | `number`  | `1`                                                                                         |\n| `flipTime`         | `number`  | `120`                                                                                       |\n| `showButtons`      | `array`   | `[\"navigation\", \"zoom\", \"print\", \"rotate\", \"download\", \"autoflip\", \"timeInfo\", \"pageInfo\"]` |\n| `showBorder`       | `boolean` | `true`                                                                                      |\n| `downloadFileName` | `string`  | `N/A`                                                                                       |\n| `onProgress`       | `function` | `undefined`                                                                                |\n\nLet me know if you need any further adjustments!\n## Examples\n\nTo view the examples, clone the **svelte-pdf** repo and install the dependencies:\n\n```bash\n$ git clone https://github.com/vinodnimbalkar/svelte-pdf.git\n$ cd example\n$ npm install\n$ npm run dev\n```\n\nThen run the **http://localhost:5000**:\n\n## How to use it in Sapper with SSR enabled\n\n### 1. Install it as part of `devDependencies`\n\n\u003e When using Svelte components installed from npm, it needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller...\n\n      -- [Rich Harris](https://github.com/Rich-Harris/svelte-workshop#using-external-components)\n\nWe have to install `svelte-pdf` as part of `devDependencies`\n\n```bash\nnpm install -D svelte-pdf\n```\n\n...this will cause it to get bundled (and therefore compiled) with your app.\n\n### 2. Make our `PdfViewer` component SSR compatible\n\nSince out `PdfViewer` component has a dependency on `window` object, we have to use dynamic import, from within the `onMount` function (which is only called on the client), so that our import code is never called on the server. [Refer to the official doc here...](https://sapper.svelte.dev/docs#Making_a_component_SSR_compatible)\n\n```bash\n\n\u003cscript\u003e\n  import { onMount } from \"svelte\";\n  let PdfViewer;\n\n  onMount(async () =\u003e {\n    const module = await import(\"svelte-pdf\");\n    PdfViewer = module.default;\n  });\n\u003c/script\u003e\n\n\u003csvelte:component this={PdfViewer} url=\"YOUR-PDF-URL\"/\u003e\n```\n\n## Contributing\n\nFeel free to open an issue (or even better, send a Pull Request). Contributions are very welcome!! 😄\n\n## License\n\n**MIT \u0026copy; [Vinod Nimbalkar](https://github.com/vinodnimbalkar/svelte-pdf/blob/master/LICENSE)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinodnimbalkar%2Fsvelte-pdf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinodnimbalkar%2Fsvelte-pdf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinodnimbalkar%2Fsvelte-pdf/lists"}