# vue3预览pdf，修改pdfjs-dist版本为2.16.105

**Repository Path**: zhanggujun/vue-pdf-2.16.105

## Basic Information

- **Project Name**: vue3预览pdf，修改pdfjs-dist版本为2.16.105
- **Description**: vue3预览pdf，修改pdfjs-dist版本为2.16.105
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-26
- **Last Updated**: 2024-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
  <img width=250 src="./docs/public/logo.png" />
  <h1>VuePDF</h1>
</div>

<p>
  <a href="https://www.npmjs.com/package/vue-pdf-2.16.105" target="_blank">
    <img src="https://img.shields.io/npm/v/vue-pdf-2.16.105?style=flat-square" />
  </a>
  <a href="./LICENSE">
    <img src="https://img.shields.io/npm/l/vue-pdf-2.16.105?style=flat-square" />
  </a>
</p>

<div align="center">
  <h2><a href="https://tato30.github.io/vue-pdf/">📖Documentation</a></h2>
</div>

## 修改@tato30/vue-pdf([@tato30/vue-pdf](https://github.com/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

```console
npm i vue-pdf-2.16.105
```

```console
yarn add vue-pdf-2.16.105
```

## Basic Usage

```vue
<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

* [Props](./docs/guide/props.md)
* [Events](./docs/guide/events.md)
* [Methods](./docs/guide/methods.md)
* [Slots](./docs/guide/slots.md)


## 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`.

```vue
<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:

- [text-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css)
- [annotation-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/annotation_layer_builder.css)

### XFA Forms <badge type="tip" text="v1.7" vertical="middle" />

XFA forms also can be supported by enabling them from `usePDF`.

```vue
<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.

```sh
# 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
```