【uniapp】uniapp开发app在线预览pdf文件

1.需要从网上下载一份pdf.js的文件放到自己的项目中

2.除了pdf.html文件，其他文件可以新建一个pdf文件夹，统一放到该目录下，然后将pdf文件夹放到项目的static目录下，pdf.html也单独的放到static目录下，最终如下图所示：

3.要实现pdf预览，需要用到uniapp的apiweb-view，新建一个.vue文件，写上如下代码：

<template>
  <view class="webView">
    <cu-custom isBack top :bgColor="NavBarColor">
      <block slot="content">在线预览</block>
    </cu-custom>
    <web-view :src="urls"></web-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        NavBarColor: this.NavBarColor,
        urls: '',
      }
    },
    onLoad(params) {
      let {url: urls} = params
      // /static/pdf.html 就是自己放在static目录下的pdf.html文件位置
      this.urls = `/static/pdf.html?url=${urls}`
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.点击某个pdf文件，跳转到刚刚新建的web-view文件中，且需要携带url参数跳转，pdf.js会根据url后的参数获取到的数据，生成pdf并渲染到页面中，如下所示：

seeVideo(item) {
    if (item.subjectType === '文件') {
      // pdf文件预览
      uni.navigateTo({
      // this.$config.staticDomainURL 是预览pdf文件的一个接口
      // item.videos 拿到的是pdf文件的路径
        url: '/pages/shop/webView?url=' + this.$config.staticDomainURL + '/' + item.videos
      })
    } else {
      // ......
    }
}
1
2
3
4
5
6
7
8
9
10
11
12