uniapp h5本地预览pdf教程 (含白屏|跨域解决方案)

第一步 下载pdf.js

很多pdf.js版本在真机ios环境都会白屏

经测试后2.5.207版本比较稳定,Android和IOS环境PDF文件都能加载成功

下载地址
https://github.com/mozilla/pdf.js/releases/tag/v2.5.207https://github.com/mozilla/pdf.js/releases/tag/v2.5.207
第二步 解压移动pdfjs文件至项目中

在根目录static中创建html文件夹 , 将解压出来的pdfjs文件移动至html文件夹目录下

第三步 创建pdf文件预览页面preview.vue

远程pdf文件地址可能会有跨域问题,这里使用转文件流的方式进行处理,可根据实际业务逻辑改写

复制代码
<template>
	<web-view :src="pdfUrl" v-if="pdfUrl"></web-view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data() {
			return {
				viewerUrl: '/static/html/web/viewer.html', //用来渲染PDF的html
				pdfUrl: '' // 最终显示在web-view中的路径
			}
		},
		onLoad(option) {
			console.log('=>进入了PDF预览页面')
			console.log('获取的参数=>', option,decodeURIComponent(option.src))
			let url = decodeURIComponent(option.src)
			let data = {
				url
			}
			uni.showLoading({
				mask:true
			})
			//使用pdf网络地址请求文件流信息,解决跨域问题
			uni.request({
			        url:request.baseUrl+'/h5/loadByUrl', //域名拼接
			        data: data,
			        method: 'post',
					responseType: 'arraybuffer', //这里记得设置响应数据格式,不然预览的pdf是空白
			        header: {
			          "authorization": uni.getStorageSync('token') // 携带的token
			        },
			        success: (response) => {
						uni.hideLoading()
						console.log(response)
						let pdfData = response.data; //pdfData是后端返回的文件流	
						//创建blob数据流
						let blob = new Blob([ pdfData], {
						    type: 'application/pdf;charset=UTF-8'
						})
						pdfData = window.URL.createObjectURL(blob)
						this.pdfUrl = `${this.viewerUrl}?file=${decodeURIComponent(pdfData)}`;
					},
			})
			//若没有pdf网络地址跨域问题可直接加载pdf
			// this.pdfUrl = `${this.viewerUrl}?file=${decodeURIComponent(url)}`;
		},
	}
</script>

第四步 实际场景中获取pdf地址并跳转至预览页

复制代码
uni.navigateTo({
		url:`/pages/index/preview?src=${encodeURIComponent(pdf网络地址)}`
})

预览效果

相关推荐
2501_915918412 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张14 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
阿幸软件杂货间14 小时前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
海绵宝宝不喜欢侬15 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063215 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq15 小时前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app
Qlittleboy15 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
写代码的jiang15 小时前
打造精简高效的 uni-app 网络请求工具
uni-app
reembarkation18 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf