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
