vue-pdf-2.16.105
v1.0.1
Published
PDF component for Vue 3
Downloads
5
Readme
修改@tato30/vue-pdf(@tato30/vue-pdf),把pdfjs-dist从3.x降级为2.16.105,3.x版本依赖了node-pre-gyp,这个包会从github拉依赖,国内访问github不稳定,在服务器上通过jenkins构建会很慢,或者会构建失败
Introduction
VuePDF is a Vue 3 component for pdf.js that allows you to flexibly display PDF pages within your project.
Installation
npm i vue-pdf-2.16.105
yarn add vue-pdf-2.16.105
Basic Usage
<script setup>
import { VuePDF, usePDF } from 'vue-pdf-2.16.105'
const { pdf, pages, info } = usePDF('document.pdf')
console.log(`Document has ${pages} pages`)
console.log(`Document info: ${info}`)
</script>
<template>
<VuePDF :pdf="pdf" />
</template>
Reference
Working With Layers
Text and Annotations
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 vue-pdf-2.16.105/style.css
.
<script setup>
import { VuePDF, usePDF } from 'vue-pdf-2.16.105'
import 'vue-pdf-2.16.105/style.css'
const { pdf } = usePDF('sample.pdf')
</script>
<template>
<VuePDF :pdf="pdf" text-layer annotation-layer />
</template>
You can also create your own custom styles and set them in your project, use this examples as guide:
XFA Forms
XFA forms also can be supported by enabling them from usePDF
.
<script setup>
import { VuePDF, usePDF } from 'vue-pdf-2.16.105'
import 'vue-pdf-2.16.105/style.css'
const { pdf } = usePDF({
url: '/example_xfa.pdf',
enableXfa: true,
})
</script>
<template>
<VuePDF :pdf="pdf" />
</template>
Server-Side Rendering
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.
Contributing
Any idea, suggestion or contribution to the code or documentation are very welcome.
# Clone the repository
git clone https://gitee.com/zhanggujun/vue-pdf-2.16.105.git
# Change to code folder
cd vue-pdf
# Install node_modules
npm install
# Run code with hot reload
npm run dev