├── .husky
    └── pre-commit
├── env.d.ts
├── .lintstagedrc
├── dev
    ├── main.ts
    ├── index.html
    └── App.vue
├── .prettierrc
├── global.d.ts
├── vite.config.dev.ts
├── src
    ├── index.essential.ts
    ├── types.ts
    ├── index.ts
    ├── utils.ts
    ├── composables.ts
    └── VuePdfEmbed.vue
├── tsconfig.test.json
├── tsconfig.lib.json
├── tsconfig.json
├── vitest.config.ts
├── tsconfig.node.json
├── tsconfig.build.json
├── .gitignore
├── vite.config.essential.ts
├── .eslintrc
├── .github
    └── workflows
    │   └── publish-to-npm.yml
├── CONTRIBUTING.md
├── LICENSE
├── vite.config.ts
├── test
    └── VuePdfEmbed.test.ts
├── package.json
└── README.md


/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | lint-staged --concurrent false
2 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/.lintstagedrc:
--------------------------------------------------------------------------------
1 | {
2 |   "*.{js,ts,vue}": "eslint --fix",
3 |   "*": "prettier --write"
4 | }
5 | 


--------------------------------------------------------------------------------
/dev/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | 
3 | import App from './App.vue'
4 | 
5 | createApp(App).mount('#app')
6 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "arrowParens": "always",
3 |   "semi": false,
4 |   "singleQuote": true,
5 |   "tabWidth": 2,
6 |   "trailingComma": "es5"
7 | }
8 | 


--------------------------------------------------------------------------------
/global.d.ts:
--------------------------------------------------------------------------------
 1 | declare global {
 2 |   interface Window {
 3 |     Vue: unknown
 4 |     VuePdfEmbed: unknown
 5 |     useVuePdfEmbed: unknown
 6 |   }
 7 | }
 8 | 
 9 | export {}
10 | 


