uniapp: implement pdf preview function

Table of contents

Chapter 1 Achieving Effects

Chapter 2 Understanding and Solving Needs 

2.1 Understand the needs

2.2 Solving needs

2.2.1 Method 1

2.2.2 Method 2

Chapter 3 Resource Download

---

Chapter 1 Achieving Effects

Chapter 2 Understanding and Solving Needs 

2.1 Understand the needs

• The front-end needs to use the temporary pdf path passed by the back-end to implement pdf preview on the H5 side and the app side.
• First of all, let’s not use iframe or window.open like the PC version , the solution is as follows:

2.2 Solving needs

2.2.1 Method 1

• Add the pdf file under static,Be sure to put the folder under static,The file acquisition is given at the end  

•  Create pdf preview folder:

• Write front-end code according to needs:

<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>

• File code content of request path:

// 获取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
		})
	})
},

Note: All the above codes are just the editor's general idea. The specific implementation needs to be judged according to the actual situation. For example, if the pdf path already exists, there is no need to send a request, just jump directly with parameters; there may also be some backends A path will be returned directly... It's just that the backend of the editor is relatively lazy, and it can be implemented as long as it can be implemented, so the editor here processes the value returned by the backend in order to obtain the path.

• The first method has been implemented, and the specific effect is shown at the beginning.

2.2.2 Method 2

• Is the processing method of method 2 the same as the processing idea of ​​method 1? The only difference is that the tools used are different. The pdf.js file is used here.
• What needs to be changed is:

• The url is written according to the location where our tools are placed, but it is also under a static file. The parameter is url=, and the code is as follows:

viewerUrl: '/static/pdf/pdf.html?url='

Chapter 3 Resource Download

In the editor's gitee warehouse:resource_package: the resource package required for uniapp pdf preview