@neosjs/pdf-viewer

基于Mozilla的PDFJS封装的Vue3 PDF预览器

基本功能:

• 缩放
• 打开文件
• 打印
• 下载
• 旋转
• 文本选择
• 搜索

安装

pnpm add @neosjs/pdf-viewer

npm install @neosjs/pdf-viewer --save

yarn add @neosjs/pdf-viewer

使用

<template>
  <PdfViewer
    :pdf="pdf"
    :page-number="1"
    :config="config"
    file-name="PDF的名字"
    style="position: relative"
  />
</template>

<script lang="ts">
import PdfViewer from '@neosjs/pdf-viewer'
import '@neosjs/pdf-viewer/dist/index.css'

const pdf = ref('xxxxxx.pdf') // PDF文件的URL
const theme = ref('dark') // 主题颜色
const config = ref({
  secondaryToolbar: false, // 是否显示次要工具栏
  sidebar: false, // 是否显示侧边栏
  toolbar: {
    toolbarViewerLeft: { // 左侧工具栏, 如果不需要显示，可以设置为false
      findbar: true, // 搜索
      previous: true, // 上一页
      next: true, // 下一页
      pageNumber: true // 页码
    },
    toolbarViewerMiddle: { // 中间工具栏, 如果不需要显示，可以设置为false
      zoomOut: true, // 缩小
      zoomIn: true, // 放大
      scaleSelectContainer: false // 缩放选择
    },
    toolbarViewerRight: { // 右侧工具栏, 如果不需要显示，可以设置为false
      presentationMode: true, // 演示模式
      openFile: true, // 打开文件
      print: true, // 打印
      download: true, // 下载
    }
  }
})
</script>

Props

| 名称 | 类型 | 默认值 | 说明 | | ----------- | ------ | ------ | ------------- | | pdf | string | - | PDF文件的URL | | page-number | number | 1 | PDF的初试页码 | | page-scale | number | 1 | PDF的缩放值 | | config | object | - | PDF的配置 | | file-name | string | - | PDF的名字 | | theme | string | dark | 主题颜色 |

Events

| 名称 | 说明 | | -------------- | ------------ | | after-created | PDF创建完成 | | open | PDF打开完成 | | pages-rendered | PDF渲染完成 | | update-theme | 主题颜色更新 |

License

MIT License © 2021-PRESENT NeosJS