基于vue3-pdf-app@1.0.3的Vue3 PDF在线预览
认识vue3-pdf-app
vue3-pdf-app的npm官方链接 点我访问
vue3-pdf-app的github仓库 点我访问
安装vue3-pdf-app
npm i vue3-pdf-app@1.0.3
代码
子组件封装: PdfView.vue
<template>
<!-- viewer.properties: 该文件为PDF插件的中文版配置，放置本地或使用服务器网络地址 -->
<link rel="resource" type="application/l10n" href="/viewer.properties" />
<VuePdfApp
:page-scale="pageScale"
:theme="theme"
:style="`width: ${viewerWidth}; height: ${viewerHeight};`"
:pdf="src"
:file-name="fileName"
v-bind="$attrs"
@pages-rendered="pagesRendered"></VuePdfApp>
</template>
<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; // 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: '100vh',
pageScale: 'page-fit', // 默认自适应展示一页
theme: 'light',
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;
}
});
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>
父组件调用: index.vue
<template>
<pdf-view page-scale="page-fit" width="100%" height="100%" :src="pdfShowSrc" @loaded="onLoaded" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PdfView from './PdfView.vue';
// 在线地址或本地地址
const pdfShowSrc= ref('/Pdf文件.pdf');
</script>
中文配置文件viewer.properties
因为pdf.js插件更新，pdfjs官网的中文国际化文件已不可用，请下载下面链接的文件解压后获取中文配置文件，放入 <link rel="resource" type="application/l10n" href="/viewer.properties" />中href的地址。
