uniapp实现h5、app与微信小程序三端pdf文件下载和预览功能

最新推荐文章于 2025-04-22 18:49:00 发布

妮可儿blog

最新推荐文章于 2025-04-22 18:49:00 发布

阅读量742

点赞数 3

文章标签： uni-app 微信小程序 pdf

本文链接：https://blog.youkuaiyun.com/weixin_43285861/article/details/136561463

版权

文章描述了一个使用uni-app开发的应用中，如何通过`handleCheck`函数调用API生成报告并获取文件路径，然后在`pdfView`组件中预览PDF文件的过程。开发者在`onLoad`生命周期钩子中处理了PDF预览路径的拼接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

handleCheck (item) {
       Api.generateTiJianReport(item.code).then(res => {
        let filePath = 'http://192.168.100.20:5005/' + res.result
        console.log(filePath)
        uni.navigateTo({
          url:'/pages/pdfView/index?pdfUrl='+ filePath  //pdfView文件路径
        })
      })
    },

pdfView 代码

<template>
	<view class="wrapper">
		<uni-nav-bar
			left-icon="back" 
			:fixed="true"
			@clickLeft="back2Index" 
			title="pdf预览"
			backgroundColor="#1677FF"
			height="88rpx"
			color="#fff"
			:border="false"
			safeAreaInsetTop></uni-nav-bar>
		<web-view :src="pdfUrl" width="100%" height="100rpx" class="main"></web-view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				pdfUrl:'',
        // 方法一的预览路径，注意写法，文件命名可以自定义，具体看自己，但是参数格式不要错了
				viewerUrl: '/static/html/web/viewer.html?file='
			};
		},
		onLoad(options) {
      console.log(options)
      // pdf预览路径拼接，options是请求后端路径的页面值传参的
			this.pdfUrl = this.viewerUrl + options.pdfUrl
			console.log(this.pdfUrl)
		},
		methods:{
			back2Index(){
				uni.navigateBack()
			},
		}
	}
</script>
 
<style lang="scss" scoped>
.wrapper{
	background-color: #f3f4f6;
	
	.main{
		margin-top: 88rpx;
	}
}
</style>