基于[email protected]的Vue3 PDF在线预览

• 认识vue3-pdf-app
• 安装vue3-pdf-app
• 代码
  • 子组件封装: PdfView.vue
  • 父组件调用: index.vue
  • 中文配置文件viewer.properties

本文参考来自于 CSDN作者theMuseCatcher《Vue3PDF预览（vue3-pdf-app）》

认识vue3-pdf-app

vue3-pdf-app的npm官方链接 点我访问

vue3-pdf-app的github仓库 点我访问

安装vue3-pdf-app

npm i [email protected]

代码

子组件封装: 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的地址。

• viewer.properties