分享vue好用的pdf 工具實測

vue3-pdf-app：

? ? ? ? ?帶大綱，帶分頁，帶縮放，帶全屏，帶打印，帶下載，帶旋轉

下載依賴：

yarn add vue3-pdf-appornpm install vue3-pdf-app

? 配置類：??

 創建文件 pdfConfig.ts

// 工具欄配置項
export const config ={// 右側其他區工具sidebar: {viewThumbnail: true,//啟用縮略圖視圖viewOutline: true,//啟用大綱視圖viewAttachments: true,//啟用附件視圖},secondaryToolbar: {secondaryPresentationMode: true,//啟用演示模式secondaryOpenFile: true, //啟用打開文件功能secondaryPrint: true,//啟用打印功能secondaryDownload: true,//啟用下載功能secondaryViewBookmark: true,//啟用書簽視圖firstPage: false,//啟用跳轉到第一頁lastPage: false,//啟用跳轉到最后一頁pageRotateCw: true,//啟用順時針旋轉頁面pageRotateCcw: true,//啟用逆時針旋轉頁面cursorSelectTool: true,//啟用選擇工具cursorHandTool: true,//啟用手形工具scrollVertical: true,//啟用垂直滾動scrollHorizontal: true,//啟用水平滾動scrollWrapped: true,//啟用包裹滾動spreadNone: true,//啟用無跨頁模式spreadOdd: false,// 啟用奇數頁跨頁模式spreadEven: false,//啟用偶數頁跨頁模式documentProperties: true,//啟用文檔屬性查看},// 配置左側工具欄toolbar: {toolbarViewerLeft: {findbar: false,//啟用查找條previous: true,// 啟用上一頁按鈕next: true,//啟用下一頁按鈕pageNumber: true,// 啟用頁碼顯示},//  配置右側工具欄toolbarViewerRight: {presentationMode: true,//啟用演示模式openFile: false,//啟用打開文件功能print: true,//啟用打印功能download: true,// 啟用下載功能viewBookmark: false,// 啟用書簽視圖},// 配置中間工具欄toolbarViewerMiddle: {zoomOut: true,// 啟用縮小功能zoomIn: true,//啟用放大功能。scaleSelectContainer: true,//啟用縮放選擇容器功能},},errorWrapper: true,//啟用錯誤包裝，這可能用于顯示錯誤信息或處理錯誤情況。
}

引入vue3-pdf-app：

<template><VuePdfApp :page-scale="data.pageScale" :theme="data.theme" :pdf="data.src" :fileName="data.fileName" 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'
import {config} from "/@/utils/pdfConfig";//引入配置類const data = ref({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 | lightfileName?: string // 覆蓋pdf文件名
})</script>

中文配置：

vue3-pdf-app 插件默認語言是 English，同時也可定制本地化語言為中文。

第一步：

在項目中創建一個viewer.properties的文件。

