LimePdf PDF预览

• UTS 原生PDF预览器，支持本地和网络pdf等功能,兼容uniappx(安卓,ios)

安装

导入，引入插件标签后，自定义基座后使用

代码演示

基础使用

通过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有密码可选填
			)
		}
	}
}

API

Props

参数	说明	类型	默认值
url	PDF地址，支持本地、网络	string	-
page	当前页面	string	-
swipeHorizontal	是否允许水平滑动切换页面，false（垂直滑动）	boolean	false
password	PDF密码,如果有的话	string	``
scrollView	是否内部使用scrollView滚动,只对安卓有较	boolean	false

Events

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

源代码

组件源码