uniapp请求数据流在真机上预览pdf
1.请求后端的数据流
image-tools.js的代码自行到网上下载,放到utils文件夹里
//映入image-tools插件receiveRenderData(val) {
import { base64ToPath } from '@/utils/image-tools.js'
//省略部分代码.....
//请求数据流方法
lookBg() { let params = { }
// 接收数据的格式是arraybuffer reportInfo(params).then(res => { this.msg = `data:application/pdf;base64,${uni.arrayBufferToBase64(res.data)}`; setTimeout(() => {
// 数据处理生成路径 this.receiveRenderData(1) }, 100) }) },
let result = this.msg.replace(/[\r\n]/g, '');
//需要引入数里数据的image-tools.js的base64ToPath方法
base64ToPath(result).then(path => {
// 生成本地路径
var p = plus.io.convertLocalFileSystemURL(path);
let keys = 'file://' + p;
// 跳转到webview页面传递本地路径过去
uni.navigateTo({
url: '/pages/file/file?url=' + keys + '&&type=' + val
})
})
.catch(error => {
console.error(error)
})
},
2.接下来就是一个插件pdf.js
插件连接是https://mozilla.github.io/pdf.js/
下载如图的压缩包
解压之后在根目录新建一个文件夹hybrid,里面再建一个html,按照这个顺序放文件进去
3.新建一个file页面
在pages.json配置一下路径
file页面的主要代码是
<view> <web-view :src="allUrl" :fullscreen="false" class="webviewstyles"> </web-view> </view>
<script>
export default {
data() {
return {
allUrl: '',
}
},
onLoad(options) {
this.allUrl = '/hybrid/html/web/viewer.html' + '?file=' + options.url;
this.type = options.type
}
},
</script>
然后这个预览就完成了