PDF阅读器 4.4.0

基于pdf.js的PDF阅读器组件，可以在移动端直接查看PDF文件，目前支持H5。

说明

组件默认提供的pdfjs资源仅供测试，速度较慢，建议参考下面章节自托管PDFJS资源。

使用场景

• 需要在应用内直接查看PDF文件
• 不希望跳转到外部应用查看PDF
• 需要在不同平台提供一致的PDF阅读体验

平台差异说明

|App（vue）|App（uvue/uni-app-x）|App（nvue）|H5|小程序| |:-😐:-😐:-😐:-😐:-😐:-😐 |x|x|√|x|

基本使用

通过src参数传入PDF文件的URL地址即可显示PDF内容。

<template>
	<view>
		<up-pdf-reader 
			:src="pdfUrl">
		</up-pdf-reader>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const pdfUrl = ref('https://example.com/sample.pdf')
</script>

自定义高度

通过[height]参数可以设置PDF阅读器的高度。

<template>
	<view>
		<up-pdf-reader 
			:src="pdfUrl" 
			height="500px">
		</up-pdf-reader>
	</view>
</template>

使用自定义pdf.js

通过[baseUrl]参数可以指定自定义的pdf.js资源地址，注意需要下载pdfjs.zip进static目录，并打包部署一份H5网站到自己的服务器。

下载链接: https://pan.baidu.com/s/1tYi2GI77g5Js25wrAO0UaA?pwd=kxp8 提取码: kxp8 复制这段内容后打开百度网盘手机App，操作更方便哦

<template>
	<view>
		<up-pdf-reader 
			:src="pdfUrl" 
			baseUrl="https://your-domain.com">
		</up-pdf-reader>
	</view>
</template>

右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码

 github  gitee

API

Props

参数	说明	类型	默认值	可选值
src	PDF文件地址	String	-	-
height	组件高度	String	700px	-
baseUrl	pdf.js资源域名	String	https://uview-ultra.jiangruyi.com/h5	-