vue3-pdf-app 插件

网站预览PDF最佳且最简单的方式：

PDF FileName

如果需要自定义网页内预览，可以采用本PDF预览组件（PDFViewer.vue）

本组件基于vue3-pdf-app 插件进行二次封装，更适合日常使用需要！

插件支持功能包括但不限于：缩放、旋转、全屏预览、打印、下载、内容检索、dark/light主题定制化、侧边缩略图、页码跳转、本地化配置、多个浏览器支持（经测试 Google、Firefox、safari 均支持良好）、查看文档属性！

其中 dark 和 light 主题均支持自定义覆盖各个部分颜色变量，从而定制主题样式！

插件默认语言是English，同时也可定制本地化语言，只需从以下链接下载所需资源，使用 引入即可：

  • zh-CN resource

  • localization resources

组件可自定义设置以下属性：

  • pdf文件地址（src），类型：string，必传，默认 ”

  • 预览容器宽度（width），类型：number | string，默认 ‘100%’

  • 预览容器高度（height），类型：number | string，默认 ‘100vh’

  • 页面默认缩放规则（pageScale），类型：number | string，默认 ‘page-fit’，自适应展示一页，可选：’page-actual’|’page-width’|’page-height’|’page-fit’|’auto’，数字即代表缩放为：pageScale%

  • 预览主题（theme），类型：string，默认 ‘dark’，可选 dark | light

  • 覆盖pdf文件名（fileName），类型：string，默认 ”

效果如下图：

theme: dark

theme: light

①安装插件：yarn addvue3-pdf-app

②创建PDF预览组件PDFViewer.vue：

import { computed } from 'vue'import VuePdfApp from 'vue3-pdf-app'import 'vue3-pdf-app/dist/icons/main.css'interface Props {src: string // pdf地址width" />// 定制化主题色.pdf-app.dark {--pdf-app-background-color: rgb(83, 86, 89);--pdf-sidebar-content-color: rgb(51, 54, 57);--pdf-toolbar-sidebar-color: #24364e;--pdf-toolbar-color: rgb(50, 54, 57);--pdf-loading-bar-color: #606c88;--pdf-loading-bar-secondary-color: @themeColor;--pdf-find-results-count-color: #d9d9d9;--pdf-find-results-count-font-color: #525252;--pdf-find-message-font-color: #a6b7d0;--pdf-not-found-color: #f66;--pdf-split-toolbar-button-separator-color: #fff;--pdf-toolbar-font-color: #d9d9d9;--pdf-button-hover-font-color: @themeColor;--pdf-button-toggled-color: #606c88;--pdf-horizontal-toolbar-separator-color: #fff;--pdf-input-color: #606c88;--pdf-input-font-color: #d9d9d9;--pdf-find-input-placeholder-font-color: @themeColor;--pdf-thumbnail-selection-ring-color: hsla(0,0%,100%,.15);--pdf-thumbnail-selection-ring-selected-color: rgb(147, 179, 242);--pdf-error-wrapper-color: #f55;--pdf-error-more-info-color: #d9d9d9;--pdf-error-more-info-font-color: #000;--pdf-overlay-container-color: rgba(0,0,0,.2);--pdf-overlay-container-dialog-color: #24364e;--pdf-overlay-container-dialog-font-color: #d9d9d9;--pdf-overlay-container-dialog-separator-color: #fff;--pdf-dialog-button-font-color: #d9d9d9;--pdf-dialog-button-color: #606c88;:deep(.thumbnail.selected>.thumbnailSelectionRing) {background-color: rgb(147, 179, 242);}}/* for light theme */.pdf-app.light {--pdf-app-background-color: rgb(245,245,245);--pdf-sidebar-content-color: rgb(245,245,245);--pdf-toolbar-sidebar-color: rgb(190,190,190);--pdf-toolbar-color: rgb(225,225,225);--pdf-loading-bar-color: #3f4b5b;--pdf-loading-bar-secondary-color: #666;--pdf-find-results-count-color: #3f4b5b;--pdf-find-results-count-font-color: hsla(0,0%,100%,.87);--pdf-find-message-font-color: hsla(0,0%,100%,.87);--pdf-not-found-color: brown;--pdf-split-toolbar-button-separator-color: #000;--pdf-toolbar-font-color: rgb(142,142,142);--pdf-button-hover-font-color: #666;--pdf-button-toggled-color: #3f4b5b;--pdf-horizontal-toolbar-separator-color: #000;--pdf-input-color: #3f4b5b;--pdf-input-font-color: #d9d9d9;--pdf-find-input-placeholder-font-color: #666;--pdf-thumbnail-selection-ring-color: hsla(208,7%,46%,.7);--pdf-thumbnail-selection-ring-selected-color: #3f4b5b;--pdf-error-wrapper-color: #f55;--pdf-error-more-info-color: #d9d9d9;--pdf-error-more-info-font-color: #000;--pdf-overlay-container-color: hsla(208,7%,46%,.7);--pdf-overlay-container-dialog-color: #6c757d;--pdf-overlay-container-dialog-font-color: #d9d9d9;--pdf-overlay-container-dialog-separator-color: #000;--pdf-dialog-button-font-color: #d9d9d9;--pdf-dialog-button-color: #3f4b5b;:deep(.thumbnail.selected>.thumbnailSelectionRing) {background-color: rgb(105, 105, 105);}}

③在要使用的页面引入：

// import PDFSrc from '@/assets/files/Markdown.pdf'const PDFSrc = new URL('@/assets/files/Markdown.pdf', import.meta.url).href// pdf document pages are rendered. Can be used to set default pages scalefunction onLoaded (pdfApp: any) {console.log('loaded app:', pdfApp)}
vue3-pdf-app 参考文档
  • vue3-pdf-app
PDFViewer 基本使用