【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>

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 {
    
      // ......
    }
}