alex-pdf-viewer pdf预览组件

功能特性

兼容IE、Firefox、chrome，

软件架构

基于pdf.js版本构建的pdfjs-dist 2.16.105版本，采用pdfjs-dist库原生工厂方法完成解析、渲染、预览和打印功能。

快速开始

安装依赖

npm install alex-pdf-viewer

使用方法

<template>
  <div id="app" style="height: 500px;width: 800px;">
    <pdf-view pdf="http://127.0.0.1/demo.pdf"></pdf-view>
  </div>
</template>
<script>
// 导入组件
import pdfView from "alex-pdf-viewer";

export default {
  // 注册组件
  components: {
    pdfView
  }
}

</script>

props

| 参数名 | 说明 | 类型 | 是否必填 | 默认值 | |---------|------------------------------|---------------------|------|--------| | pdf | PDF文档地址或Blob | String, ArrayBuffer | 是 | - | | mode | 配置模式normal正常,simple简约,pure纯净 | String | 否 | normal | | config | 配置 | Object | 否 | 请参阅附1 | | idConfig | 自定义按钮配置 | Object | 否 | 请参阅附2 | | title | 阻止document.title设置为pdf文件名 | Boolean | 否 | false | | theme | 主题,dark/light | String | 否 | light | | fileName | 文件名 | String | 否 | - | | pageScale | 初始缩放比例 | Number, String | 否 | auto | | pageNumber | 初始页码 | Number | 否 | 1 |

// 附1 config
const config = {
    sidebar: {
        viewThumbnail: true,
        viewOutline: true,
        viewAttachments: true
    },
    secondaryToolbar: {
        secondaryPresentationMode: true,
        secondaryOpenFile: true,
        secondaryPrint: true,
        secondaryDownload: true,
        secondaryViewBookmark: true,
        firstPage: true,
        lastPage: true,
        pageRotateCw: true,
        pageRotateCcw: true,
        cursorSelectTool: true,
        cursorHandTool: true,
        scrollVertical: true,
        scrollHorizontal: true,
        scrollWrapped: true,
        spreadNone: true,
        spreadOdd: true,
        spreadEven: true,
        documentProperties: true
    },
    toolbar: {
        toolbarViewerLeft: {
            findbar: true,
            previous: true,
            next: true,
            pageNumber: true
        },
        toolbarViewerRight: {
            presentationMode: true,
            openFile: true,
            print: true,
            download: true,
            viewBookmark: true
        },
        toolbarViewerMiddle: {
            zoomOut: true,
            zoomIn: true,
            scaleSelectContainer: true,
            rotate: true
        }
    },
    errorWrapper: true
}

// 附2 idConfig
const idConfig = {
    cursorHandTool: string,
    cursorSelectTool: string,
    documentProperties: string,
    download: string,
    findbar: string,
    findEntireWord: string,
    findHighlightAll: string,
    findInput: string,
    findMatchCase: string,
    findMessage: string,
    findNext: string,
    findPrevious: string,
    findResultsCount: string,
    firstPage: string,
    lastPage: string,
    nextPage: string,
    numPages: string,
    openFile: string,
    pageNumber: string,
    pageRotateCcw: string,
    pageRotateCw: string,
    presentationMode: string,
    previousPage: string,
    print: string,
    scrollHorizontal: string,
    scrollVertical: string,
    scrollWrapped: string,
    sidebarToggle: string,
    spreadEven: string,
    spreadNone: string,
    spreadOdd: string,
    toggleFindbar: string,
    viewAttachments: string,
    viewBookmark: string,
    viewOutline: string,
    viewThumbnail: string,
    zoomIn: string,
    zoomOut: string,
    rotate: string
}

事件

| 事件名 | 说明 | 参数 | 影响版本 | |----------|---------------|--------|---| | created | 组件created生命周期 | pdfApp |--| | open | 打开PDF文档 | pdfApp |--| | rendered | 渲染PDF文档 | pdfApp |--| | pagechange | 页码变化事件 | page |2.0.3|

<template>
  <pdf-viewer
      ref="pdfviewer"
      :pdf="pdf"
      @created="createdHandler"
      @open="openHandler"
      @pagechange="pagechange"
      @rendered="renderedHandler">
  </pdf-viewer>
</template>

<script>
export default {
  data() {
    return {
      pdf: "/demo.pdf"
    }
  },
  methods: {
    // 组件created生命周期事件
    createdHandler(pdfApp) {
      // 阻止浏览器选项卡标题更改为 PDF 文档名称
      pdfApp.isViewerEmbedded = true;
    },
    // PDF文档opened事件
    async openHandler(pdfApp) {
      // 可以获取文档meta数据
      this.info = [];
      const info = await pdfApp.pdfDocument
          .getMetadata()
          .catch(console.error.bind(console));
      if (!info) return;
      const props = Object.keys(info.info);
      props.forEach((prop) => {
        const obj = {
          name: prop,
          value: info.info[prop],
        };
        this.info.push(obj);
      });
    },
    // PDF在可视区域渲染完毕事件
    renderedHandler(pdfApp) {
      // 设置pdf文档缩放比例
      setTimeout(() => (pdfApp.pdfViewer.currentScaleValue = "page-height"));
    },
    pagechange(page) {
      console.log(page);
    }
  }
}
</script>

方法

| 方法名 | 说明 | 参数 | |----------|----------|---------------------| | printPDF | 打印PDF文件 | String, ArrayBuffer | | getProperties | 异步获取文档属性 | - |

// 打印任意PDF文档，支持二进制数据格式
this.$refs.pdfviewer.printPDF("/pdf/a.pdf");

const docAttr = await this.$refs.pdfviewer.getProperties();
// {
//     author: "Administrator",
//     creator: "Microsoft Office Word",
//     fileName: "1.pdf",
//     height: 297,
//     keywords: "undefined",
//     orientation: "portrait",
//     pageCount: 5,
//     pageSize: "210 × 297 毫米 (A4, 纵向)",
//     pagesRotation: 0,
//     paper: "A4",
//     producer: "Aspose.Words for .NET 18.7",
//     subject: "undefined",
//     title: "undefined",
//     version: "1.5",
//     width: 210
// }

pdf.js原生方法

// 从组件中获取pdfjs-dist app实例，操作所有原生
const { pdfApp } = this.$refs.pdfviewer;
// 首页尾页切换
pdfApp.page = pdfApp.page === 1 ? pdfApp.pagesCount : 1;

// 全屏演示
pdfApp.requestPresentationMode();

// 下载当前pdf
pdfApp.download();

// 打开查找工具栏
pdfApp.findBar.toggle();

// 切换侧栏
pdfApp.pdfSidebar?.open();
pdfApp.pdfSidebar?.close();
pdfApp.pdfSidebar?.toggle();

// 放大、缩小\自动缩放
pdfApp.zoomIn();
pdfApp.zoomOut();
pdfApp.pdfViewer.currentScaleValue = "auto"

// 控制旋转
pdfApp.rotatePages(90);

// 显示文档属性
pdfApp.pdfDocumentProperties.open();

// 关闭当前pdf，打开另外一份pdf预览
pdfApp.close();
pdfApp.open("/pdf/a.pdf");