uniapp在线预览pdf文件

uniapp在线预览pdf文件

1、下载hybrid包

这个可以网上自己找一下，很好找的一个包，并将包放在文件中，如下图：

2、自定义一个展示pdf的组件

<template>
	<view style="width: 100%;height: 95vh">
		<view class="">
			<web-view :src="pdfUrl"></web-view>
		</view>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				viewerUrl: '/hybrid/html/web/viewer.html', //引入hybrid包
				pdfUrl: ''
			};
		},
		onLoad(e) {
    
    
			const fileUrl = encodeURIComponent(decodeURIComponent(e.pdfUrl)) //将链接编码
			this.pdfUrl = this.viewerUrl + '?file=' + fileUrl
		}
	}
</script>

<style lang="scss">

</style>

组件可直接粘贴使用，备注较为清晰

通过父组件按钮点击跳转，并将pdf的链接传递给组件，解析后将可直接在线预览pdf；

文件仅供自己参考（学习笔记）！