{"_id":"@borosr/vue-pdf","name":"@borosr/vue-pdf","dist-tags":{"latest":"1.11.4"},"versions":{"1.11.4":{"name":"@borosr/vue-pdf","version":"1.11.4","description":"PDF component for Vue 3","author":{"name":"Aldo Hernandez","url":"https://github.com/TaTo30"},"license":"MIT","homepage":"https://github.com/TaTo30/vue-pdf/","repository":{"type":"git","url":"git+https://github.com/TaTo30/vue-pdf.git"},"bugs":{"url":"https://github.com/TaTo30/vue-pdf/issues"},"keywords":["pdf","vue","viewer"],"exports":{".":{"types":"./dist/types/index.d.ts","require":"./dist/index.umd.js","import":"./dist/index.mjs"},"./style.css":"./dist/style.css","./src/*":"./src/*"},"main":"./dist/index.umd.js","module":"./dist/index.mjs","types":"./dist/types/index.d.ts","scripts":{"build":"npm run build:lib && npm run build:dts","build:lib":"vite build","build:dts":"vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","lint":"eslint .","lint:fix":"eslint --fix ."},"peerDependencies":{"vue":"^3.2.33"},"dependencies":{"pdfjs-dist":"4.9.124"},"devDependencies":{"@types/node":"^18.16.3","eslint":"^8.39.0","typescript":"^4.9.4","vite":"^4.3.4","vue":"^3.2.47","vue-tsc":"^1.6.3"},"_id":"@borosr/vue-pdf@1.11.4","gitHead":"97b266b5a5ddafbc89ef8e92f590f73d40925400","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-8FTw5jGp3AwGSrL1Td7HQYWBEuENa+SjdyFdxqMWr9eKYfWuviHoCm4blGFVbKprJu0OgAX6jWr3hR8YpVf1OA==","shasum":"3c3a988764c179f0f649659939785acc55a0cb71","tarball":"https://registry.npmjs.org/@borosr/vue-pdf/-/vue-pdf-1.11.4.tgz","fileCount":32,"unpackedSize":3895673,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCuSFGX4W8ENxinQ5Grc1hPuwA3Ar0k5EiIIWZsVctnIgIhANFa2kJx4N211yrj0LnCNl/UGvMvCO+Xxhh49bW0eKmS"}]},"_npmUser":{"name":"borosr","email":"robbie13.boros@gmail.com"},"directories":{},"maintainers":[{"name":"borosr","email":"robbie13.boros@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-pdf_1.11.4_1743776348355_0.07285870280361029"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-04T14:19:08.270Z","1.11.4":"2025-04-04T14:19:08.629Z","modified":"2025-04-04T14:19:08.898Z"},"maintainers":[{"name":"borosr","email":"robbie13.boros@gmail.com"}],"description":"PDF component for Vue 3","homepage":"https://github.com/TaTo30/vue-pdf/","keywords":["pdf","vue","viewer"],"repository":{"type":"git","url":"git+https://github.com/TaTo30/vue-pdf.git"},"author":{"name":"Aldo Hernandez","url":"https://github.com/TaTo30"},"bugs":{"url":"https://github.com/TaTo30/vue-pdf/issues"},"license":"MIT","readme":"<div align=\"center\">\n  <img width=250 src=\"https://raw.githubusercontent.com/TaTo30/vue-pdf/master/samples/logo.png\" />\n  <h1>VuePDF</h1>\n</div>\n\n<p>\n  <a href=\"https://www.npmjs.com/package/@tato30/vue-pdf\" target=\"_blank\">\n    <img src=\"https://img.shields.io/npm/v/@tato30/vue-pdf?style=flat-square\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@tato30/vue-pdf\" target=\"_blank\" >\n    <img src=\"https://img.shields.io/npm/dw/@tato30/vue-pdf?style=flat-square\" />\n  </a>\n  <a href=\"./LICENSE\">\n    <img src=\"https://img.shields.io/npm/l/@tato30/vue-pdf?style=flat-square\" />\n  </a>\n</p>\n\n<div align=\"center\">\n  <h2><a href=\"https://tato30.github.io/vue-pdf/\">📖Documentation</a></h2>\n</div>\n\n# Introduction\n\nVuePDF is a **client-side** component for **Vue 3** that allows you to flexibly render PDF pages within your project. This library wraps `pdf.js` library so all main features of `pdf.js` are supported by `VuePDF` as well. \n\n## Installation\n\n```sh\nnpm i @tato30/vue-pdf\nyarn add @tato30/vue-pdf\n```\n\n## Basic Usage\n\nThe most basic usage is as simple as import the `VuePDF` and `usePDF` and use them on your project :)\n\n```vue\n<script setup>\nimport { VuePDF, usePDF } from '@tato30/vue-pdf'\n\nconst { pdf } = usePDF('sample.pdf')\n</script>\n\n<template>\n  <VuePDF :pdf=\"pdf\" />\n</template>\n```\n\n## Working With Layers\n\n### Text and Annotations\n\nThis component supports text selection and annotation interaction by enabling them with `text-layer` and `annotation-layer` props respectively, but for this layers renders correctly is necessary set some `css` styles, it can be done by importing default styles from `@tato30/vue-pdf/style.css`.\n\n```vue\n<script setup>\nimport { VuePDF, usePDF } from '@tato30/vue-pdf'\nimport '@tato30/vue-pdf/style.css'\n\nconst { pdf } = usePDF('sample.pdf')\n</script>\n\n<template>\n  <VuePDF :pdf=\"pdf\" text-layer annotation-layer />\n</template>\n```\n\n### XFA Forms\nXFA forms also can be supported by enabling them from `usePDF`.\n\n```vue\n<script setup>\nimport { VuePDF, usePDF } from '@tato30/vue-pdf'\nimport '@tato30/vue-pdf/style.css'\n\nconst { pdf } = usePDF({\n  url: '/xfa.pdf',\n  enableXfa: true,\n})\n</script>\n\n<template>\n  <VuePDF :pdf=\"pdf\" />\n</template>\n```\n\n## Server-Side Rendering\n\n`VuePDF` is a client-side library, so if you are working with a SSR framework like `nuxt`, surely it will throw an error during the building stage, if that is the case, you could wrap `VuePDF` in some sort of \"client only\" directive or component, also `usePDF` should be wrapped.\n\n## Supporting Non-Latin characters\n\nIf you are looking for display non-latin text or you are getting a warning like:\n> Warning: Error during font loading: CMapReaderFactory not initialized, see the useWorkerFetch parameter\n\nyou will probably need to copy the `cmaps` directory from `node_modules/pdfjs-dist` to your project's `public` directory, don't worry about no having `pdfjs-dist` it's installed alongside `vue-pdf` package.\n\n\n```\n.\n├─ node_modules\n│  ├─ pdfjs-dist\n│  │  └─ cmaps    <--- Copy this directory\n├─ src\n├─ public         \n|  ├─ *cmaps*     <--- Paste it here!\n├─ package.json\n|  ...\n```\n\nWith that made the `cmaps` will be available on relative path `/cmaps/`, now you need the tell `usePDF` uses that `cmaps` url:\n\n```js\nconst { pdf } = usePDF({\n  url: pdfsource,\n  cMapUrl: '/cmaps/',\n})\n```\n\n## Supporting legacy browsers\n\nIf you need to support legacy browsers you could use any polyfill to patch modern functions, but this workaround only works on the **main** thread, the *worker* that runs in other thread will not get reached by any polyfills you apply. \n\nThis package embed and configure the `pdf.js` *worker* for you but in case you need to support legacy environments you will need to configure the `legacy` *worker* by adding this code:\n\n```vue\n<script setup lang=\"ts\">\n+ import * as PDFJS from 'pdfjs-dist'; \n+ import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url'; \nimport { VuePDF, usePDF } from '@tato30/vue-pdf';\n\n+ PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker \n\nconst { pdf } = usePDF(/** */)\n</script>\n```\n\nJust be aware to set the `legacy` worker before use `usePDF`.\n\n## Common issues\n\n### Promise.withResolvers\n\n> Promise.withResolvers is not a function\n\nThat throws because `Promise.withResolvers` is a relative \"new feature\" of JavaScript's Promises, even if almost all browsers [support it](https://caniuse.com/?search=withResolvers), in NodeJS this feature was fully included on version v22 as a base feature. To solve this issue consider updating node version if you are currently using a lower one.\n\n### Top-level await is not available in the configured target environment\n\n> [ERROR] Top-level await is not available in the configured target environment (\"chrome87\", \"edge88\", \"es2020\", \"firefox78\", \"safari14\" + 2 overrides)\n\nThis error is more related to ESBuild settings instead of compatibility matters, `Top-level await` is (as usually) a \"new feature\" of the JavaScript definition, practically all browsers [support it](https://caniuse.com/?search=top-level%20await) and was included on NodeJS since v14.\n\nTo solve this issue you will need to add this settings on `vite.config`:\n\n```js\noptimizeDeps: {\n  esbuildOptions: {\n    supported: {\n      'top-level-await': true,\n    },\n  },\n},\nesbuild: {\n  supported: {\n    'top-level-await': true,\n  },\n}\n```\n\n\n## Contributing\n\nAny idea, suggestion or contribution to the code or documentation are very welcome.\n\n```sh\n# Clone the repository\ngit clone https://github.com/TaTo30/vue-pdf.git\n# Change to code folder\ncd vue-pdf\n# Install node_modules\nnpm install\n# Run code with hot reload\nnpm run dev\n# Run docs\nnpm run dev:docs\n```\n\n## Looking for maintainers and current status\n\nRefer to this announcement for more details: https://github.com/TaTo30/vue-pdf/discussions/128 \n\n","readmeFilename":"README.md","_rev":"1-8b05d0bcc61d7941ad2dd241d7df7db8"}