# vue3-pdf-app插件轉中文配置代碼
# 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=當前在看的內容（復制或在新窗口中打開）
bookmark_label=當前在看save.title=保存
save_label=保存
bookmark1.title=當前頁面（在當前頁面查看 URL）
bookmark1_label=當前頁面# Secondary toolbar and context menu
tools.title=工具
tools_label=工具
first_page.title=轉到第一頁
first_page_label=轉到第一頁
last_page.title=轉到最后一頁
last_page_label=轉到最后一頁
page_rotate_cw.title=順時針旋轉
page_rotate_cw_label=順時針旋轉
page_rotate_ccw.title=逆時針旋轉
page_rotate_ccw_label=逆時針旋轉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=加入銜接頁使奇數頁作為起始頁
spread_odd_label=雙頁視圖
spread_even.title=加入銜接頁使偶數頁作為起始頁
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}} 字節)
# 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}} 字節)
document_properties_title=標題:
document_properties_author=作者:
document_properties_subject=主題:
document_properties_keywords=關鍵詞:
document_properties_creation_date=創建日期:
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=創建者:
document_properties_producer=PDF 生成器：
document_properties_version=PDF 版本:
document_properties_page_count=頁數:
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=關閉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=切換側欄
toggle_sidebar_notification2.title=切換側欄（文檔所含的大綱/附件/圖層）
toggle_sidebar_label=切換側欄
document_outline.title=顯示文檔大綱（雙擊展開/折疊所有項）
document_outline_label=文檔大綱
attachments.title=顯示附件
attachments_label=附件
layers.title=顯示圖層（雙擊即可將所有圖層重置為默認狀態）
layers_label=圖層
thumbs.title=顯示縮略圖
thumbs_label=縮略圖
current_outline_item.title=查找當前大綱項目
current_outline_item_label=當前大綱項目
findbar.title=在文檔中查找
findbar_label=查找additional_layers=其他圖層
# LOCALIZATION NOTE (page_landmark): "{{page}}" will be replaced by the page number.
page_landmark=第 {{page}} 頁
# Thumbnails panel item (tooltip and alt text for images)
# LOCALIZATION NOTE (thumb_page_title): "{{page}}" will be replaced by the page
# number.
thumb_page_title=第 {{page}} 頁
# LOCALIZATION NOTE (thumb_page_canvas): "{{page}}" will be replaced by the page
# number.
thumb_page_canvas=頁面 {{page}} 的縮略圖# Find panel button title and messages
find_input.title=查找
find_input.placeholder=在文檔中查找…
find_previous.title=查找詞語上一次出現的位置
find_previous_label=上一頁
find_next.title=查找詞語后一次出現的位置
find_next_label=下一頁
find_highlight=全部高亮顯示
find_match_case_label=區分大小寫
find_match_diacritics_label=匹配變音符號
find_entire_word_label=全詞匹配
find_reached_top=到達文檔開頭，從末尾繼續
find_reached_bottom=到達文檔末尾，從開頭繼續
# LOCALIZATION NOTE (find_match_count): The supported plural forms are
# [one|two|few|many|other], with [other] as the default value.
# "{{current}}" and "{{total}}" will be replaced by a number representing the
# index of the currently active find result, respectively a number representing
# the total number of matches in the document.
find_match_count={[ plural(total) ]}
find_match_count[one]=第 {{current}} 項，共匹配 {{total}} 項
find_match_count[two]=第 {{current}} 項，共匹配 {{total}} 項
find_match_count[few]=第 {{current}} 項，共匹配 {{total}} 項
find_match_count[many]=第 {{current}} 項，共匹配 {{total}} 項
find_match_count[other]=第 {{current}} 項，共匹配 {{total}} 項
# LOCALIZATION NOTE (find_match_count_limit): The supported plural forms are
# [zero|one|two|few|many|other], with [other] as the default value.
# "{{limit}}" will be replaced by a numerical value.
find_match_count_limit={[ plural(limit) ]}
find_match_count_limit[zero]=超過 {{limit}} 項匹配
find_match_count_limit[one]=超過 {{limit}} 項匹配
find_match_count_limit[two]=超過 {{limit}} 項匹配
find_match_count_limit[few]=超過 {{limit}} 項匹配
find_match_count_limit[many]=超過 {{limit}} 項匹配
find_match_count_limit[other]=超過 {{limit}} 項匹配
find_not_found=找不到指定詞語# Error panel labels
error_more_info=更多信息
error_less_info=更少信息
error_close=關閉
# LOCALIZATION NOTE (error_version_info): "{{version}}" and "{{build}}" will be
# replaced by the PDF.JS version and build ID.
error_version_info=PDF.js v{{version}} (build: {{build}})
# LOCALIZATION NOTE (error_message): "{{message}}" will be replaced by an
# english string describing the error.
error_message=信息：{{message}}
# LOCALIZATION NOTE (error_stack): "{{stack}}" will be replaced with a stack
# trace.
error_stack=堆棧：{{stack}}
# LOCALIZATION NOTE (error_file): "{{file}}" will be replaced with a filename
error_file=文件：{{file}}
# LOCALIZATION NOTE (error_line): "{{line}}" will be replaced with a line number
error_line=行號：{{line}}# Predefined zoom values
page_scale_width=適合頁寬
page_scale_fit=適合頁面
page_scale_auto=自動縮放
page_scale_actual=實際大小
# LOCALIZATION NOTE (page_scale_percent): "{{scale}}" will be replaced by a
# numerical scale value.
page_scale_percent={{scale}}%# Loading indicator messages
loading=正在加載…# Loading indicator messages
loading_error=加載 PDF 時發生錯誤。
invalid_file_error=無效或損壞的 PDF 文件。
missing_file_error=缺少 PDF 文件。
unexpected_response_error=意外的服務器響應。rendering_error=渲染頁面時發生錯誤。# LOCALIZATION NOTE (annotation_date_string): "{{date}}" and "{{time}}" will be
# replaced by the modification date, and time, of the annotation.
annotation_date_string={{date}}，{{time}}# LOCALIZATION NOTE (text_annotation_type.alt): This is used as a tooltip.
# "{{type}}" will be replaced with an annotation type from a list defined in
# the PDF spec (32000-1:2008 Table 169 – Annotation types).
# Some common types are e.g.: "Check", "Text", "Comment", "Note"
text_annotation_type.alt=[{{type}} 注釋]
password_label=輸入密碼以打開此 PDF 文件。
password_invalid=密碼無效。請重試。
password_ok=確定
password_cancel=取消printing_not_supported=警告：此瀏覽器尚未完整支持打印功能。
printing_not_ready=警告：此 PDF 未完成加載，無法打印。
web_fonts_disabled=Web 字體已被禁用：無法使用嵌入的 PDF 字體。# Editor
editor_free_text2.title=文本
editor_free_text2_label=文本
editor_ink2.title=繪圖
editor_ink2_label=繪圖free_text2_default_content=開始輸入…# Editor Parameters
editor_free_text_color=顏色
editor_free_text_size=字號
editor_ink_color=顏色
editor_ink_thickness=粗細
editor_ink_opacity=不透明度# Editor aria
editor_free_text2_aria_label=文本編輯器
editor_ink2_aria_label=繪圖編輯器
editor_ink_canvas_aria_label=用戶創建圖像