@vue-pdf-viewer/viewer 1.10.0-beta.1 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +154 -35
- package/dist/index.js +13 -6
- package/dist/index.umd.cjs +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,64 +1,183 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
<a href="https://www.vue-pdf-viewer.dev
|
|
2
|
+
<a href="https://www.vue-pdf-viewer.dev/?utm_source=npmjs" target="_blank">
|
|
3
3
|
<picture>
|
|
4
|
-
<source srcset="https://raw.githubusercontent.com/vue-pdf-viewer/vue-pdf-viewer/main/assets/img/vue-pdf-
|
|
5
|
-
<img alt="Vue PDF Viewer" src="https://raw.githubusercontent.com/vue-pdf-viewer/vue-pdf-viewer/main/assets/img/vue-pdf-
|
|
4
|
+
<source srcset="https://raw.githubusercontent.com/vue-pdf-viewer/vue-pdf-viewer/main/assets/img/vue-pdf-viewer_cover.webp">
|
|
5
|
+
<img alt="Vue PDF Viewer" src="https://raw.githubusercontent.com/vue-pdf-viewer/vue-pdf-viewer/main/assets/img/vue-pdf-viewer_cover.webp">
|
|
6
6
|
</picture>
|
|
7
7
|
</a>
|
|
8
8
|
</div>
|
|
9
9
|
|
|
10
|
-
<
|
|
11
|
-
|
|
10
|
+
<br/>
|
|
12
11
|
<div align="center">
|
|
13
|
-
Works seamlessly on your Vue or Nuxt websites. Customizable
|
|
12
|
+
Works seamlessly on your Vue 3 or Nuxt websites. Fast, Customizable and Web Responsive PDF viewer. Save you weeks of development time.
|
|
14
13
|
</div>
|
|
15
14
|
<br/>
|
|
16
15
|
|
|
17
16
|
<div align="center">
|
|
18
17
|
|
|
19
18
|
[Vue PDF Viewer Home][vuepdfviewer] - [License](#page_facing_up-license) - [Documentation][vuepdfviewer-docs]
|
|
20
|
-
|
|
21
|
-
Available for: Vue.js (3.0^), Nuxt (3.0^)
|
|
22
19
|
|
|
23
20
|
[][npm]
|
|
24
21
|
[][twitter]
|
|
25
22
|
|
|
26
23
|
</div>
|
|
27
24
|
|
|
28
|
-
# :
|
|
25
|
+
# :star: Why Vue PDF Viewer
|
|
29
26
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
27
|
+
- **Save Weeks of Development Time**: Vue PDF Viewer simplifies PDF integration with ready-to-use tools, minimizing the need for custom development and saving you valuable time.
|
|
28
|
+
- **Tailored for Vue.js & Nuxt.js**: Vue PDF Viewer is native to Vue.js, ensuring smooth integration into your projects.
|
|
29
|
+
- **Customizability at Its Core**: Built with flexibility in mind, allowing you to match your application’s unique style and functionality.
|
|
30
|
+
- **High-Performance & Rapid Rendering**: Optimized for rendering large PDFs efficiently, Vue PDF Viewer delivers lightning-fast load times with features like virtual scrolling.
|
|
31
|
+
- **Accessibility & Localization**: Designed with inclusivity in mind, Vue PDF Viewer supports ARIA attributes and localized tooltips, catering to diverse user bases.
|
|
32
|
+
- **Modern Browser Compatibility**: Works seamlessly across modern browsers, eliminating compatibility headaches.
|
|
33
|
+
- **Active Development & Support**: With regular updates and a responsive support team, Vue PDF Viewer evolves to meet developer needs.
|
|
37
34
|
|
|
38
|
-
#
|
|
35
|
+
# 📜 Background
|
|
39
36
|
|
|
40
|
-
As developers ourselves, we faced many issues such as browser incompatibility and customizability while working with PDF libraries.
|
|
37
|
+
As developers ourselves, we faced many issues such as browser incompatibility and customizability while trying to render a PDF document or working with PDF libraries. Having faced issues using PDF libraries, we want the solution to be flexible for Vue.js developers and teams. More importantly, the technical document must be easy to use!
|
|
41
38
|
|
|
42
39
|
# :sparkles: Features
|
|
43
40
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
41
|
+
- 🎯 **Interactive & Immersive Viewing Experience** with features like rotation, zoom, and keyboard navigation.
|
|
42
|
+
- 📱 **Responsive Across All Devices** for a consistent experience on desktops, tablets and mobile devices.
|
|
43
|
+
- 🎨 **Customizable UI and Styling** to tailor the viewer’s appearance to match your website’s theme.
|
|
44
|
+
- 🧭 **Advanced Navigation Options** to browse documents easily with table of contents, hyperlinks, and a powerful search tool.
|
|
45
|
+
- ⚡ **High-Performance Rendering** to load large PDF documents quickly and handle complex elements like vector graphics with ease.
|
|
46
|
+
- 🔧 **Programmatic Control with Instance APIs**, allowing you to interact with the viewer programmatically.
|
|
47
|
+
- 🖋️ **Form Support for XFA and AcroForms** to seamlessly display interactive PDF forms.
|
|
48
|
+
- 🌍 **Localization Support** to translate tooltips and text into your preferred language for an inclusive experience.
|
|
49
|
+
- 📂 **Document Management Tools**, including features like downloading and printing.
|
|
50
|
+
- 👁️ **Accessibility Support** to built-in support for ARIA attributes and localized tooltips, catering to diverse user bases.
|
|
51
|
+
|
|
52
|
+
For the full feature set, visit [Vue PDF Viewer Features](https://www.vue-pdf-viewer.dev/features?utm_source=npmjs).
|
|
53
|
+
|
|
54
|
+
# :zap: Quick Start Guide
|
|
55
|
+
|
|
56
|
+
Here’s how to get started with Vue PDF Viewer in your Vue 3 or Nuxt 3 project:
|
|
57
|
+
|
|
58
|
+
## 1. Check Prerequsities
|
|
59
|
+
|
|
60
|
+
Here are the basic system requirements to run the Vue PDF Viewer component:
|
|
61
|
+
|
|
62
|
+
- Vue version: >= 3.0
|
|
63
|
+
- Nuxt version: >= 3.0
|
|
64
|
+
|
|
65
|
+
_Remark:_
|
|
66
|
+
|
|
67
|
+
- _Vite version will affect the Vue or Nuxt version used._
|
|
68
|
+
- _If using TypeScript, it requires >= TypeScript 4.6._
|
|
69
|
+
|
|
70
|
+
### Browser support
|
|
71
|
+
|
|
72
|
+
| Chrome | Firefox | Edge | Safari | Safari iOS | Chrome Android |
|
|
73
|
+
| ------ | ------- | ---- | ------ | ---------- | -------------- |
|
|
74
|
+
| 115+ | 115+ | 115+ | 16.5+ | 16.5+ | 126+ |
|
|
75
|
+
|
|
76
|
+
## 2. Install the Package
|
|
77
|
+
|
|
78
|
+
Use your preferred package manager to install the Vue PDF Viewer package:
|
|
79
|
+
|
|
80
|
+
### Using bun:
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
bun add @vue-pdf-viewer/viewer
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Using npm:
|
|
87
|
+
|
|
88
|
+
```bash
|
|
89
|
+
npm install @vue-pdf-viewer/viewer
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Using yarn:
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
yarn add @vue-pdf-viewer/viewer
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Using pnpm:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
pnpm install @vue-pdf-viewer/viewer
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Vue PDF Viewer uses APIs from pdf.js and pnpm command will attempt to update the version of pdfjs-dist that may be higher than the default version in the Vue PDF Viewer library. You might encounter an error, such as:
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
UnknownErrorException: The API version "4.4.168" does not match the Worker version "4.0.269".
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
To avoid version mismatch, please add pnpm.overrides to your package.json to specify the exact version of pdfjs-dist:
|
|
111
|
+
|
|
112
|
+
```json
|
|
113
|
+
"pnpm": {
|
|
114
|
+
"overrides": {
|
|
115
|
+
"pdfjs-dist": "4.4.168"
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
After that, you can install Vue PDF Viewer via pnpm command
|
|
121
|
+
|
|
122
|
+
```bash
|
|
123
|
+
pnpm add @vue-pdf-viewer/viewer
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
For more information on how to use different package managers, please visit our [installation guide](https://docs.vue-pdf-viewer.dev/introduction/getting-started.html#installation?utm_source=npmjs).
|
|
127
|
+
|
|
128
|
+
## 3. Import and Use the Component
|
|
129
|
+
|
|
130
|
+
To initiate Vue PDF Viewer, you will first need to import VPdfViewer component.
|
|
131
|
+
|
|
132
|
+
There are two main ways to use Vue PDF Viewer in your project, namely:
|
|
133
|
+
|
|
134
|
+
- **Composition API**: A new method to organize and reuse logic by allowing developers to write components as functions.
|
|
135
|
+
- **Options API**: A traditional method from Vue 2 where components are grouped into series of options.
|
|
136
|
+
|
|
137
|
+
### Composition API:
|
|
138
|
+
|
|
139
|
+
```vue
|
|
140
|
+
<script setup>
|
|
141
|
+
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
|
|
142
|
+
</script>
|
|
143
|
+
<template>
|
|
144
|
+
<div :style="{ width: '1028px', height: '700px' }">
|
|
145
|
+
<VPdfViewer
|
|
146
|
+
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
|
|
147
|
+
/>
|
|
148
|
+
</div>
|
|
149
|
+
</template>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Options API:
|
|
153
|
+
|
|
154
|
+
```vue
|
|
155
|
+
<script>
|
|
156
|
+
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
|
|
157
|
+
|
|
158
|
+
export default {
|
|
159
|
+
components: { VPdfViewer },
|
|
160
|
+
data() {
|
|
161
|
+
return {
|
|
162
|
+
src: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
</script>
|
|
167
|
+
<template>
|
|
168
|
+
<VPdfViewer :src="src" />
|
|
169
|
+
</template>
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
You may also check out our [Starter Toolkit](#pushpin-starter-toolkit) for examples to get you started.
|
|
54
173
|
|
|
55
|
-
|
|
174
|
+
### 4. Customize with Props and APIs
|
|
56
175
|
|
|
57
|
-
|
|
176
|
+
Enhance functionality with built-in properties and instance APIs to match your app’s needs.
|
|
58
177
|
|
|
59
|
-
|
|
178
|
+
For detailed usage, refer to our [Documentation][vuepdfviewer-docs].
|
|
60
179
|
|
|
61
|
-
|
|
180
|
+
# :pushpin: Starter Toolkit
|
|
62
181
|
|
|
63
182
|
Here are some sample projects to get started on Vue PDF Viewer quickly:
|
|
64
183
|
|
|
@@ -77,7 +196,7 @@ We are more than happy to help you. If you have any questions, run into any erro
|
|
|
77
196
|
|
|
78
197
|
# :page_facing_up: License
|
|
79
198
|
|
|
80
|
-
Vue PDF Viewer is distributed under our proprietary license. Please refer to our [License page](https://www.vue-pdf-viewer.dev/license-agreement) file for more details.
|
|
199
|
+
Vue PDF Viewer is distributed under our proprietary license. Please refer to our [License page](https://www.vue-pdf-viewer.dev/license-agreement?utm_source=npmjs) file for more details.
|
|
81
200
|
|
|
82
201
|
If you would like to use Vue PDF Viewer commercially, please purchase a license from [our website][vuepdfviewer] or reach out to us directly at [david@vue-pdf-viewer.dev](mailto:david@vue-pdf-viewer.dev).
|
|
83
202
|
|
|
@@ -88,6 +207,6 @@ If you would like to use Vue PDF Viewer commercially, please purchase a license
|
|
|
88
207
|
- [Vue.js](https://vuejs.org/)
|
|
89
208
|
|
|
90
209
|
[twitter]: https://x.com/VuePDF
|
|
91
|
-
[vuepdfviewer]: https://www.vue-pdf-viewer.dev
|
|
92
|
-
[vuepdfviewer-docs]: https://docs.vue-pdf-viewer.dev
|
|
210
|
+
[vuepdfviewer]: https://www.vue-pdf-viewer.dev/?utm_source=npmjs
|
|
211
|
+
[vuepdfviewer-docs]: https://docs.vue-pdf-viewer.dev/?utm_source=npmjs
|
|
93
212
|
[npm]: https://www.npmjs.com/package/@vue-pdf-viewer/viewer
|