uniapp(安卓)之pdf预览

uniapp(安卓)之pdf预览

方法一：

将文件下载到本地，使用uni api预览文件

exportPDF() {
					uni.downloadFile({
						url: "http://192.168.1.237:9000/profile/statute/937820.pdf",
						success: res => {
							console.log(res)
							if (res.statusCode === 200) {
								// 保存pdf文件至手机，一般安卓端存储路径为：手机存储/dcim/camera文件夹下
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: "文件已保存至/DCIM/CAMERA文件夹下",
											icon: "none"
										})
										setTimeout(function() {
											// 预览pdf文件
											uni.openDocument({
												filePath: res.tempFilePath,
												showMenu: true,
												success: function(file) {
													console.log("file-success",
														file)
												}
											})
										}, 1500)
									},
									fail: function() {
										uni.showToast({
											title: "保存失败，请稍后重试！",
											icon: "none"
										})
									}
								})
							}
						}
					})
				}

　　直接调用即可。

方法一文件存储的路径会很奇怪，很难在手机上找到。

方法二：

方法二使用plus.downloader.createDownload方法可以指定下载目录。

具体内容见：https://www.cnblogs.com/s313139232/p/17864480.html

方法三：

上述方法需要调用手机上的pdf的阅读器。为满足甲方需要在pdf内部查看pdf文件，不得已又继续研究了pdfjs。

测试过pdfjs-3.5.141-dist、pdfjs-2.16.105-dist可在浏览器正常使用，真机可以看到页面打不开pdf文件。

之后在网上找到了网友修改后的版本，文件包如下：

 https://files.cnblogs.com/files/s313139232/pdfjs_2.16.105.zip?t=1702536646&download=true

开发过程中发现如果先使用上述方法将文件下载到本地后，使用本地路径作为路径亦可以完成预览。

本地路径如下： file:///storage/emulated/0/文件/空间查询报告.pdf

<template>
	<view class="">
		<web-view :src="url"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '', //PDF路径
				viewerUrl: '/static/pdf/web/viewer.html', //用来渲染PDF的html
				fileUrl: '/static/pdf/web/compressed.tracemonkey-pldi-09.pdf' //pdfjs自带的默认PDF
			}
		},
		onLoad(option) {
			console.log('=>进入了PDF预览页面')
			console.log('获取的参数=>', JSON.stringify(option))
			console.log(option.url)
			if (option.url != undefined && option.url != 'undefined' && option.url != '' && option.url != null) {
				this.url = this.viewerUrl + '?file=' + encodeURIComponent('file:///'+ option.url); // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
				//以发起请求的方式获取预览PDF
				// uni.request({
				// 	url: '/xxx/xxx/xxx/previewPdf/'+option.id,
				// 	method: 'GET',
				// 	header: { 'Authorization': 'Bearer ' + uni.getStorageSync('Admin-Token') },//自定义请求头
				// 	responseType: 'arraybuffer',
				// 	success: (res) => {
				// 		let blob = new Blob([res.data],{type:'application/pdf;chartset=UTF-8'});//转换blob数据类型
				// 		let href = URL.createObjectURL(blob);
				// 		this.url =this.viewerUrl+'?file='+encodeURIComponent(href); // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
				// 	},
				// });	
				console.log('PDF预览成功=>')
			} else { //无参就不预览PDF
				uni.showModal({ //弹出提示
					title: '系统提示', //提示的标题
					content: '参数无效', //提示的内容
					confirmText: '返回', //取消按钮的文字，默认为"取消"
					showCancel: false, //是否显示取消按钮，默认为 true
					success: (res) => {
						if (res.confirm) { //监听弹窗返回按钮
							uni.navigateBack(); //返回上一页
						}
					}
				});
			}
		}
	}
</script>

<style>
</style>

　　调用：（fileSaveUrl值为文件真实路径，在方法二中可以获取。也可以用blob等方法获取，见最后的参考链接）

uni.navigateTo({
						url: '/pages/me/pdfView?url=' + fileSaveUrl //带参跳转
					})

　　

 

钻研不易，转载请注明出处。。。。。。

 

 参考文档：

http://www.5imoban.net/jiaocheng/hbuilder/202303205225.html

 

 

 

 

 

 

翻译

搜索

复制