// 可以使用npm 以及pnpm
// 下載版本1.0.3
pnpm install vue3-pdf-app@^1.0.3

<template>
    <VuePdfApp :page-scale="pageScale" :theme="theme" :style="`width: ${viewerWidth}; height: ${viewerHeight};`"
        :pdf="src" :fileName="fileName" @pages-rendered="pagesRendered" v-bind="$attrs" :config="config"></VuePdfApp>
</template>
 
 
<script setup lang="ts">
import { computed, ref } from 'vue'
import VuePdfApp from 'vue3-pdf-app'
import 'vue3-pdf-app/dist/icons/main.css'
// 工具欄配置項
const config = ref({
    // 右側(cè)其他區(qū)工具
    sidebar: {
        viewThumbnail: true,//啟用縮略圖視圖
        viewOutline: true,//啟用大綱視圖
        viewAttachments: false,//啟用附件視圖
    },
    secondaryToolbar: {
        secondaryPresentationMode: true,//啟用演示模式
        secondaryOpenFile: true, //啟用打開文件功能
        secondaryPrint: true,//啟用打印功能
        secondaryDownload: true,//啟用下載功能
        secondaryViewBookmark: true,//啟用書簽視圖
        firstPage: false,//啟用跳轉(zhuǎn)到第一頁
        lastPage: false,//啟用跳轉(zhuǎn)到最后一頁
        pageRotateCw: true,//啟用順時針旋轉(zhuǎn)頁面
        pageRotateCcw: true,//啟用逆時針旋轉(zhuǎn)頁面
        cursorSelectTool: false,//啟用選擇工具
        cursorHandTool: false,//啟用手形工具
        scrollVertical: false,//啟用垂直滾動
        scrollHorizontal: false,//啟用水平滾動
        scrollWrapped: false,//啟用包裹滾動
        spreadNone: false,//啟用無跨頁模式
        spreadOdd: false,// 啟用奇數(shù)頁跨頁模式
        spreadEven: false,//啟用偶數(shù)頁跨頁模式
        documentProperties: false,//啟用文檔屬性查看
    },
    // 配置左側(cè)工具欄
    toolbar: {
        toolbarViewerLeft: {
            findbar: false,//啟用查找條
            previous: true,// 啟用上一頁按鈕
            next: true,//啟用下一頁按鈕
            pageNumber: true,// 啟用頁碼顯示
        },
        //  配置右側(cè)工具欄
        toolbarViewerRight: {
            presentationMode: false,//啟用演示模式
            openFile: false,//啟用打開文件功能
            print: false,//啟用打印功能
            download: false,// 啟用下載功能
            viewBookmark: false,// 啟用書簽視圖
        },
        // 配置中間工具欄
        toolbarViewerMiddle: {
            zoomOut: true,// 啟用縮小功能
            zoomIn: true,//啟用放大功能。
            scaleSelectContainer: false,//啟用縮放選擇容器功能
        },
    },
    //啟用錯誤包裝，這可能用于顯示錯誤信息或處理錯誤情況。
    errorWrapper: true,
})
 
interface Props {
    src: string | ArrayBuffer // pdf地址
    width?: string | number // 預覽容器寬度
    height?: string | number // 預覽容器高度
    pageScale?: number | string // 頁面默認縮放規(guī)則，可選 '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', // 默認自適應(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
    }
})
const emit = defineEmits(['loaded'])
function pagesRendered(pdfApp: any) {
    // console.log('pdfApp頁碼渲染完成:', pdfApp)
    emit('loaded', pdfApp)
}
</script>
 
 
 
<style lang="less" scoped>
@themeColor: #1677FF;
 
:deep(*) {
    box-sizing: content-box;
}
 
// 定制化主題色
.pdf-app.dark {
    --pdf-app-background-color: rgb(83, 86, 89, 0);
    --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);
    }
}
 
.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>

<template>
    <div style="margin: 20px;">
        <input type="file" @change="handleChange" />
    </div>
    <div class="pdfBox" v-if="pdfUrl !== ''">
        <PdfPreview page-scale="page-fit" :width="900" :height="600" theme="light" :src="pdfUrl" @loaded="onLoaded" />
    </div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import PdfPreview from './pdfModel.vue';
 
// const pdfUrl = ref<any>('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf');
const pdfUrl = ref<any>('');
// 判斷文件加載完成
const onLoaded = (pdfApp: any) => {
    console.log('文件加載完成');
};
 
// 也可直接上傳文件顯示
let handleChange = (e: any) => {
    let files = e.target.files[0];
    let reader = new FileReader();
    reader.readAsArrayBuffer(files);
    reader.onload = function () {
        // docxSrc.value = reader.result;
        pdfUrl.value = reader.result;
    };
};
</script>
 
<style scoped lang="less">
.pdfBox {
    width: 900px;
    height: 600px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
}
</style>

# vue3-pdf-app插件轉(zhuǎn)中文配置代碼
# Copyright 2012 Mozilla Foundation
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#     http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
 
# Main toolbar buttons (tooltips and alt text for images)
previous.title=上一頁
previous_label=上一頁
next.title=下一頁
next_label=下一頁
 
# LOCALIZATION NOTE (page.title): The tooltip for the pageNumber input.
page.title=頁面
# LOCALIZATION NOTE (of_pages): "{{pagesCount}}" will be replaced by a number
# representing the total number of pages in the document.
of_pages=/ {{pagesCount}}
# LOCALIZATION NOTE (page_of_pages): "{{pageNumber}}" and "{{pagesCount}}"
# will be replaced by a number representing the currently visible page,
# respectively a number representing the total number of pages in the document.
page_of_pages=({{pageNumber}} / {{pagesCount}})
 
zoom_out.title=縮小
zoom_out_label=縮小
zoom_in.title=放大
zoom_in_label=放大
zoom.title=縮放
presentation_mode.title=切換到演示模式
presentation_mode_label=演示模式
open_file.title=打開文件
open_file_label=打開
print.title=打印
print_label=打印
download.title=下載
download_label=下載
bookmark.title=當前在看的內(nèi)容（復制或在新窗口中打開）
bookmark_label=當前在看
 
save.title=保存
save_label=保存
bookmark1.title=當前頁面（在當前頁面查看 URL）
bookmark1_label=當前頁面
 
# Secondary toolbar and context menu
tools.title=工具
tools_label=工具
first_page.title=轉(zhuǎn)到第一頁
first_page_label=轉(zhuǎn)到第一頁
last_page.title=轉(zhuǎn)到最后一頁
last_page_label=轉(zhuǎn)到最后一頁
page_rotate_cw.title=順時針旋轉(zhuǎn)
page_rotate_cw_label=順時針旋轉(zhuǎn)
page_rotate_ccw.title=逆時針旋轉(zhuǎn)
page_rotate_ccw_label=逆時針旋轉(zhuǎn)
 
cursor_text_select_tool.title=啟用文本選擇工具
cursor_text_select_tool_label=文本選擇工具
cursor_hand_tool.title=啟用手形工具
cursor_hand_tool_label=手形工具
 
scroll_page.title=使用頁面滾動
scroll_page_label=頁面滾動
scroll_vertical.title=使用垂直滾動
scroll_vertical_label=垂直滾動
scroll_horizontal.title=使用水平滾動
scroll_horizontal_label=水平滾動
scroll_wrapped.title=使用平鋪滾動
scroll_wrapped_label=平鋪滾動
 
spread_none.title=不加入銜接頁
spread_none_label=單頁視圖
spread_odd.title=加入銜接頁使奇數(shù)頁作為起始頁
spread_odd_label=雙頁視圖
spread_even.title=加入銜接頁使偶數(shù)頁作為起始頁
spread_even_label=書籍視圖
 
# Document properties dialog box
document_properties.title=文檔屬性…
document_properties_label=文檔屬性…
document_properties_file_name=文件名:
document_properties_file_size=文件大小:
# LOCALIZATION NOTE (document_properties_kb): "{{size_kb}}" and "{{size_b}}"
# will be replaced by the PDF file size in kilobytes, respectively in bytes.
document_properties_kb={{size_kb}} KB ({{size_b}} 字節(jié))
# LOCALIZATION NOTE (document_properties_mb): "{{size_mb}}" and "{{size_b}}"
# will be replaced by the PDF file size in megabytes, respectively in bytes.
document_properties_mb={{size_mb}} MB ({{size_b}} 字節(jié))
document_properties_title=標題:
document_properties_author=作者:
document_properties_subject=主題:
document_properties_keywords=關(guān)鍵詞:
document_properties_creation_date=創(chuàng)建日期:
document_properties_modification_date=修改日期:
# LOCALIZATION NOTE (document_properties_date_string): "{{date}}" and "{{time}}"
# will be replaced by the creation/modification date, and time, of the PDF file.
document_properties_date_string={{date}}, {{time}}
document_properties_creator=創(chuàng)建者:
document_properties_producer=PDF 生成器：
document_properties_version=PDF 版本:
document_properties_page_count=頁數(shù):
document_properties_page_size=頁面大?。?
document_properties_page_size_unit_inches=英寸
document_properties_page_size_unit_millimeters=毫米
document_properties_page_size_orientation_portrait=縱向
document_properties_page_size_orientation_landscape=橫向
document_properties_page_size_name_a3=A3
document_properties_page_size_name_a4=A4
document_properties_page_size_name_letter=文本
document_properties_page_size_name_legal=法律
# LOCALIZATION NOTE (document_properties_page_size_dimension_string):
# "{{width}}", "{{height}}", {{unit}}, and {{orientation}} will be replaced by
# the size, respectively their unit of measurement and orientation, of the (current) page.
document_properties_page_size_dimension_string={{width}} × {{height}} {{unit}}（{{orientation}}）
# LOCALIZATION NOTE (document_properties_page_size_dimension_name_string):
# "{{width}}", "{{height}}", {{unit}}, {{name}}, and {{orientation}} will be replaced by
# the size, respectively their unit of measurement, name, and orientation, of the (current) page.
document_properties_page_size_dimension_name_string={{width}} × {{height}} {{unit}}（{{name}}，{{orientation}}）
# LOCALIZATION NOTE (document_properties_linearized): The linearization status of
# the document; usually called "Fast Web View" in English locales of Adobe software.
document_properties_linearized=快速 Web 視圖：
document_properties_linearized_yes=是
document_properties_linearized_no=否
document_properties_close=關(guān)閉
 
print_progress_message=正在準備打印文檔…
# LOCALIZATION NOTE (print_progress_percent): "{{progress}}" will be replaced by
# a numerical per cent value.
print_progress_percent={{progress}}%
print_progress_close=取消
 
# Tooltips and alt text for side panel toolbar buttons
# (the _label strings are alt text for the buttons, the .title strings are
# tooltips)
toggle_sidebar.title=切換側(cè)欄
toggle_sidebar_notification2.title=切換側(cè)欄（文檔所含的大綱/附件/圖層）
toggle_sidebar_label=切換側(cè)欄
document_outline.title=顯示文檔大綱（雙擊展開/折疊所有項）
document_outline_label=文檔大綱
attachments.title=顯示附件
attachments_label=附件
layers.title=顯示圖層（雙擊即可將所有圖層重置為默認狀態(tài)）
layers_label=圖層
thumbs.title=顯示縮略圖
thumbs_label=縮略圖
current_outline_item.title=查找當前大綱項目
current_outline_item_label=當前大綱項目
findbar.title=在文檔中查找
findbar_label=查找
 
additional_layers=其他圖層
# LOCALIZATION NOTE (page_landmark): "
                            
1234567下一頁閱讀全文
                            

                                您可能感興趣的文章:
Vue3實現(xiàn)預覽PDF文件的多種方式(超簡單)
Vue3實現(xiàn)pdf在線預覽的三種方式
vue3使用pdf.js來預覽文件的操作步驟(本地文件測試)
Vue3+TypeScript實現(xiàn)PDF預覽組件
vue3+vite實現(xiàn)在線預覽pdf功能