网站预览PDF最佳且最简单的方式：
<a class="u-pdf" href="pdf url..." target="_blank">PDF FileName</a>
如果需要自定义网页内预览，可以采用本PDF预览组件（PDFViewer.vue）
本组件基于 vue3-pdf-app@1.0.3 插件进行二次封装，更适合日常使用需要！
插件支持功能包括但不限于：缩放、旋转、全屏预览、打印、下载、内容检索、dark/light主题定制化、侧边缩略图、页码跳转、本地化配置、多个浏览器支持（经测试：MAC电脑使用 Google、Edge、Firefox、safari 均支持良好）、查看文档属性！
其中 dark 和 light 主题均支持自定义覆盖各个部分颜色变量，从而定制主题样式！
插件默认语言是English，同时也可定制本地化语言为中文，只需从以下链接下载资源文件，使用 引入即可：
组件可自定义设置以下属性：
pdf文件地址（src），类型：string，必传，默认 ''
预览容器宽度（width），类型：number | string，默认 '100%'
预览容器高度（height），类型：number | string，默认 '100%'
页面默认缩放规则（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
①安装插件：pnpm i vue3-pdf-app@1.0.3
②创建PDF预览组件PDFViewer.vue：
<script setup lang="ts">
import { computed } from 'vue'
import VuePdfApp from 'vue3-pdf-app'
import 'vue3-pdf-app/dist/icons/main.css'
interface Props {
src: string|ArrayBuffer // pdf地址
width?: string|number // 预览容器宽度
height?: string|number // 预览容器高度
pageScale?: number|string // 页面默认缩放规则，可选 'page-actual'|'page-width'|'page-height'|'page-fit'|'auto'
theme?: string // 预览主题 可选 dark | light
fileName?: string // 覆盖pdf文件名
}
const props = withDefaults(defineProps<Props>(), {
src: '',
width: '100%',
height: '100%',
pageScale: 'page-fit', // 默认自适应展示一页
theme: 'dark',
fileName: ''
})
const viewerWidth = computed(() => {
if (typeof props.width === 'number') {
return props.width + 'px'
} else {
return props.width
}
})
const viewerHeight = computed(() => {
if (typeof props.height === 'number') {
return props.height + 'px'
} else {
return props.height
}
})
// emitted only once when Pdfjs library is binded to vue component
// Can be used to set Pdfjs config before pdf document opening.
// function afterCreated (pdfApp: any) {
// console.log('afterCreated pdfApp:', pdfApp)
// }
// emitted when pdf is opened but pages are not rendered
// function openHandler (pdfApp: any) {
// console.log('open pdfApp:', pdfApp)
// }
const emit = defineEmits(['loaded'])
// emitted when pdf document pages are rendered. Can be used to set default pages scale
function pagesRendered (pdfApp: any) {
console.log('pagesRendered pdfApp:', pdfApp)
emit('loaded', pdfApp)
}
</script>
<template>
<!-- viewer.properties: 该文件已放置本地，使用相对路径引入，亦可放置cdn上，使用网络路径引入 -->
<link rel="resource" type="application/l10n" href="/src/assets/files/viewer.properties">
<VuePdfApp
:page-scale="pageScale"
:theme="theme"
:style="`width: ${viewerWidth}; height: ${viewerHeight};`"
:pdf="src"
:fileName="fileName"
@pages-rendered="pagesRendered"
v-bind="$attrs"></VuePdfApp>
</template>
<style lang="less" scoped>
@themeColor: #1677FF;
:deep(*) {
box-sizing: content-box;
}
// 定制化主题色
.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);
}
}
</style>
③在要使用的页面引入：
<script setup lang="ts">
import PDFViewer from './PDFViewer.vue'
// 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 scale
const PDFSrc = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/Markdown.pdf')
function onLoaded (pdfApp: any) {
console.log('loaded app:', pdfApp)
}
</script>
<template>
<div>
<h1>vue3-pdf-app 参考文档</h1>
<ul class="m-list">
<li>
<a class="u-file" href="https://www.npmjs.com/package/vue3-pdf-app" target="_blank">vue3-pdf-app</a>
</li>
</ul>
<h2 class="mt30 mb10">PDFViewer 基本使用</h2>
<PDFViewer
page-scale="page-fit"
:width="800"
:height="700"
theme="dark"
:src="PDFSrc"
@loaded="onLoaded" />
</div>
</template>
