# @songxh2/vue3-pdf-viewer

> pdf viewer plugins for vue3

Latest version **0.9.5** (published 2022-11-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @songxh2/vue3-pdf-viewer
pnpm add @songxh2/vue3-pdf-viewer
yarn add @songxh2/vue3-pdf-viewer
bun add @songxh2/vue3-pdf-viewer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.5 |
| Published | 2022-11-21 |
| First published | 2022-11-12 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | songxh2 |
| Maintainers | songxh2 |
| Keywords | vue, vue3, pdf, pdfjs, viewer, plugins |

## Links

- npm: https://www.npmjs.com/package/@songxh2/vue3-pdf-viewer
- Repository: https://gitee.com/songxh2/vue-pdf-viewer
- Issues: https://gitee.com/songxh2/vue-pdf-viewer/issues
- npm.io page: https://npm.io/package/@songxh2/vue3-pdf-viewer

## Dependencies (1)

- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) ^v2.16.105

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 0.9.5 (latest) — 2022-11-21
- 0.9.4 — 2022-11-20
- 0.9.3 — 2022-11-17
- 0.9.2 — 2022-11-14
- 0.9.1 — 2022-11-14
- 0.9.0 — 2022-11-12

## README

#### 介绍
mozila的pdfjs太庞大了，但目前vue的实现库也太过简单，没有renderqueue渲染队列，没有EventBus消息总线，内存优化等等，前端性能堪忧，于是想起要开发个基于vue3的pdf插件，开干，慢慢来，一步步实现。


#### VuePdfViewer 插件介绍
1. vue3-pdf-viewer-all 插件保留原有pdfjs功能，语言版本保留L10n旧有方式;
2. vue3-pdf-viewer-simple 插件，语言采用vue-i18n，保留查找/缩放/全屏/打印等功能，div包裹元素滚动，扩充显示部分页面等功能；
3. vue3-pdf-viewer-noscroll插件，语言采用vue-i18n，保留查找/缩放/全屏/打印等功能，删除div包裹元素滚动，window滚动更新页面元素，扩充显示部分页面，控制条吸顶等功能；


#### 软件架构
   项目组件仅用于Vue3项目

#### 安装教程

1.  npm安装命令：npm install @songxh2/vue3-pdf-viewer --save
2.  yarn安装命令：yarn add @songxh2/vue3-pdf-viewer

#### 使用说明

1.  full 全功能组件（保留原L10n方式）：
  要求：public/index.html模板文件文件页头加入如下链接代码，及locale文件拷贝至public目录：
```html
    <!--#if !full psfjs for vue need only-->
    <link rel="resource" type="application/l10n" href="locale/locale.properties">
    <!--#endif-->
```

```vue
<template>
    <PdfViewerFull :src="src"/>
</template>

<script>
import PdfViewerFull from "@songxh2/vue3-pdf-viewer/lib/vue3-pdf-viewer-all/index.umd.min.js"
import "@songxh2/vue3-pdf-viewer/lib/vue3-pdf-viewer-all/index.css"

export default {
  name: 'home-1',
  components: {
    PdfViewerFull,
  },
  setup() {
    const src = { url: 'compressed.tracemonkey-pldi-09.pdf', disableAutoFetch: true }
    return {
      src,
    }
  }
}
</script>
<style>
  #app{
    width: 100%;
    height: 100%;
  }
</style>
```

2.  simple 简单组件（已经改成i18n国际化）：
```vue
<template>
  <PdfViewerSimple :maxViewPages="4" :src="src"/>
</template>

<script>
import PdfViewerSimple from "@songxh2/vue3-pdf-viewer/lib/vue3-pdf-viewer-simple/index.umd.min.js"
import "@songxh2/vue3-pdf-viewer/lib/vue3-pdf-viewer-simple/index.css"

export default {
  name: 'TestMe1',
  components: {
    PdfViewerSimple,
  },
  setup() {
    // Vue.use(PdfViewerFull);
    const src = { url: 'compressed.tracemonkey-pldi-09.pdf', disableAutoFetch: true }
    // const src = { url: 'test1.pdf', disableAutoFetch: true }
    return {
      src,
    }
  }
}
</script>
<style>
  #app{
    width: 100%;
    height: 100%;
  }
</style>
```

3.  simple no scroll 简单无滚动组件（已经改成i18n国际化）：
```vue
<template>
  <div style="width: 80%;">
    <p>页头文字.....</p>
    <p>页头文字.....</p>
    <p>页头文字.....</p>
    <p>页头文字.....</p>
    <PdfViewerNoScroll :maxViewPages="4" :src="src"/>
  </div>
</template>

<script>
import PdfViewerNoScroll from "@songxh2/vue3-pdf-viewer/lib/vue3-pdf-viewer-noscroll/index.umd.min.js"
import "@songxh2/vue3-pdf-viewer/lib/vue3-pdf-viewer-noscroll/index.css"

export default {
  name: 'TestMe1',
  components: {
    PdfViewerNoScroll,
  },
  setup() {
    // Vue.use(PdfViewerFull);
    const src = { url: 'compressed.tracemonkey-pldi-09.pdf', disableAutoFetch: true }
    // const src = { url: 'test1.pdf', disableAutoFetch: true }
    return {
      src,
    }
  }
}
</script>
```


#### 项目小问题技巧
1. 因打包需要相对地址，当vue.config.js配置为相对目录publicPath: './'时,npm run serve启动得web服务链接地址不对，解决办法时改回绝对路径publicPath: '/'
2. npm run package 打包lib时，改成"./",不然svg图片找不到位置

#### 项目地址

1.  https://gitee.com/songxh2/vue-pdf-viewer
2.  项目有演示实例


#### npm包发布问题记录，可以不修改当前镜像源
1.  进入需要登录发布的项目目录： cd /vue-project
2.  登录本源命令：npm login --registry https://registry.npmjs.org
3.  发布包命令： npm publish --registry https://registry.npmjs.org --access=public
````#命令行
    PS D:\work\VueProjects> npm login --registry https://registry.npmjs.org
    npm notice Log in on https://registry.npmjs.org/
    Username: username
    Password:
    Email: (this IS public) username@com.com
    npm notice Please check your email for a one-time password (OTP)
    Enter one-time password: 12345678
```

---
_Source: https://npm.io/package/@songxh2/vue3-pdf-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._