LimePdf PDF预览组件

UTS原生PDF预览器，支持本地和网络PDF文件预览，提供页面跳转、滑动切换等功能，兼容uniappx(安卓、iOS、鸿蒙Next)。组件使用原生能力渲染PDF文件，性能优异，支持密码保护的PDF文件，并提供丰富的事件回调。

插件依赖：需要在自定义基座中使用

文档链接

📚 组件详细文档请访问以下站点：

• PDF预览组件文档 - 站点1
• PDF预览组件文档 - 站点2
• PDF预览组件文档 - 站点3

安装方法

1. 在uni-app 中搜索并导入lime-pdf
2. 导入后可能需要重新编译项目
3. 需要在自定义基座中使用
4. 安卓本地运行还需配置 gradle
5. 在页面中使用l-pdf组件
6. 鸿蒙Next需要真机并且需要源码，所以谨慎购买

代码演示

基础使用

通过url可以设置pdf的路径，支持网络或本地。

<l-pdf 
	ref="pdfRef"
	url="/static/shareSDK.pdf"  
	@load="load"
	@fail="fail"
	@pageChanged="pageChanged"
	style="height:500px;width: 100%;">
</l-pdf>
<button @click="onClick">跳转指指定页面</button>

// 组合式
const pdfRef = ref<LPdfComponentPublicInstance|null>(null)

const load = (info: UTSJSONObject)=>{
	// INFO 包含 页数，作者，标题，目录等
	console.log('info', info)
}

const fail = (err: UTSJSONObject)=>{
	// 发生错误时
	console.log('err', err)
}
const pageChanged = (info: UTSJSONObject)=> {
	// 切换页面时 
	console.log('pageChanged', info)
}
const onClick = ()=> {
	// 跳转到指定页面
	pdfRef.value?.jumpTo(3)
}

Render

<l-pdf 
	ref="pdfRef"
	@load="load"
	@fail="fail"
	@pageChanged="pageChanged"
	style="height:500px;width: 100%;">
</l-pdf>
<button @click="render">render</button>

// 选项式
export default {
	data() {
		return {
			
		}
	},
	methods: {
		load(info: UTSJSONObject) {
			// INFO 包含 页数，作者，标题，目录等
			console.log('info', info)
		},
		fail(err: UTSJSONObject) {
			// 发生错误时
			console.log('err', err)
		},
		pageChanged(info: UTSJSONObject) {
			// 切换页面时
			console.log('pageChanged', info)
		},
		render() {
			// 调用渲染函数
			(this.$refs['pdfRef'] as LPdfComponentPublicInstance | null)?.render?.(
				"/static/shareSDK.pdf", // pdf 路径
				0, // 默认页面 
				false, //是否允许水平滑动切换页面，false（垂直滑动）
				'password'//如果pdf有密码可选填
			)
		}
	}
}

插件标签说明

标签名	说明
l-pdf	组件标签

API文档

Props 属性说明

属性名	说明	类型	默认值
url	PDF文件地址，支持本地、网络路径	string	-
page	当前页面索引（从0开始）	number	0
swipeHorizontal	是否允许水平滑动切换页面，false为垂直滑动	boolean	false
password	PDF密码，如果文件有密码保护	string	-
scrollView	是否内部使用scrollView滚动（仅对安卓有效）	boolean	false

Events 事件

事件名	说明	回调参数
load	PDF加载成功时触发	info: {page, pageCount, category, meta}
fail	PDF加载失败时触发	err: {errMsg}
pageChanged	PDF页面切换时触发	info: {page, pageCount}

方法 API

通过组件实例调用方法：

// uniapp
const pdfRef = this.$refs.pdfRef

// uniappx (TypeScript)
const pdfRef = this.$refs["pdfRef"] as LPdfComponentPublicInstance

方法名	说明	参数
jumpTo	跳转到指定页面	page: number
render	动态渲染PDF文件	url: string, page?: number, swipeHorizontal?: boolean, password?: string

使用注意事项

1. 组件需要在自定义基座中使用，普通编译环境可能无法正常运行
2. 安卓平台需要额外配置gradle，详见安装方法
3. 组件高度需要通过style属性设置，否则可能无法正常显示
4. 对于密码保护的PDF文件，需要提供正确的密码才能正常显示
5. 页面索引从0开始计算，例如第一页的索引为0

TypeScript 类型支持

在TypeScript项目中使用时，可以导入以下类型：

// 组件实例类型
import type { LPdfComponentPublicInstance } from '@/uni_modules/lime-pdf'

// 事件回调参数类型
interface PdfLoadInfo {
  page: number;
  pageCount: number;
  category: string[];
  meta: Record<string, string>;
}

interface PdfPageChangedInfo {
  page: number;
  pageCount: number;
}

interface PdfFailError {
  errMsg: string;
}

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助

源代码

组件源码