uniapp: 实现pdf预览功能

目录

[第一章 实现效果](#第一章 实现效果)

[第二章 了解并解决需求](#第二章 了解并解决需求)

[2.1 了解需求](#2.1 了解需求)

[2.2 解决需求](#2.2 解决需求)

[2.2.1 方法一](#2.2.1 方法一)

[2.2.2 方法二](#2.2.2 方法二)

[第三章 资源下载](#第三章 资源下载)


第一章 实现效果

第二章 了解并解决需求

2.1 了解需求

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

2.2 解决需求

2.2.1 方法一

  • static下添加该pdf文件,一定要注意的是将该文件夹放在static下,文件获取在最后给出
  • 创建pdf预览文件夹:
  • 根据需求撰写前端代码:
javascript 复制代码
<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>
  • 请求路径的文件代码内容:
javascript 复制代码
// 获取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=,代码如下:
javascript 复制代码
viewerUrl: '/static/pdf/pdf.html?url='

第三章 资源下载

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

相关推荐
言兴几秒前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte4 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常5 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常7 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101811 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28118 分钟前
Chrome插件开发
前端
前端 贾公子30 分钟前
Monorepo + vite 怎么热更新
前端
coding随想39 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试