uniapp online preview pdf file

uniapp online preview pdf file

1. Download hybridpackage

This can be found on the Internet by yourself, a package that is easy to find, and put the package in the file, as shown below:

2. Customize a component that displays 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>

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

Click the button of the parent component to jump, and pass the link of the pdf to the component. After parsing, you can directly preview the pdf online;

The file is for your own reference only (study notes)!