PDF viewer component for Vue 2 and Vue 3
This package is compatible with both Vue 2 and Vue 3. The default exported build is for Vue 3, but dist directory also contains a build for Vue 2 (dist/vue2-pdf-viewer.js). See the example in Usage section.
Depending on the environment, the package can be installed in one of the following ways:
npm install pdf-viewer-vue
yarn add pdf-viewer-vue
<script src="https://unpkg.com/pdf-viewer-vue"></script><template>
<div>
<h1>File</h1>
<PDFViewer
:source="url"
style="height: 100vh; width: 100vw"
@download="handleDownload"
/>
<h1>Base64</h1>
<PDFViewer
:source="base64"
style="height: 100vh; width: 100vw"
@download="handleDownload"
/>
</div>
</template>
<script>
import PDFViewer from 'pdf-viewer-vue'
// OR THE FOLLOWING IMPORT FOR VUE 2
// import PDFViewer from 'pdf-viewer-vue/dist/vue2-pdf-viewer'
export default {
components: {
PDFViewer,
},
data() {
return {
url: '<PDF_URL>',
base64: '<BASE64_ENCODED_PDF>',
}
},
}
</script>| Name | Type | Accepted values | Description |
|---|---|---|---|
| source | string |
document URL or Base64 |
source of document |
| controls | string[] |
['download','print','rotate','zoom','catalog','switchPage',] |
visible controls |
| loading-text | string |
- | loading text |
| rendering-text | string |
- | rendering text |
| settings | { defaultZoom: number } |
- | default settings |
| filename | string |
null |
display filename |
| Name | Value | Description |
|---|---|---|
| download | {source: string; filename: string;} |
pdf file base info |
| loaded | {total: number} |
document load completed |
| loading-failed | Error |
failed to load document |
| rendered | - | finished rendering the document |
| rendering-failed | Error |
failed to render document |
TODO: CodeSandbox or JSFiddle
MIT License. Please see LICENSE file for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent