uniapp 页面预览PDF

百度网盘

链接：https://pan.baidu.com/s/1pk7rDAcZXucnzmhUyfSZSA?pwd=wchm 
提取码：wchm

放到项目根文件夹

<template>
	<view class="details">
		<web-view :src="cendata"></web-view>
	</view>
</template>

<script>
	var app = getApp()
	import {
		articlesgetDetail
	} from "@/api/article.js"
	import tabBar from "@/components/tab-bar/tab-bar-school.vue"
	import toLink from "@/api/toLink.js"

	export default {
		components: {
			tabBar
		},
		data() {
			return {
				data: {},
				cendata: "",
				viewerUrl: '/hybrid/html/web/viewer.html',
				showPreview: true
			}
		},
		onShow() {
			uni.showLoading()
			this.data = app.globalData.optionsItem
			articlesgetDetail({
				data: {
					category_id: this.data.lan,
					id: this.data.wen
				}
			}).then(res => {
				console.log(res.data.file)
				this.cendata = res.data.file
				uni.hideLoading()
				if (uni.getSystemInfoSync().platform != 'ios') {
					let fileUrl = encodeURIComponent(this.cendata) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
					this.cendata = this.viewerUrl + '?file=' + fileUrl
				}

			})
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.details {
		width: 100%;
		height: 100%;

		.img {
			width: 100%;
			height: 100%;
		}
	}
</style>

效果