@songxh2/vue3-pdf-viewer v0.9.5

介绍

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目录：

    <!--#if !full psfjs for vue need only-->
    <link rel="resource" type="application/l10n" href="locale/locale.properties">
    <!--#endif-->

<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国际化）：

<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国际化）：

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