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

发布时间 2023-07-14 11:07:20作者: 泫然

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>

然后这个预览就完成了