uniapp: 实现pdf预览功能

目录

第一章 实现效果

第二章 了解并解决需求 

2.1 了解需求

2.2 解决需求

2.2.1 方法一

2.2.2 方法二

第三章 资源下载


第一章 实现效果

第二章 了解并解决需求 

2.1 了解需求

  • 前端需要利用后端传的pdf临时路径实现H5端以及app端的pdf预览
  • 首先我们别像pc端一样,利用iframe或者 window.open,解决方法如下:

2.2 解决需求

2.2.1 方法一

  • static下添加该pdf文件,一定要注意的是将该文件夹放在static下,文件获取在最后给出 

  •  创建pdf预览文件夹:

  • 根据需求撰写前端代码:
<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) {
            // pdf预览路径拼接,options是请求后端路径的页面值传参的
			this.pdfUrl = this.viewerUrl + options.pdfUrl
			console.log('url', this.pdfUrl)
		},
		methods:{
			back2Index(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
.wrapper{
	background-color: #f3f4f6;
	
	.main{
		margin-top: 88rpx;
	}
}
</style>
  • 请求路径的文件代码内容:
// 获取pdf文件信息
downloadInfo (file) {
    // 接口请求,大家自行调整自己的请求方式
	deathInfoService.download({fileName: file}).then(({data}) => {
		let blob = data
		const binaryData = []
		binaryData.push(blob)
        // 看下面,该url是小编最终转的pdf临时路径
		const url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf;chartset=UTF-8' }))
        // 拿到url之后传参,跳转页面
		uni.navigateTo({
			url:'/page_cremationAppoint/cremationAppoint/pdfView?pdfUrl='+ url
		})
	})
},

注意: 以上所有代码只是小编的大致思路,具体实现需要大家根据实际情况自行判断,例如pdf路径是已经有的,就不需要发送请求,直接带参跳转即可;也可能有的后端会直接返回一个路径…只是小编的这个后端比较懒,说能实现就行,所以小编这里为了得到路径对后端返回的值做了处理。

  • 第一种方法已经实现了,具体效果在最开始展示了

2.2.2 方法二

  • 方法2的处理方式与方法一的处理思路是一样的吗,唯一不同的就是使用的工具不同,这里使用的是pdf.js文件。
  • 需要更改的地方是:

  • 该url是根据大家工具放的位置写的,但也是在static文件下,参数是url=,代码如下:
viewerUrl: '/static/pdf/pdf.html?url='

第三章 资源下载

小编gitee仓库中:resource_package: uniapp pdf预览需要的资源包

  • 12
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在微信小程序中使用uni-app预览PDF文件,可以根据不同的手机平台选择不同的方法。首先,对于Android手机,可以使用原生的方法来实现预览。可以调用`uni.downloadFile`方法下载PDF文件,然后使用`uni.openDocument`方法打开该文件。这样可以在Android手机上正常打开PDF文件。示例代码如下: ```javascript androidOpenPdf(url) { uni.downloadFile({ url: url, success: function (res) { var filePath = res.tempFilePath; uni.openDocument({ filePath: filePath, success: function (res) { console.log("打开文档成功"); }, }); }, }); } ``` 而对于iOS手机,则可以使用`<web-view>`标签来实现预览。在`<web-view>`标签的`src`属性中传入PDF文件的链接即可。这样可以在iOS手机上正常打开PDF文件。示例代码如下: ```html <web-view :src="webUrl"></web-view> data() { return { webUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7da443bc-353a-4224-ab27-b98917aa6c66/89d1d612-734a-4219-9110-0b21fb004d5f.pdf' } } ``` 根据不同的平台来选择不同的方法,可以通过`uni.getSystemInfoSync().platform`来获取当前手机平台,然后使用`switch`语句来判断平台并执行相应的预览方法。示例代码如下: ```javascript openPDF() { switch (uni.getSystemInfoSync().platform) { case "android": console.log("安卓"); this.androidOpenPdf(this.contractUrl); break; case "ios": console.log("IOS"); uni.navigateTo({ url: "./webView/webView?contractUrl=" + this.contractUrl, }); break; default: this.androidOpenPdf(this.contractUrl); break; } } ``` 综上所述,根据不同的手机平台,可以选择使用原生方法或web-view来预览PDF文件。这样就可以在微信小程序中使用uni-app实现预览PDF文件功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值