Uniapp preview function

Project file structure

hybrid The file is the core download by Baidu itself

previewPdf.vue

<template>
    <view style="width: 100%;" >
		<view style="height: 100rpx;">
				<uni-nav-bar left-icon="left" title=" File preview " @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', //  A format file stream js  file   The end of the article will be shared 
           }
        },
        onLoad(options) {
    
                let fileUrl = encodeURIComponent(options.links) // encodeURIComponent  Function can take a string as  URI  Components are encoded .
                this.allUrl = this.viewerUrl + '?file=' + fileUrl
				console.log("pdf",options)
          }
    }
</script>

<style>

</style>

Preview effect