--------------------------------------------------------------------------------
/vite.config.dev.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | 
4 | export default defineConfig({
5 |   root: 'dev',
6 |   plugins: [vue()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/index.essential.ts:
--------------------------------------------------------------------------------
1 | export { GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.mjs'
2 | export { useVuePdfEmbed } from './composables'
3 | export { default } from './VuePdfEmbed.vue'
4 | 


--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.lib.json",
3 |   "compilerOptions": {
4 |     "composite": true,
5 |     "lib": ["DOM"],
6 |     "types": ["happy-dom", "node"]
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
3 |   "include": ["env.d.ts", "global.d.ts", "src/**/*"],
4 |   "compilerOptions": {
5 |     "composite": true,
6 |     "baseUrl": "."
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.lib.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.node.json"
 9 |     },
10 |     {
11 |       "path": "./tsconfig.test.json"
12 |     }
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | import { getDocument, type PDFDocumentProxy } from 'pdfjs-dist'
2 | 
3 | export type Source = Parameters<typeof getDocument>[0] | PDFDocumentProxy | null
4 | 
5 | export type PasswordRequestParams = {
6 |   callback: Function
7 |   isWrongPassword: boolean
8 | }
9 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, mergeConfig } from 'vitest/config'
 2 | 
 3 | import viteConfig from './vite.config'
 4 | 
 5 | export default mergeConfig(
 6 |   viteConfig,
 7 |   defineConfig({
 8 |     test: {
 9 |       environment: 'happy-dom',
10 |     },
11 |   })
12 | )
13 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/node20/tsconfig.json",
 3 |   "include": ["vite.config.*", "vitest.config.*"],
 4 |   "compilerOptions": {
 5 |     "composite": true,
 6 |     "module": "ESNext",
 7 |     "moduleResolution": "Bundler",
 8 |     "types": ["node"]
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.lib.json",
 3 |   "compilerOptions": {
 4 |     "rootDir": "src",
 5 |     "declaration": true,
 6 |     "declarationDir": "dist/types",
 7 |     "emitDeclarationOnly": true,
 8 |     "noEmit": false,
 9 |     "stripInternal": true,
10 |     "composite": false
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/dev/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1" />
 6 |     <title>vue-pdf-embed</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="./main.ts"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist
 4 | 
 5 | # Local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 
24 | # TypeScript
25 | *.tsbuildinfo
26 | 


--------------------------------------------------------------------------------
/vite.config.essential.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | import { rollupOptions } from './vite.config'
 5 | 
 6 | export default defineConfig({
 7 |   plugins: [vue()],
 8 |   build: {
 9 |     lib: {
10 |       entry: new URL('./src/index.essential.ts', import.meta.url).pathname,
11 |       name: 'VuePdfEmbed',
12 |       fileName: 'index.essential',
13 |       formats: ['es'],
14 |     },
15 |     rollupOptions,
16 |   },
17 | })
18 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "eslint:recommended",
 4 |     "plugin:vue/vue3-recommended",
 5 |     "@vue/typescript/recommended",
 6 |     "prettier"
 7 |   ],
 8 |   "parser": "vue-eslint-parser",
 9 |   "parserOptions": {
10 |     "parser": "@typescript-eslint/parser",
11 |     "ecmaVersion": "latest"
12 |   },
13 |   "plugins": ["@typescript-eslint", "prettier"],
14 |   "rules": {
15 |     "@typescript-eslint/ban-types": "off",
16 |     "prettier/prettier": "warn",
17 |     "vue/require-default-prop": "off"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { GlobalWorkerOptions } from 'pdfjs-dist/legacy/build/pdf.mjs'
 2 | import PdfWorker from 'pdfjs-dist/legacy/build/pdf.worker.min.mjs?url'
 3 | 
 4 | import { useVuePdfEmbed } from './composables'
 5 | import VuePdfEmbed from './VuePdfEmbed.vue'
 6 | 
 7 | if (window?.Vue) {
 8 |   window.VuePdfEmbed = VuePdfEmbed
 9 |   window.useVuePdfEmbed = useVuePdfEmbed
10 | }
11 | 
12 | if (!GlobalWorkerOptions?.workerSrc) {
13 |   GlobalWorkerOptions.workerSrc = PdfWorker
14 | }
15 | 
16 | export { useVuePdfEmbed }
17 | export default VuePdfEmbed
18 | 


--------------------------------------------------------------------------------
/.github/workflows/publish-to-npm.yml:
--------------------------------------------------------------------------------
 1 | name: Publish to npm
 2 | 
 3 | on:
 4 |   release:
 5 |     types:
 6 |       - published
 7 | 
 8 | permissions:
 9 |   contents: read
10 |   id-token: write
11 | 
12 | env:
13 |   HUSKY: 0
14 | 
15 | jobs:
16 |   publish:
17 |     runs-on: ubuntu-latest
18 |     steps:
19 |       - uses: actions/checkout@v4
20 |       - uses: actions/setup-node@v4
21 |         with:
22 |           node-version: 20
23 |           registry-url: https://registry.npmjs.org/
24 |       - run: npm ci
25 |       - run: npm publish --provenance
26 |         env:
27 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
28 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to vue-pdf-embed
 2 | 
 3 | Thank you for considering to contribute to vue-pdf-embed!
 4 | 
 5 | ## Bug reports and feature requests
 6 | 
 7 | We use [GitHub issues](https://github.com/hrynko/vue-pdf-embed/issues) to report bugs and request new features. Please provide as much detail as possible when preparing the description, as this will help other contributors to better understand the problem.
 8 | 
 9 | ## Proposing features and submitting fixes
10 | 
11 | All code changes happen through [pull requests](https://github.com/hrynko/vue-pdf-embed/pulls). We actively welcome your features and fixes. Please provide a detailed description of the changes made and link them to [issues](https://github.com/hrynko/vue-pdf-embed/issues), if any.
12 | 
13 | ## License
14 | 
15 | By contributing, you agree that your contribution will be licensed under the [MIT License](LICENSE).
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Aliaksei Hrynko
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import copy from 'rollup-plugin-copy'
 4 | import CleanCSS from 'clean-css'
 5 | import type { RollupOptions } from 'rollup'
 6 | 
 7 | export const rollupOptions: RollupOptions = {
 8 |   external: ['pdfjs-dist', 'vue'],
 9 |   output: {
10 |     globals: {
11 |       'pdfjs-dist': 'pdfjsLib',
12 |       vue: 'Vue',
13 |     },
14 |     compact: true,
15 |     inlineDynamicImports: true,
16 |   },
17 | }
18 | 
19 | export default defineConfig({
20 |   plugins: [
21 |     copy({
22 |       hook: 'writeBundle',
23 |       targets: Object.entries({
24 |         textLayer: [
25 |           [3103, 3122],
26 |           [582, 709],
27 |         ],
28 |         annotationLayer: [
29 |           [3103, 3122],
30 |           [710, 1074],
31 |         ],
32 |       }).map(([key, ranges]) => ({
33 |         src: 'node_modules/pdfjs-dist/web/pdf_viewer.css',
34 |         dest: 'dist/styles',
35 |         rename: `${key}.css`,
36 |         transform: (contents) => {
37 |           const lines = contents.toString().split('\n')
38 |           const css = ranges.reduce((acc, [start, end]) => {
39 |             return acc + lines.slice(start, end).join('\n')
40 |           }, '')
41 |           return new CleanCSS().minify(css).styles + '\n'
42 |         },
43 |       })),
44 |     }),
45 |     vue(),
46 |   ],
47 |   build: {
48 |     lib: {
49 |       entry: new URL('./src/index.ts', import.meta.url).pathname,
50 |       name: 'VuePdfEmbed',
51 |       fileName: 'index',
52 |     },
53 |     rollupOptions,
54 |   },
55 | })
56 | 


--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import VuePdfEmbed from '../src/index'
 3 | 
 4 | const pdfSource =
 5 |   'data:application/pdf;base64,' +
 6 |   'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxv' +
 7 |   'ZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFn' +
 8 |   'ZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBb' +
 9 |   'IDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFy' +
10 |   'ZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQg' +
11 |   'MCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBv' +
12 |   'YmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAv' +
13 |   'VGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAog' +
14 |   'IC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8s' +
15 |   'IHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAw' +
16 |   'MCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAK' +
17 |   'MDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAg' +
18 |   'MDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFy' +
19 |   'dHhyZWYKNDkyCiUlRU9G'
20 | </script>
21 | 
22 | <template>
23 |   <VuePdfEmbed :source="pdfSource" />
24 | </template>
25 | 
26 | <style lang="scss">
27 | @import 'pdfjs-dist/web/pdf_viewer.css';
28 | 
29 | body {
30 |   padding: 16px;
31 |   background-color: #ccc;
32 | }
33 | 
34 | .vue-pdf-embed {
35 |   margin: auto;
36 |   max-width: 480px;
37 | 
38 |   & > div {
39 |     margin-bottom: 4px;
40 |     box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
41 |   }
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/test/VuePdfEmbed.test.ts:
--------------------------------------------------------------------------------
 1 | import { expect, test, vi } from 'vitest'
 2 | import { flushPromises, mount } from '@vue/test-utils'
 3 | 
 4 | import VuePdfEmbed from '../src/VuePdfEmbed.vue'
 5 | 
 6 | HTMLCanvasElement.prototype.getContext = () => null
 7 | 
 8 | vi.mock('pdfjs-dist/legacy/build/pdf.mjs', () => ({
 9 |   GlobalWorkerOptions: {},
10 |   getDocument: () => ({
11 |     promise: {
12 |       numPages: 3,
13 |       getPage: () => ({
14 |         view: [],
15 |         getViewport: () => ({
16 |           clone: () => ({}),
17 |         }),
18 |         render: () => ({}),
19 |       }),
20 |     },
21 |   }),
22 | }))
23 | 
24 | vi.mock('pdfjs-dist/web/pdf_viewer.mjs', () => ({}))
25 | 
26 | test('sets correct data', async () => {
27 |   const wrapper = mount(VuePdfEmbed, {
28 |     props: {
29 |       source: 'SOURCE',
30 |     },
31 |   })
32 |   await flushPromises()
33 |   expect(wrapper.vm.doc).toBeTruthy()
34 |   expect(wrapper.vm.doc?.numPages).toBe(3)
35 | })
36 | 
37 | test('sets page IDs', async () => {
38 |   const wrapper = mount(VuePdfEmbed, {
39 |     props: {
40 |       id: 'ID',
41 |       source: 'SOURCE',
42 |     },
43 |   })
44 |   await flushPromises()
45 |   expect(wrapper.find('#ID.vue-pdf-embed').exists()).toBe(true)
46 |   expect(wrapper.find('#ID-0.vue-pdf-embed__page').exists()).toBe(false)
47 |   expect(wrapper.find('#ID-1.vue-pdf-embed__page').exists()).toBe(true)
48 |   expect(wrapper.find('#ID-2.vue-pdf-embed__page').exists()).toBe(true)
49 |   expect(wrapper.find('#ID-3.vue-pdf-embed__page').exists()).toBe(true)
50 |   expect(wrapper.find('#ID-4.vue-pdf-embed__page').exists()).toBe(false)
51 | })
52 | 
53 | test('emits successful events', async () => {
54 |   const wrapper = mount(VuePdfEmbed, {
55 |     props: {
56 |       source: 'SOURCE',
57 |     },
58 |   })
59 |   await flushPromises()
60 |   expect(wrapper.emitted()).toHaveProperty('loaded')
61 |   expect(wrapper.emitted()).toHaveProperty('rendered')
62 | })
63 | 
64 | test('renders slots content', async () => {
65 |   const wrapper = mount(VuePdfEmbed, {
66 |     props: {
67 |       source: 'SOURCE',
68 |     },
69 |     slots: {
70 |       'after-page': 'AFTER',
71 |       'before-page': 'BEFORE',
72 |     },
73 |   })
74 |   await flushPromises()
75 |   expect(wrapper.html()).toMatch('AFTER')
76 |   expect(wrapper.html()).toMatch('BEFORE')
77 | })
78 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-pdf-embed",
 3 |   "version": "2.1.3",
 4 |   "description": "PDF embed component for Vue",
 5 |   "keywords": [
 6 |     "vue",
 7 |     "vuejs",
 8 |     "pdf"
 9 |   ],
10 |   "license": "MIT",
11 |   "author": "Aliaksei Hrynko (https://github.com/hrynko)",
12 |   "main": "./dist/index.umd.js",
13 |   "module": "./dist/index.mjs",
14 |   "exports": {
15 |     ".": {
16 |       "import": "./dist/index.mjs",
17 |       "require": "./dist/index.umd.js",
18 |       "types": "./dist/types/index.d.ts"
19 |     },
20 |     "./dist/index.essential.mjs": {
21 |       "import": "./dist/index.essential.mjs",
22 |       "types": "./dist/types/index.essential.d.ts"
23 |     },
24 |     "./dist/styles/*.css": "./dist/styles/*.css"
25 |   },
26 |   "types": "./dist/types/index.d.ts",
27 |   "files": [
28 |     "dist"
29 |   ],
30 |   "repository": "github:hrynko/vue-pdf-embed",
31 |   "scripts": {
32 |     "prepare": "husky install && npm run build",
33 |     "dev": "vite -c vite.config.dev.ts",
34 |     "build": "vite build && vite build -c vite.config.essential.ts --emptyOutDir false",
35 |     "postbuild": "vue-tsc -p tsconfig.build.json",
36 |     "test": "vitest",
37 |     "lint": "eslint . --ext .js,.ts,.vue --fix --ignore-path .gitignore",
38 |     "format": "prettier . --write --ignore-path .gitignore"
39 |   },
40 |   "dependencies": {
41 |     "pdfjs-dist": "^4.10.38"
42 |   },
43 |   "devDependencies": {
44 |     "@tsconfig/node20": "^20.1.4",
45 |     "@types/clean-css": "^4.2.11",
46 |     "@typescript-eslint/eslint-plugin": "^7.18.0",
47 |     "@typescript-eslint/parser": "^7.18.0",
48 |     "@vitejs/plugin-vue": "^4.5.0",
49 |     "@vue/eslint-config-typescript": "^13.0.0",
50 |     "@vue/test-utils": "^2.4.6",
51 |     "@vue/tsconfig": "^0.5.1",
52 |     "clean-css": "^5.3.3",
53 |     "eslint": "^8.57.0",
54 |     "eslint-config-prettier": "^9.1.0",
55 |     "eslint-plugin-prettier": "^5.2.1",
56 |     "eslint-plugin-vue": "^9.27.0",
57 |     "happy-dom": "^15.7.4",
58 |     "husky": "^9.1.4",
59 |     "lint-staged": "^15.2.9",
60 |     "prettier": "^3.3.3",
61 |     "rollup-plugin-copy": "^3.5.0",
62 |     "sass": "^1.77.8",
63 |     "typescript": "^5.5.4",
64 |     "vite": "^5.4.7",
65 |     "vitest": "^2.1.1",
66 |     "vue": "^3.5.0",
67 |     "vue-eslint-parser": "^9.4.3",
68 |     "vue-tsc": "^2.0.29"
69 |   },
70 |   "peerDependencies": {
71 |     "vue": "^3.3.0"
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | import type { PDFDocumentProxy } from 'pdfjs-dist'
 2 | 
 3 | // @internal
 4 | export function addPrintStyles(
 5 |   iframe: HTMLIFrameElement,
 6 |   sizeX: number,
 7 |   sizeY: number
 8 | ) {
 9 |   const style = iframe.contentWindow!.document.createElement('style')
10 |   style.textContent = `
11 |     @page {
12 |       margin: 3mm;
13 |       size: ${sizeX}pt ${sizeY}pt;
14 |     }
15 |     body {
16 |       margin: 0;
17 |     }
18 |     canvas {
19 |       width: 100%;
20 |       page-break-after: always;
21 |       page-break-before: avoid;
22 |       page-break-inside: avoid;
23 |     }
24 |   `
25 |   iframe.contentWindow!.document.head.appendChild(style)
26 |   iframe.contentWindow!.document.body.style.width = '100%'
27 | }
28 | 
29 | // @internal
30 | export function createPrintIframe(
31 |   container: HTMLDivElement
32 | ): Promise<HTMLIFrameElement> {
33 |   return new Promise((resolve) => {
34 |     const iframe = document.createElement('iframe')
35 |     iframe.width = '0'
36 |     iframe.height = '0'
37 |     iframe.style.position = 'absolute'
38 |     iframe.style.top = '0'
39 |     iframe.style.left = '0'
40 |     iframe.style.border = 'none'
41 |     iframe.style.overflow = 'hidden'
42 |     iframe.onload = () => resolve(iframe)
43 |     container.appendChild(iframe)
44 |   })
45 | }
46 | 
47 | // @internal
48 | export function downloadPdf(data: Uint8Array, filename: string) {
49 |   const url = URL.createObjectURL(
50 |     new Blob([data], {
51 |       type: 'application/pdf',
52 |     })
53 |   )
54 |   const anchor = document.createElement('a')
55 |   anchor.href = url
56 |   anchor.download = filename
57 |   anchor.style.display = 'none'
58 |   document.body.append(anchor)
59 |   anchor.click()
60 |   setTimeout(() => {
61 |     URL.revokeObjectURL(url)
62 |     document.body.removeChild(anchor)
63 |   }, 1000)
64 | }
65 | 
66 | // @internal
67 | export function emptyElement(el?: HTMLElement | null) {
68 |   while (el?.firstChild) {
69 |     el.removeChild(el.firstChild)
70 |   }
71 | }
72 | 
73 | // @internal
74 | export function isDocument(doc: unknown): doc is PDFDocumentProxy {
75 |   return doc ? Object.prototype.hasOwnProperty.call(doc, '_pdfInfo') : false
76 | }
77 | 
78 | // @internal
79 | export function releaseChildCanvases(el?: HTMLElement | null) {
80 |   el?.querySelectorAll('canvas').forEach((canvas: HTMLCanvasElement) => {
81 |     canvas.width = 1
82 |     canvas.height = 1
83 |     canvas.getContext('2d')?.clearRect(0, 0, 1, 1)
84 |   })
85 | }
86 | 


--------------------------------------------------------------------------------
/src/composables.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   onBeforeUnmount,
  3 |   shallowRef,
  4 |   toValue,
  5 |   watch,
  6 |   watchEffect,
  7 |   type ComputedRef,
  8 |   type MaybeRef,
  9 |   type ShallowRef,
 10 | } from 'vue'
 11 | import { PasswordResponses, getDocument } from 'pdfjs-dist/legacy/build/pdf.mjs'
 12 | import type {
 13 |   OnProgressParameters,
 14 |   PDFDocumentLoadingTask,
 15 |   PDFDocumentProxy,
 16 | } from 'pdfjs-dist'
 17 | 
 18 | import type { PasswordRequestParams, Source } from './types'
 19 | import { isDocument } from './utils'
 20 | 
 21 | export function useVuePdfEmbed({
 22 |   onError,
 23 |   onPasswordRequest,
 24 |   onProgress,
 25 |   source,
 26 | }: {
 27 |   onError?: (e: Error) => unknown
 28 |   onPasswordRequest?: (passwordRequestParams: PasswordRequestParams) => unknown
 29 |   onProgress?: (progressParams: OnProgressParameters) => unknown
 30 |   source: ComputedRef<Source> | MaybeRef<Source> | ShallowRef<Source>
 31 | }) {
 32 |   const doc = shallowRef<PDFDocumentProxy | null>(null)
 33 |   const docLoadingTask = shallowRef<PDFDocumentLoadingTask | null>(null)
 34 | 
 35 |   watchEffect(async () => {
 36 |     const sourceValue = toValue(source)
 37 | 
 38 |     if (!sourceValue) {
 39 |       return
 40 |     } else if (isDocument(sourceValue)) {
 41 |       doc.value = sourceValue
 42 |       return
 43 |     }
 44 | 
 45 |     try {
 46 |       docLoadingTask.value = getDocument(
 47 |         sourceValue as Parameters<typeof getDocument>[0]
 48 |       )
 49 | 
 50 |       if (onPasswordRequest) {
 51 |         docLoadingTask.value!.onPassword = (
 52 |           callback: Function,
 53 |           response: number
 54 |         ) => {
 55 |           onPasswordRequest({
 56 |             callback,
 57 |             isWrongPassword: response === PasswordResponses.INCORRECT_PASSWORD,
 58 |           })
 59 |         }
 60 |       }
 61 | 
 62 |       if (onProgress) {
 63 |         docLoadingTask.value.onProgress = onProgress
 64 |       }
 65 | 
 66 |       doc.value = await docLoadingTask.value.promise
 67 |     } catch (e) {
 68 |       doc.value = null
 69 | 
 70 |       if (onError) {
 71 |         onError(e as Error)
 72 |       } else {
 73 |         throw e
 74 |       }
 75 |     }
 76 |   })
 77 | 
 78 |   watch(doc, (_, oldDoc) => {
 79 |     oldDoc?.destroy()
 80 |   })
 81 | 
 82 |   onBeforeUnmount(() => {
 83 |     if (docLoadingTask.value?.onPassword) {
 84 |       // @ts-expect-error: onPassword must be reset
 85 |       docLoadingTask.value.onPassword = null
 86 |     }
 87 |     if (docLoadingTask.value?.onProgress) {
 88 |       // @ts-expect-error: onProgress must be reset
 89 |       docLoadingTask.value.onProgress = null
 90 |     }
 91 |     docLoadingTask.value?.destroy()
 92 |     if (!isDocument(toValue(source))) {
 93 |       doc.value?.destroy()
 94 |     }
 95 |   })
 96 | 
 97 |   return {
 98 |     doc,
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 📄 vue-pdf-embed
  2 | 
  3 | PDF embed component for Vue 3 (see [Compatibility](#compatibility) for Vue 2 support)
  4 | 
  5 | [![Awesome List](https://raw.githubusercontent.com/sindresorhus/awesome/main/media/mentioned-badge.svg)](https://github.com/vuejs/awesome-vue)
  6 | [![npm Version](https://img.shields.io/npm/v/vue-pdf-embed?style=flat)](https://npmjs.com/package/vue-pdf-embed)
  7 | [![npm Downloads](https://img.shields.io/npm/dm/vue-pdf-embed?style=flat)](https://npmjs.com/package/vue-pdf-embed)
  8 | [![GitHub Stars](https://img.shields.io/github/stars/hrynko/vue-pdf-embed?style=flat)](https://github.com/hrynko/vue-pdf-embed)
  9 | [![License](https://img.shields.io/npm/l/vue-pdf-embed?style=flat)](https://github.com/hrynko/vue-pdf-embed/blob/main/LICENSE)
 10 | 
 11 | ## Features
 12 | 
 13 | - Controlled rendering of PDF documents in Vue apps
 14 | - Handling password-protected documents
 15 | - Includes text layer (searchable and selectable documents)
 16 | - Includes annotation layer (annotations and links)
 17 | - No peer dependencies or additional configuration required
 18 | - Can be used directly in the browser (see [Examples](#examples))
 19 | 
 20 | ## Compatibility
 21 | 
 22 | This package is only compatible with Vue 3. For Vue 2 support, install `vue-pdf-embed@1` and refer to the [v1 docs](https://github.com/hrynko/vue-pdf-embed/tree/v1).
 23 | 
 24 | ## Installation
 25 | 
 26 | Depending on the environment, the package can be installed in one of the following ways:
 27 | 
 28 | ```shell
 29 | npm install vue-pdf-embed
 30 | ```
 31 | 
 32 | ```shell
 33 | yarn add vue-pdf-embed
 34 | ```
 35 | 
 36 | ```html
 37 | <script src="https://unpkg.com/vue-pdf-embed"></script>
 38 | ```
 39 | 
 40 | ## Usage
 41 | 
 42 | ```vue
 43 | <script setup>
 44 | import VuePdfEmbed from 'vue-pdf-embed'
 45 | 
 46 | // optional styles
 47 | import 'vue-pdf-embed/dist/styles/annotationLayer.css'
 48 | import 'vue-pdf-embed/dist/styles/textLayer.css'
 49 | 
 50 | // either URL, Base64, binary, or document proxy
 51 | const pdfSource = '<PDF_URL>'
 52 | </script>
 53 | 
 54 | <template>
 55 |   <VuePdfEmbed annotation-layer text-layer :source="pdfSource" />
 56 | </template>
 57 | ```
 58 | 
 59 | ### Props
 60 | 
 61 | | Name               | Type                                           | Accepted values                                         | Description                                                                                |
 62 | | ------------------ | ---------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
 63 | | annotationLayer    | `boolean`                                      |                                                         | whether the annotation layer should be enabled                                             |
 64 | | height             | `number`                                       | natural numbers                                         | desired page height in pixels (ignored if the width property is specified)                 |
 65 | | imageResourcesPath | `string`                                       | URL or path with trailing slash                         | path for icons used in the annotation layer                                                |
 66 | | linkService        | `PDFLinkService`                               |                                                         | document navigation service to override the default one (emitting `internal-link-clicked`) |
 67 | | page               | `number` <br> `number[]`                       | `1` to the last page number                             | page number(s) to display (displaying all pages if not specified)                          |
 68 | | rotation           | `number`                                       | `0`, `90`, `180`, `270` (multiples of `90`)             | desired page rotation angle in degrees                                                     |
 69 | | scale              | `number`                                       | rational numbers                                        | desired page viewport scale                                                                |
 70 | | source             | `string` <br> `object` <br> `PDFDocumentProxy` | document URL or Base64 or typed array or document proxy | source of the document to display                                                          |
 71 | | textLayer          | `boolean`                                      |                                                         | whether the text layer should be enabled                                                   |
 72 | | width              | `number`                                       | natural numbers                                         | desired page width in pixels                                                               |
 73 | 
 74 | ### Events
 75 | 
 76 | | Name                  | Value                                                                   | Description                                |
 77 | | --------------------- | ----------------------------------------------------------------------- | ------------------------------------------ |
 78 | | internal-link-clicked | destination page number                                                 | internal link was clicked                  |
 79 | | loaded                | PDF document proxy                                                      | finished loading the document              |
 80 | | loading-failed        | error object                                                            | failed to load document                    |
 81 | | password-requested    | object with `callback` function and `isWrongPassword` flag              | password is needed to display the document |
 82 | | progress              | object with number of `loaded` pages along with `total` number of pages | tracking document loading progress         |
 83 | | rendered              | –                                                                       | finished rendering the document            |
 84 | | rendering-failed      | error object                                                            | failed to render document                  |
 85 | 
 86 | ### Slots
 87 | 
 88 | | Name        | Props                | Description                          |
 89 | | ----------- | -------------------- | ------------------------------------ |
 90 | | after-page  | `page` (page number) | content to be added after each page  |
 91 | | before-page | `page` (page number) | content to be added before each page |
 92 | 
 93 | ### Public Methods
 94 | 
 95 | | Name     | Arguments                                                                    | Description                          |
 96 | | -------- | ---------------------------------------------------------------------------- | ------------------------------------ |
 97 | | download | filename (`string`)                                                          | download document                    |
 98 | | print    | print resolution (`number`), filename (`string`), all pages flag (`boolean`) | print document via browser interface |
 99 | 
100 | **Note:** Public methods can be accessed through a [template ref](https://vuejs.org/guide/essentials/template-refs.html).
101 | 
102 | ## Common Issues and Caveats
103 | 
104 | ### Server-Side Rendering
105 | 
106 | This is a client-side library, so it is important to keep this in mind when working with SSR (server-side rendering) frameworks such as Nuxt. Depending on the framework used, you may need to properly configure the library import or use a wrapper.
107 | 
108 | ### Web Worker Loading
109 | 
110 | The web worker used to handle PDF documents is loaded by default. However, this may not be acceptable due to bundler restrictions or CSP (Content Security Policy). In such cases it is recommended to use the essential build (`index.essential.mjs`) and set up the worker manually using the exposed `GlobalWorkerOptions`.
111 | 
112 | ```js
113 | import { GlobalWorkerOptions } from 'vue-pdf-embed/dist/index.essential.mjs'
114 | import PdfWorker from 'pdfjs-dist/build/pdf.worker.mjs?url'
115 | 
116 | GlobalWorkerOptions.workerSrc = PdfWorker
117 | ```
118 | 
119 | ### Document Loading
120 | 
121 | Typically, document loading is internally handled within the component. However, for optimization purposes, the document can be loaded in the `useVuePdfEmbed` composable function and then passed as the `source` prop of the component (e.g. when sharing the source between multiple instances of the component).
122 | 
123 | ```vue
124 | <script setup>
125 | import VuePdfEmbed, { useVuePdfEmbed } from 'vue-pdf-embed'
126 | 
127 | const { doc } = useVuePdfEmbed({ source: '<PDF_URL>' })
128 | </script>
129 | 
130 | <template>
131 |   <VuePdfEmbed :source="doc" />
132 | </template>
133 | ```
134 | 
135 | ### Resources
136 | 
137 | The path to predefined CMaps should be specified to ensure correct rendering of documents containing non-Latin characters, as well as in case of CMap-related errors:
138 | 
139 | ```vue
140 | <VuePdfEmbed
141 |   :source="{
142 |     cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/',
143 |     url: '<PDF_URL>',
144 |   }"
145 | />
146 | ```
147 | 
148 | The image resource path must be specified for annotations to display correctly:
149 | 
150 | ```vue
151 | <VuePdfEmbed
152 |   image-resources-path="https://unpkg.com/pdfjs-dist/web/images/"
153 |   source="<PDF_URL>"
154 | />
155 | ```
156 | 
157 | **Note:** The examples above use a CDN to load resources, however these resources can also be included in the build by installing the `pdfjs-dist` package as a dependency and further configuring the bundler.
158 | 
159 | ## Examples
160 | 
161 | [Basic Usage Demo (JSFiddle)](https://jsfiddle.net/hrynko/atcn32yp)
162 | 
163 | [Advanced Usage Demo (JSFiddle)](https://jsfiddle.net/hrynko/273a59qr)
164 | 
165 | [Lazy Loading Demo (JSFiddle)](https://jsfiddle.net/hrynko/u149my7h)
166 | 
167 | ## License
168 | 
169 | MIT License. Please see [LICENSE file](LICENSE) for more information.
170 | 


--------------------------------------------------------------------------------
/src/VuePdfEmbed.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { computed, onBeforeUnmount, ref, shallowRef, toRef, watch } from 'vue'
  3 | import { AnnotationLayer, TextLayer } from 'pdfjs-dist/legacy/build/pdf.mjs'
  4 | import { PDFLinkService } from 'pdfjs-dist/web/pdf_viewer.mjs'
  5 | import type {
  6 |   OnProgressParameters,
  7 |   PDFDocumentProxy,
  8 |   PDFPageProxy,
  9 |   PageViewport,
 10 | } from 'pdfjs-dist'
 11 | 
 12 | import type { PasswordRequestParams, Source } from './types'
 13 | import {
 14 |   addPrintStyles,
 15 |   createPrintIframe,
 16 |   downloadPdf,
 17 |   emptyElement,
 18 |   releaseChildCanvases,
 19 | } from './utils'
 20 | import { useVuePdfEmbed } from './composables'
 21 | 
 22 | const props = withDefaults(
 23 |   defineProps<{
 24 |     /**
 25 |      * Whether to enable an annotation layer.
 26 |      */
 27 |     annotationLayer?: boolean
 28 |     /**
 29 |      * Desired page height.
 30 |      */
 31 |     height?: number
 32 |     /**
 33 |      * Root element identifier (inherited by page containers with page number
 34 |      * postfixes).
 35 |      */
 36 |     id?: string
 37 |     /**
 38 |      * Path for annotation icons, including trailing slash.
 39 |      */
 40 |     imageResourcesPath?: string
 41 |     /**
 42 |      * Document navigation service.
 43 |      */
 44 |     linkService?: PDFLinkService
 45 |     /**
 46 |      * Page number(s) to display.
 47 |      */
 48 |     page?: number | number[]
 49 |     /**
 50 |      * Desired page rotation angle.
 51 |      */
 52 |     rotation?: number
 53 |     /**
 54 |      * Desired ratio of canvas size to document size.
 55 |      */
 56 |     scale?: number
 57 |     /**
 58 |      * Source of the document to display.
 59 |      */
 60 |     source: Source
 61 |     /**
 62 |      * Whether to enable a text layer.
 63 |      */
 64 |     textLayer?: boolean
 65 |     /**
 66 |      * Desired page width.
 67 |      */
 68 |     width?: number
 69 |   }>(),
 70 |   {
 71 |     rotation: 0,
 72 |     scale: 1,
 73 |   }
 74 | )
 75 | 
 76 | const emit = defineEmits<{
 77 |   (e: 'internal-link-clicked', value: number): void
 78 |   (e: 'loaded', value: PDFDocumentProxy): void
 79 |   (e: 'loading-failed', value: Error): void
 80 |   (e: 'password-requested', value: PasswordRequestParams): void
 81 |   (e: 'progress', value: OnProgressParameters): void
 82 |   (e: 'rendered'): void
 83 |   (e: 'rendering-failed', value: Error): void
 84 | }>()
 85 | 
 86 | const pageNums = shallowRef<number[]>([])
 87 | const pageScales = ref<number[]>([])
 88 | const root = shallowRef<HTMLDivElement | null>(null)
 89 | 
 90 | let renderingController: { isAborted: boolean; promise: Promise<void> } | null =
 91 |   null
 92 | 
 93 | const { doc } = useVuePdfEmbed({
 94 |   onError: (e) => {
 95 |     pageNums.value = []
 96 |     emit('loading-failed', e)
 97 |   },
 98 |   onPasswordRequest({ callback, isWrongPassword }) {
 99 |     emit('password-requested', { callback, isWrongPassword })
100 |   },
101 |   onProgress: (progressParams) => {
102 |     emit('progress', progressParams)
103 |   },
104 |   source: toRef(props, 'source'),
105 | })
106 | 
107 | const linkService = computed(() => {
108 |   if (!doc.value || !props.annotationLayer) {
109 |     return null
110 |   } else if (props.linkService) {
111 |     return props.linkService
112 |   }
113 | 
114 |   const service = new PDFLinkService()
115 |   service.setDocument(doc.value)
116 |   service.setViewer({
117 |     scrollPageIntoView: ({ pageNumber }: { pageNumber: number }) => {
118 |       emit('internal-link-clicked', pageNumber)
119 |     },
120 |   })
121 |   return service
122 | })
123 | 
124 | /**
125 |  * Downloads the PDF document.
126 |  * @param filename - Predefined filename to save.
127 |  */
128 | const download = async (filename: string) => {
129 |   if (!doc.value) {
130 |     return
131 |   }
132 | 
133 |   const data = await doc.value.getData()
134 |   const metadata = await doc.value.getMetadata()
135 |   const suggestedFilename =
136 |     // @ts-expect-error: contentDispositionFilename is not typed
137 |     filename ?? metadata.contentDispositionFilename ?? ''
138 |   downloadPdf(data, suggestedFilename)
139 | }
140 | 
141 | /**
142 |  * Returns an array of the actual page width and height based on props and
143 |  * aspect ratio.
144 |  * @param ratio - Page aspect ratio.
145 |  */
146 | const getPageDimensions = (ratio: number): [number, number] => {
147 |   let width: number
148 |   let height: number
149 | 
150 |   if (props.height && !props.width) {
151 |     height = props.height
152 |     width = height / ratio
153 |   } else {
154 |     width = props.width ?? root.value!.clientWidth
155 |     height = width * ratio
156 |   }
157 | 
158 |   return [width, height]
159 | }
160 | 
161 | /**
162 |  * Prints a PDF document via the browser interface.
163 |  * @param dpi - Print resolution.
164 |  * @param filename - Predefined filename to save.
165 |  * @param allPages - Whether to ignore the page prop and print all pages.
166 |  */
167 | const print = async (dpi = 300, filename = '', allPages = false) => {
168 |   if (!doc.value) {
169 |     return
170 |   }
171 | 
172 |   const printUnits = dpi / 72
173 |   const styleUnits = 96 / 72
174 |   let container: HTMLDivElement
175 |   let iframe: HTMLIFrameElement
176 |   let title: string | undefined
177 | 
178 |   try {
179 |     container = window.document.createElement('div')
180 |     container.style.display = 'none'
181 |     window.document.body.appendChild(container)
182 |     iframe = await createPrintIframe(container)
183 | 
184 |     const pageNums =
185 |       props.page && !allPages
186 |         ? Array.isArray(props.page)
187 |           ? props.page
188 |           : [props.page]
189 |         : [...Array(doc.value.numPages + 1).keys()].slice(1)
190 | 
191 |     await Promise.all(
192 |       pageNums.map(async (pageNum, i) => {
193 |         const page = await doc.value!.getPage(pageNum)
194 |         const viewport = page.getViewport({
195 |           scale: 1,
196 |           rotation: 0,
197 |         })
198 | 
199 |         if (i === 0) {
200 |           const sizeX = (viewport.width * printUnits) / styleUnits
201 |           const sizeY = (viewport.height * printUnits) / styleUnits
202 |           addPrintStyles(iframe, sizeX, sizeY)
203 |         }
204 | 
205 |         const canvas = window.document.createElement('canvas')
206 |         canvas.width = viewport.width * printUnits
207 |         canvas.height = viewport.height * printUnits
208 |         container.appendChild(canvas)
209 |         const canvasClone = canvas.cloneNode() as HTMLCanvasElement
210 |         iframe.contentWindow!.document.body.appendChild(canvasClone)
211 | 
212 |         await page.render({
213 |           canvasContext: canvas.getContext('2d')!,
214 |           intent: 'print',
215 |           transform: [printUnits, 0, 0, printUnits, 0, 0],
216 |           viewport,
217 |         }).promise
218 | 
219 |         canvasClone.getContext('2d')!.drawImage(canvas, 0, 0)
220 |       })
221 |     )
222 | 
223 |     if (filename) {
224 |       title = window.document.title
225 |       window.document.title = filename
226 |     }
227 | 
228 |     iframe.contentWindow?.focus()
229 |     iframe.contentWindow?.print()
230 |   } finally {
231 |     if (title) {
232 |       window.document.title = title
233 |     }
234 | 
235 |     releaseChildCanvases(container!)
236 |     container!.parentNode?.removeChild(container!)
237 |   }
238 | }
239 | 
240 | /**
241 |  * Renders the PDF document as canvas element(s) and additional layers.
242 |  */
243 | const render = async () => {
244 |   if (!doc.value || renderingController?.isAborted) {
245 |     return
246 |   }
247 | 
248 |   try {
249 |     pageNums.value = props.page
250 |       ? Array.isArray(props.page)
251 |         ? props.page
252 |         : [props.page]
253 |       : [...Array(doc.value.numPages + 1).keys()].slice(1)
254 |     pageScales.value = Array(pageNums.value.length).fill(1)
255 | 
256 |     await Promise.all(
257 |       pageNums.value.map(async (pageNum, i) => {
258 |         const page = await doc.value!.getPage(pageNum)
259 |         if (renderingController?.isAborted) {
260 |           return
261 |         }
262 |         const pageRotation =
263 |           ((props.rotation % 90 === 0 ? props.rotation : 0) + page.rotate) % 360
264 |         const [canvas, div1, div2] = Array.from(
265 |           root.value!.getElementsByClassName('vue-pdf-embed__page')[i].children
266 |         ) as [HTMLCanvasElement, HTMLDivElement, HTMLDivElement]
267 |         const isTransposed = !!((pageRotation / 90) % 2)
268 |         const viewWidth = page.view[2] - page.view[0]
269 |         const viewHeight = page.view[3] - page.view[1]
270 |         const [actualWidth, actualHeight] = getPageDimensions(
271 |           isTransposed ? viewWidth / viewHeight : viewHeight / viewWidth
272 |         )
273 |         const cssWidth = `${Math.floor(actualWidth)}px`
274 |         const cssHeight = `${Math.floor(actualHeight)}px`
275 |         const pageWidth = isTransposed ? viewHeight : viewWidth
276 |         const pageScale = actualWidth / pageWidth
277 |         const viewport = page.getViewport({
278 |           scale: pageScale,
279 |           rotation: pageRotation,
280 |         })
281 | 
282 |         pageScales.value[i] = pageScale
283 | 
284 |         canvas.style.display = 'block'
285 |         canvas.style.width = cssWidth
286 |         canvas.style.height = cssHeight
287 | 
288 |         const renderTasks = [
289 |           renderPage(
290 |             page,
291 |             viewport.clone({
292 |               scale: viewport.scale * window.devicePixelRatio * props.scale,
293 |             }),
294 |             canvas
295 |           ),
296 |         ]
297 | 
298 |         if (props.textLayer) {
299 |           renderTasks.push(
300 |             renderPageTextLayer(
301 |               page,
302 |               viewport.clone({
303 |                 dontFlip: true,
304 |               }),
305 |               div1
306 |             )
307 |           )
308 |         }
309 | 
310 |         if (props.annotationLayer) {
311 |           renderTasks.push(
312 |             renderPageAnnotationLayer(
313 |               page,
314 |               viewport.clone({
315 |                 dontFlip: true,
316 |               }),
317 |               div2 || div1
318 |             )
319 |           )
320 |         }
321 | 
322 |         return Promise.all(renderTasks)
323 |       })
324 |     )
325 | 
326 |     if (!renderingController?.isAborted) {
327 |       emit('rendered')
328 |     }
329 |   } catch (e) {
330 |     pageNums.value = []
331 |     pageScales.value = []
332 | 
333 |     if (!renderingController?.isAborted) {
334 |       emit('rendering-failed', e as Error)
335 |     }
336 |   }
337 | }
338 | 
339 | /**
340 |  * Renders the page content.
341 |  * @param page - Page proxy.
342 |  * @param viewport - Page viewport.
343 |  * @param canvas - HTML canvas.
344 |  */
345 | const renderPage = async (
346 |   page: PDFPageProxy,
347 |   viewport: PageViewport,
348 |   canvas: HTMLCanvasElement
349 | ) => {
350 |   canvas.width = viewport.width
351 |   canvas.height = viewport.height
352 |   await page.render({
353 |     canvasContext: canvas.getContext('2d')!,
354 |     viewport,
355 |   }).promise
356 | }
357 | 
358 | /**
359 |  * Renders the annotation layer for the specified page.
360 |  * @param page - Page proxy.
361 |  * @param viewport - Page viewport.
362 |  * @param container - HTML container.
363 |  */
364 | const renderPageAnnotationLayer = async (
365 |   page: PDFPageProxy,
366 |   viewport: PageViewport,
367 |   container: HTMLDivElement
368 | ) => {
369 |   emptyElement(container)
370 |   new AnnotationLayer({
371 |     accessibilityManager: null,
372 |     annotationCanvasMap: null,
373 |     annotationEditorUIManager: null,
374 |     div: container,
375 |     page,
376 |     structTreeLayer: null,
377 |     viewport,
378 |   }).render({
379 |     annotations: await page.getAnnotations(),
380 |     div: container,
381 |     imageResourcesPath: props.imageResourcesPath,
382 |     linkService: linkService.value!,
383 |     page,
384 |     renderForms: false,
385 |     viewport,
386 |   })
387 | }
388 | 
389 | /**
390 |  * Renders the text layer for the specified page.
391 |  * @param page - Page proxy.
392 |  * @param viewport - Page viewport.
393 |  * @param container - HTML container.
394 |  */
395 | const renderPageTextLayer = async (
396 |   page: PDFPageProxy,
397 |   viewport: PageViewport,
398 |   container: HTMLElement
399 | ) => {
400 |   emptyElement(container)
401 |   new TextLayer({
402 |     container,
403 |     textContentSource: await page.getTextContent(),
404 |     viewport,
405 |   }).render()
406 | }
407 | 
408 | watch(
409 |   doc,
410 |   (newDoc) => {
411 |     if (newDoc) {
412 |       emit('loaded', newDoc)
413 |     }
414 |   },
415 |   { immediate: true }
416 | )
417 | 
418 | watch(
419 |   () => [
420 |     doc.value,
421 |     props.annotationLayer,
422 |     props.height,
423 |     props.imageResourcesPath,
424 |     props.page,
425 |     props.rotation,
426 |     props.scale,
427 |     props.textLayer,
428 |     props.width,
429 |   ],
430 |   async ([newDoc]) => {
431 |     if (newDoc) {
432 |       if (renderingController) {
433 |         renderingController.isAborted = true
434 |         await renderingController.promise
435 |       }
436 | 
437 |       releaseChildCanvases(root.value)
438 |       renderingController = {
439 |         isAborted: false,
440 |         promise: render(),
441 |       }
442 | 
443 |       await renderingController.promise
444 |       renderingController = null
445 |     }
446 |   },
447 |   { immediate: true }
448 | )
449 | 
450 | onBeforeUnmount(() => {
451 |   releaseChildCanvases(root.value)
452 | })
453 | 
454 | defineExpose({
455 |   doc,
456 |   download,
457 |   print,
458 | })
459 | </script>
460 | 
461 | <template>
462 |   <div :id="id" ref="root" class="vue-pdf-embed">
463 |     <div v-for="(pageNum, i) in pageNums" :key="pageNum">
464 |       <slot name="before-page" :page="pageNum" />
465 | 
466 |       <div
467 |         :id="id && `${id}-${pageNum}`"
468 |         class="vue-pdf-embed__page"
469 |         :style="{
470 |           '--scale-factor': pageScales[i],
471 |           position: 'relative',
472 |         }"
473 |       >
474 |         <canvas />
475 | 
476 |         <div v-if="textLayer" class="textLayer" />
477 | 
478 |         <div v-if="annotationLayer" class="annotationLayer" />
479 |       </div>
480 | 
481 |       <slot name="after-page" :page="pageNum" />
482 |     </div>
483 |   </div>
484 | </template>
485 | 


--------------------------------------------------------------------------------