You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
VuePDF is a **Vue 3** component for pdf.js that allows you to flexibly display PDF pages within your project.
24
+
VuePDF 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.
25
25
26
26
## Installation
27
27
28
-
```console
28
+
```sh
29
29
npm i @tato30/vue-pdf
30
-
```
31
-
32
-
```console
33
30
yarn add @tato30/vue-pdf
34
31
```
35
32
36
33
## Basic Usage
37
34
35
+
The most basic usage is as simple as import the `VuePDF` and `usePDF` and use them on your project :)
36
+
38
37
```vue
39
38
<script setup>
40
39
import { VuePDF, usePDF } from '@tato30/vue-pdf'
41
40
42
-
const { pdf, pages, info } = usePDF('document.pdf')
43
-
44
-
console.log(`Document has ${pages} pages`)
45
-
console.log(`Document info: ${info}`)
41
+
const { pdf } = usePDF('sample.pdf')
46
42
</script>
47
43
48
44
<template>
49
45
<VuePDF :pdf="pdf" />
50
46
</template>
51
47
```
52
48
53
-
## Reference
54
-
55
-
*[Props](./docs/guide/props.md)
56
-
*[Events](./docs/guide/events.md)
57
-
*[Methods](./docs/guide/methods.md)
58
-
*[Slots](./docs/guide/slots.md)
59
-
60
-
61
49
## Working With Layers
62
50
63
51
### Text and Annotations
64
52
65
-
This 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 setting`css` styles, it can be done by importing default styles from `@tato30/vue-pdf/style.css`.
53
+
This component supports textselection and annotationinteraction 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`.
66
54
67
55
```vue
68
56
<script setup>
@@ -77,13 +65,7 @@ const { pdf } = usePDF('sample.pdf')
77
65
</template>
78
66
```
79
67
80
-
You can also create your own custom styles and set them in your project, use this examples as guide:
### XFA Forms <badgetype="tip"text="v1.7"vertical="middle" />
86
-
68
+
### XFA Forms
87
69
XFA forms also can be supported by enabling them from `usePDF`.
88
70
89
71
```vue
@@ -104,24 +86,72 @@ const { pdf } = usePDF({
104
86
105
87
## Server-Side Rendering
106
88
107
-
`VuePDF` is a client-side library, so if you are working with SSR frameworks like `nuxt`, surely will throw error during building stage, if that the case, you could wrap library in some "client only" directive or component, also `usePDF` should be wrapped.
89
+
`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.
90
+
91
+
## Supporting Non-Latin characters
92
+
93
+
If you are looking for display non-latin text or you are getting a warning like:
94
+
> Warning: Error during font loading: CMapReaderFactory not initialized, see the useWorkerFetch parameter
95
+
96
+
you 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.
97
+
98
+
99
+
```
100
+
.
101
+
├─ node_modules
102
+
│ ├─ pdfjs-dist
103
+
│ │ └─ cmaps <--- Copy this directory
104
+
├─ src
105
+
├─ public
106
+
| ├─ *cmaps* <--- Paste it here!
107
+
├─ package.json
108
+
| ...
109
+
```
110
+
111
+
With that made the `cmaps` will be available on relative path `/cmaps/`, now you need the tell `usePDF` uses that `cmaps` url:
112
+
113
+
```js
114
+
const { pdf } =usePDF({
115
+
url: pdfsource,
116
+
cMapUrl:'/cmaps/',
117
+
})
118
+
```
119
+
120
+
## Supporting legacy browsers
121
+
122
+
If 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.
123
+
124
+
This 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:
125
+
126
+
```vue
127
+
<script setup lang="ts">
128
+
+ import * as PDFJS from 'pdfjs-dist';
129
+
+ import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url';
Copy file name to clipboardExpand all lines: docs/guide/introduction.md
+22-4
Original file line number
Diff line number
Diff line change
@@ -119,21 +119,39 @@ const { pdf } = usePDF({
119
119
})
120
120
```
121
121
122
+
## Supporting legacy browsers
123
+
124
+
If 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.
125
+
126
+
This 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:
127
+
128
+
```vue
129
+
<script setup lang="ts">
130
+
import * as PDFJS from 'pdfjs-dist'; // [!code ++]
131
+
import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url'; // [!code ++]
0 commit comments