uniapp请求数据流在真机上预览pdf

标签：uniapp 预览 image js file 数据流 pdf tools

1.请求后端的数据流

image-tools.js的代码自行到网上下载，放到utils文件夹里

//映入image-tools插件
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)
                })
            },

　　receiveRenderData(val) {
　　　　　　　　　　　　　　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>

然后这个预览就完成了

标签：uniapp,预览,image,js,file,数据流,pdf,tools
From： https://www.cnblogs.com/xuan99/p/17553108.html