# VuePdfViewer

**Repository Path**: songxh2/vue-pdf-viewer

## Basic Information

- **Project Name**: VuePdfViewer
- **Description**: mozila的pdfjs太庞大了，但目前vue3的实现库也太过简单，没有renderqueue渲染队列，没有EventBus消息总线，内存优化等等，前端性能堪忧，于是想起要开发个基于vue3的pdf插件，开干，慢慢来，一步步实现。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-10-29
- **Last Updated**: 2023-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, pdf, Viewer

## README

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


#### VuePdfViewer 开发路线图
1. 先整体移植pdfjs-web代码到vue3
2. 创建分支pdfjs-full-version，保留pdfjs原来基本所有功能;
3. master主干将精简原有pdfjs功能，保留查找/缩放/全屏/打印等功能，扩充显示部分页面等功能;
4. simple-pdf-viewer-dev 分支，保留查找/缩放/全屏/打印等功能，div包裹元素滚动，扩充显示部分页面等功能；
5. simple-pdf-viewer-windowscroll分支，保留查找/缩放/全屏/打印等功能，删除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
```