uni-app如何在小程序上预览pdf文件。

<script>
import sureItem from '../../components/contractItem/sureItem.vue'
import agreementItem from '../../components/contractItem/agreementItem.vue'

import { generatePfm2PerContractInfo, myContractPageInfo, taskConfirmPage, queryDrawTaskAuth } from '../../api/api.js'
import mixin from '@/mixin/index.js';
import noData from '../../components/noData'

export default {
	components: {
		sureItem,
		agreementItem,
		noData
	},
	mixins: [mixin],
	data() {
		return {
			activeTab: 1,
			platformAutoSignAuthStatus: '',
			personalId: uni.getStorageSync('personalId'),
			status: 'loadmore',
			item: {},
			list1: [{
				name: '任务确认单',
			}, {
				name: '合同协议',
			}],
			activeStyle: {
				// 'width': '58rpx',
				'height': '46rpx',
				'font-size': '30rpx',
				'font-family': 'PingFang SC',
				'font-weight': 600,
				'color': '#222222',
				'line-height': '46rpx'

			},
			isLogin: false,
			params: {
				current: 1,
				size: 10
			},
			total: 0,
			taskList: [],
			agreementList: [],
		}
	},
	onShow() {
		this.isLogin = uni.getStorageSync('isLogin')
		this.getUserInfo()
		this.getData()
	},
	computed: {
		count() {
			return this.activeTab == 0 ? this.taskList.length : this.agreementList.length
		}
	},
	methods: {
		getData() {
			this.activeTab == 0 ? this.getTaskList() : this.personalContractWay()
		},
		click(item) {
			this.activeTab = item.index
			this.getData()
		},
		async startSignWay(item) {
			if (!this.isLogin) return
			this.item = item
			if (!this.userInfo.isRealName) {
				//已登录没有实名的时候先去实名认证。
				this.goRenzhengWay('wx://pages/myContract/myContract')
			} else {
				this.getIsSign()
			}

		},
		async getIsSign() {
			let platformAutoSignAuthStatus = this.item.platformAutoSignAuthStatus
			if (platformAutoSignAuthStatus == 1) {
				this.goSignWay()
			}
			if (platformAutoSignAuthStatus == 0) {
				uni.showModal({
					content: '暂时无法进行签署，请联系客服' + '\r\n' + '电话:0731-84120935' + '\r\n' + '微信:19911531016',
					cancelText: "取消",
					confirmText: "预览合同",
					success: async (res) => {
						if (res.confirm) {
							let contractPath = encodeURIComponent(this.item.contractPath)
							uni.navigateTo({ url: '/pages/contractPre/contractPre?url=' + contractPath })
						}
					},
				})
			}
		},
		async goSignWay() {
			let params = {
				"personId": this.personalId,
				"platformId": this.item.platformId,
				"returnUrl": "/pages/myContract/myContract",
			}
			let res = await generatePfm2PerContractInfo(params, { custom: { auth: true } })
			let url = encodeURIComponent(res.contractSignUrl)
			uni.navigateTo({ url: '/pages/contractPre/contractPre?url=' + url })
		},
		async seeWay(item) {
			if (item.contractPath) {
				let url = encodeURIComponent(item.contractPath)
				uni.navigateTo({ url: '/pages/contractPre/contractPre?url=' + url })
			}

		},
		async getTaskList() {
			let params = {
				personalId: this.personalId,
				current: this.params.current,
				size: this.params.size,
				name: '',
			}
			let res = await taskConfirmPage({ params, custom: { auth: true } })
			this.total = res.total
			if (this.params.current == 1) {
				this.taskList = res.records
			} else {
				this.taskList = this.taskList.concat(res.records)
			}
			if (this.count >= this.total) {
				this.status = 'nomore'
			} else {
				this.status = 'loadmore'
			}
		},
		async personalContractWay() {
			let params = {
				personalId: this.personalId,
				current: this.params.current,
				size: this.params.size,
			}
			let res = await myContractPageInfo({ params, custom: { auth: true } })
			this.total = res.total
			if (this.params.current == 1) {
				this.agreementList = res.records
			} else {
				this.agreementList = this.agreementList.concat(res.records)
			}
			if (this.count >= this.total) {
				this.status = 'nomore'
			} else {
				this.status = 'loadmore'
			}
		},
		goPrePage(item) {
			if (item.taskContractPath) {
				let fileLink = item.taskContractPath
				wx.downloadFile({
					url: fileLink,
					success: function (res) {
						if (res.statusCode != 200) {
						}
						var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
						wx.openDocument({
							filePath: Path,
							showMenu: true,
							success: function (res) {
								console.log('打开成功');
							}
						})
					},
					fail: function (err) {
						console.log(err, "wx.downloadFile fail err");
					}
				})
			}
		},
		onPullDownRefresh() {
			this.params.current = 1
			this.activeTab == 0 ? this.getTaskList() : this.personalContractWay()
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.count >= this.total || this.status === 'loading') return
			this.params.current++
			this.activeTab == 0 ? this.getTaskList() : this.personalContractWay()
		},
	}
}
</script>

<template>
	<view class="col-center contract-page">
		<view class="tab-box">
			<u-tabs :list="list1" :current="activeTab" :lineColor="`url(${lineBg}) 100% 100%`"
				itemStyle="width:230rpx;  height: 34px;" :activeStyle="activeStyle" @click="click"></u-tabs>
		</view>
		<view class="list-content" v-if="activeTab == 0">
			<view v-for="(item, index) in taskList" :key="index">
				<sureItem :item="item" @goDetail="goPrePage"></sureItem>
			</view>
			<u-loadmore v-if="taskList.length > 0" :status="status" />
			<noData v-if="taskList.length == 0"></noData>
		</view>
		<view class="list-content col-center" v-if="activeTab == 1">
			<view v-for="item in agreementList" :key="item.id">
				<agreementItem :item="item" @goSeeDetail="seeWay" @goDetail.stop="startSignWay()"></agreementItem>
			</view>
			<u-loadmore v-if="agreementList.length > 0" :status="status" />
			<noData v-if="agreementList.length == 0"></noData>

		</view>


	</view>
</template>

<style lang="scss" scoped>
.contract-page {
	.tab-box {
		box-sizing: border-box;
		width: 750rpx;
		height: 80rpx;
		// border: solid 1px red;
		background-color: #fff;


	}

	.list-content {
		box-sizing: border-box;
		width: 750rpx;
		margin-top: 10rpx;
		// border: pink solid 1px;
	}
}
</style>

只兼容小程序的时候，只需要用wx自带的下载文件，然后打开文件即可。不用使用pdf.js工具
那个工具有兼容问题，还有跨越问题，可能还要后端配置文件流输出的问题。