uniapp在线预览pdf_uniapp点击查看pdf文件

准备

先下载pdf.js然后和node_modules同级新建一个hybrid文件目录，把下载好的pdf.js解压进去，（微信收藏里有）

 开始

然后在pages下新建一个FilePreview页面，用来呈现预览的pdf

在FilePreview.vue页面中：

<template>
	<view>
		<web-view :src="allUrl"></web-view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				viewerUrl: '/hybrid/html/readPdf/index/index.html',
				allUrl: ''
			};
		},
		// 加载页面时接收的参数
		onLoad(options) {
			this.allUrl = this.viewerUrl + '?url=' + options.url
			console.log(options, '00000');
		}
	}
</script>
 
<style lang="scss">
 
</style>

在请求后端文件流的组件，或者页面中，得转成Blob文件类型，我这里的查看文件，是在UpLoader组件里面写的

 

<!-- 上传 -->
<template>
	<view class="up-loader">
		<van-uploader v-model="fileList" :preview-full-image="false" @click-preview="clickItem" :before-delete="deletFile"
			:after-read="upFile" accept="file">
			<van-button icon="plus"></van-button>
		</van-uploader>
	</view>
</template>
<script>
	import storage from '@/common/storage.js'
	export default {
		name: "up-loader",
		data() {
			return {
				fileList: [],
				idsArr: [] // 点击预览需要传给后端id的数组
			}
		},
		methods: {
			afterRead(file) {
				console.log(file, 999);
			},
            // 删除事件
			deletFile(val, index) {
				this.fileList.splice(index.index, 1)
			},
			// 文件上传
			upFile(val) {
				val.status = 'uploading'
				val.message = '上传中...'
				uni.uploadFile({
					url: 'http://xxx.xxx.xx:9000/portal/system/file/v1/upload?tenantId=-1',
					name: 'file',
					header: {
						Authorization: storage.getItemSync('token') ?  storage.getItemSync('token') : ''                
					},
					formData: {
						file: val.file
					},
					success: (res) => {
						if (res.statusCode === 200) {
							val.status = 'success'
							val.message = '上传成功'
							this.idsArr.push(res.data)
							this.$emit('change', res.data)
						}
					}
				})
			},
			// 点击预览
			clickItem(val, index) {
				let params = JSON.parse(this.idsArr[index.index]).fileId;
				this.$api.preview(params).then(res => {
					let pdfData = res
					let blob = new Blob([pdfData], {
						type: 'application/pdf;charset=UTF-8'
					})
                    // 得转成blob文件
					pdfData = window.URL.createObjectURL(blob)
					let url = encodeURIComponent(pdfData)
                    // 最后已encodeURIComponent的格式输出
					uni.navigateTo({
						url: '/pages/FilePreview/FilePreview?url=' + url
					})
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.van-button {
		padding: 79rpx 54rpx;
		border: 2rpx solid #ddd;
		font-size: 38rpx;
	}
</style>

注意：

在接口请求的时候在请求前加{responseType: arraybuffer}要不然请求出来会看不到东西

request.js封装：

import storage from './storage'
import config from '@/common/config.js'
import {
	Notify
} from 'vant'
const BASE_URL = config.api()
export const request = (url, method, params, responseType) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + url, // 地址
			method: method || 'post', // 请求方式
			responseType: responseType ? responseType : '',
			header: {
				Authorization: storage.getItemSync('token') ? storage.getItemSync('token') : ''
			}, // token
			data: params || {}, // 参数
			success: (res) => {
				if (res.statusCode === 401) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				} else if (res.statusCode === 500) {
					Notify('操作错误', '1500', 'error')
					return
				}
				// 成功将data抛出
				resolve(res.data)
			},
			// ... 这里还可以做一些请求完成之后的提示
			fail: (err) => {
				Notify('系统错误', '1500', 'error')
				return reject(err)
			}
		})
	})
}

在定义接口的时候

import {
	request
} from '@/common/request.js'
 
export default {
	// 预览
	preview: (id) => request(`/portal/system/file/v1/preview?fileId=${id}`, 'get', '', 'arraybuffer')
}