vue3-pdf-app 插件

網(wǎng)站預(yù)覽PDF最佳且最簡單的方式：

<a class="u-pdf" href="pdf url..." target="_blank">PDF FileName</a>

如果需要自定義網(wǎng)頁內(nèi)預(yù)覽，可以采用本PDF預(yù)覽組件（PDFViewer.vue）

本組件基于?vue3-pdf-app@1.0.3?插件進行二次封裝，更適合日常使用需要！

插件支持功能包括但不限于：縮放、旋轉(zhuǎn)、全屏預(yù)覽、打印、下載、內(nèi)容檢索、dark/light主題定制化、側(cè)邊縮略圖、頁碼跳轉(zhuǎn)、本地化配置、多個瀏覽器支持（經(jīng)測試 Google、Firefox、safari 均支持良好）、查看文檔屬性！

其中 dark 和 light 主題均支持自定義覆蓋各個部分顏色變量，從而定制主題樣式！

插件默認語言是English，同時也可定制本地化語言為中文，只需從以下鏈接下載資源文件，使用?<link rel="resource" type="application/l10n" href="path-to-localization-file"> 引入即可：

• viewer.properties

組件可自定義設(shè)置以下屬性：

• pdf文件地址（src），類型：string，必傳，默認 ''

• 預(yù)覽容器寬度（width），類型：number | string，默認 '100%'

• 預(yù)覽容器高度（height），類型：number | string，默認 '100vh'

• 頁面默認縮放規(guī)則（pageScale），類型：number | string，默認 'page-fit'，自適應(yīng)展示一頁，可選：'page-actual'|'page-width'|'page-height'|'page-fit'|'auto'，數(shù)字即代表縮放為：pageScale%

• 預(yù)覽主題（theme），類型：string，默認 'dark'，可選 dark | light

• 覆蓋pdf文件名（fileName），類型：string，默認 ''

效果如下圖：

theme: dark

theme: light

①安裝插件：pnpm?i?vue3-pdf-app@1.0.3

②創(chuàng)建PDF預(yù)覽組件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 // 預(yù)覽容器寬度
  height?: string|number // 預(yù)覽容器高度
  pageScale?: number|string // 頁面默認縮放規(guī)則，可選 'page-actual'|'page-width'|'page-height'|'page-fit'|'auto'
  theme?: string // 預(yù)覽主題 可選 dark | light
  fileName?: string // 覆蓋pdf文件名
}
const props = withDefaults(defineProps<Props>(), {
  src: '',
  width: '100%',
  height: '100vh',
  pageScale: 'page-fit', // 默認自適應(yīng)展示一頁
  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上，使用網(wǎng)絡(luò)路徑引入 -->
  <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>

③在要使用的頁面引入：文章來源地址http://www.zghlxwxcb.cn/news/detail-419912.html

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

到了這里，關(guān)于Vue3PDF預(yù)覽（vue3-pdf-app）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！