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>
然后这个预览就完成了

 
                
             
         浙公网安备 33010602011771号
浙公网安备 33010602011771号