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");