Vue3PDF预览（vue3-pdf-app）

vue3-pdf-app 插件

网站预览PDF最佳且最简单的方式：

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

如果需要自定义网页内预览，可以采用本PDF预览组件（PDFViewer.vue）

本组件基于 vue3-pdf-app 插件进行二次封装，更适合日常使用需要！

插件支持功能包括但不限于：缩放、旋转、全屏预览、打印、下载、内容检索、dark/light主题定制化、侧边缩略图、页码跳转、本地化配置、多个浏览器支持（经测试 Google、Firefox、safari 均支持良好）、查看文档属性！

其中 dark 和 light 主题均支持自定义覆盖各个部分颜色变量，从而定制主题样式！

插件默认语言是English，同时也可定制本地化语言，只需从以下链接下载所需资源，使用 <link rel="resource" type="application/l10n" href="path-to-localization-file"> 引入即可：

zh-CN resource
localization resources

组件可自定义设置以下属性：

pdf文件地址（src），类型：string，必传，默认 ''
预览容器宽度（width），类型：number | string，默认 '100%'
预览容器高度（height），类型：number | string，默认 '100vh'
页面默认缩放规则（pageScale），类型：number | string，默认 'page-fit'，自适应展示一页，可选：'page-actual'|'page-width'|'page-height'|'page-fit'|'auto'，数字即代表缩放为：pageScale%
预览主题（theme），类型：string，默认 'dark'，可选 dark | light
覆盖pdf文件名（fileName），类型：string，默认 ''

效果如下图：

theme: dark

theme: light

①安装插件：yarn add vue3-pdf-app

②创建PDF预览组件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 // 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文件名
}
const props = withDefaults(defineProps<Props>(), {src: '',width: '100%',height: '100vh',pageScale: 'page-fit', // 默认自适应展示一页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><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>
// 定制化主题色
.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>

③在要使用的页面引入：

<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 scaleconst 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" href="https://www.npmjs.com/package/vue3-pdf-app" target="_blank">vue3-pdf-app</a></li></ul><h2 class="mt30 mb10">PDFViewer 基本使用</h2><PDFViewerpage-scale="page-fit":width="800":height="700"theme="dark":src="PDFSrc"@loaded="onLoaded" /></div>
</template>

Vue3PDF预览（vue3-pdf-app）相关推荐

ios预览在线pdf
最近公司用vue做跨平台前端,然后直接用UIWebView封装成app.体验还不错. 但是在预览附件的时候遇到一些问题: 1. 在页面中点击jpg文件可以正常预览,预览完成后可以关闭返回主页面: 2. ...
微信小程序实现PDF预览功能——pdf.js(含源码解析）
文章目录前言一.pdf.js 是什么? 二.使用步骤 1.下载库文件 2.使用方式微信小程序端--使用 web-view 标签 H5 端--使用 iframe 标签(使用vue框架) 3.更改源 ...
Adobe Reader 文档无法签名_如何在Mac上使用预览对PDF进行电子签名
当您通过电子邮件收到必须签名的PDF文档时,打印文件,用钢笔在虚线上签名,扫描签名的文档并将其发回的过程可能是一项相当繁琐的任务.幸运的是,苹果公司增加了使用预览功能对PDF文档进行电子签名的功能,该 ...
SAP SmartForms PDF Preview Test 打印预览生成PDF文件
SAP SmartForms PDF Preview Test 打印预览生成PDF文件 *&-------------------------------------------------- ...
如何在Mac上使用预览对PDF进行电子签名
当您通过电子邮件收到必须签名的PDF文档时,打印文件,用钢笔在虚线上签名,扫描签名的文档并将其发回的过程可能是一项相当繁琐的任务.幸运的是,苹果公司增加了使用预览功能对PDF文档进行电子签名的功能,该 ...
Win10系统中不需要打开即可预览word/pdf
今天看MOOC视频的时候学到一招win10中快速预览word/pdf提高效率的方法:选中目标文件,查看,浏览窗格即可.简单高效,MARK!
pdf文件预览vue3
1.依赖 npm i pdfjs-dist npm i vue-pdf-embed 2.代码实现 <template><div class="pdf-preview&quo ...
Android PDF原生实现 PDF阅读、PDF手势伸缩、PDF目录、PDF预览缩略图 PDF方案选择 google doc android-pdfview mupdf pdf.js x5
##1.背景近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开 ...
iOS 文件预览（PDF、Excel、World等）之QuickLook框架
iOS 文件预览 QuickLook之工程文件预览 QuickLook之网络URL预览 QuickLook之工程文件预览一.简介 QuickLook库可以让我们的App在iPhone/iPad中直接 ...

Vue3PDF预览（vue3-pdf-app）

Vue3PDF预览（vue3-pdf-app）相关推荐

最新文章

热门文章