uniapp 预览功能

项目文件结构

hybrid 文件是核心自行百度下载

previewPdf.vue

<template>
    <view style="width: 100%;" >
		<view style="height: 100rpx;">
				<uni-nav-bar left-icon="left" title="文件预览" @clickLeft="back" />
		</view>
	   <view >
		   <web-view style="paddin-top: 120rpx;"  :src="allUrl"></web-view>
	   </view>
   
		
    </view>
</template>

<script>
    export default {
    
        data() {
    
            return {
    
            src: '',
            allUrl:'',
            viewerUrl: '/hybrid/html/web/viewer.html', // 格式化文件流的一个js 文件 文末会分享出来
           }
        },
        onLoad(options) {
    
                let fileUrl = encodeURIComponent(options.links) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
                this.allUrl = this.viewerUrl + '?file=' + fileUrl
				console.log("pdf",options)
          }
    }
</script>

<style>

</style>

预览效果