Vue-pdf-2.16.105 NPM

修改@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

1 year ago

1 year ago