npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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