uniapp H5和APP实现pdf预览功能

uniapp H5和APP实现pdf预览功能，注意是H5和APP，小程序无法用此方法。

先看下效果图：

一、下载方法一和方法二的资源文件，如pdf.js等，点击下载资源 提取码: 8teu

二、方法一：

1、将下载的资源解压，将里面的方法一里的html放到static目录下：

2、创建pdf预览文件pdfView.vue：

3、根据需求撰写前端代码

<template>
  <view>
    <uni-nav-bar
      left-icon="back" 
      :fixed="true"
      @clickLeft="back2Index" 
      title="pdf预览"
      backgroundColor="#1677FF"
      height="88rpx"
      color="#fff"
      :border="false"
      safeAreaInsetTop></uni-nav-bar>
    <web-view :src="pdfUrl" width="100%" height="100rpx"></web-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pdfUrl:'',
        // 方法一的预览路径，注意写法，文件命名可以自定义，具体看自己，但是参数格式不要错了
        viewerUrl: '/static/html/web/viewer.html?file='
      };
    },
    onLoad(options) {
      // pdf预览路径拼接，options是请求后端路径的页面值传参的
      this.pdfUrl = this.viewerUrl + options.pdfUrl
    },
    methods:{
      back2Index(){
        uni.navigateBack()
      },
    }
  }
</script>

<style scoped>
.wrapper{
  background-color: #f3f4f6;
  .main{
    margin-top: 88rpx;
  }
}
</style>

4、请求路径的文件代码内容：

// 获取pdf文件信息
downloadInfo (file) {
    // 接口请求，大家自行调整自己的请求方式
  deathInfoService.download({fileName: file}).then(({data}) => {
    let blob = data
    const binaryData = []
    binaryData.push(blob)
    // 看下面，该url是小编最终转的pdf临时路径
    const url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf;chartset=UTF-8' }))
    // 拿到url之后传参，跳转页面
    uni.navigateTo({
      url:'/page_cremationAppoint/cremationAppoint/pdfView?pdfUrl='+ url
    })
  })
},

三、方法二

方法2的处理方式与方法一的处理思路是一样的吗，唯一不同的就是使用的工具不同，这里使用的是pdf.js文件。

需要更改的地方是：

该url是根据大家工具放的位置写的，但也是在static文件下，参数是url=，代码如下：

viewerUrl: '/static/pdf/pdf.html?url='