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

马肤
这是懒羊羊
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()
		},
	}
}


	
		
			
		
		
			
				
			
			
			
		
		
			
				
			
			
			
		
	


.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;
	}
}

只兼容小程序的时候,只需要用wx自带的下载文件,然后打开文件即可。不用使用pdf.js工具

(图片来源网络,侵删)

那个工具有兼容问题,还有跨越问题,可能还要后端配置文件流输出的问题。

(图片来源网络,侵删)

文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:表情:
评论列表 (暂无评论,0人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码