pdf预览

通过接口拿到第三方的链接，然后判断不同环境，比如app, h5，小程序等等，用对应的方法打开一个新的webview打开链接展示，但是没想到里面又pdf。然后在ios上，h5无法展示。
换个思路，第三方链接，会返回一个type类型，如果是pdf。那给拼接上一个h5的地址，然后用webview打开。
h5的地址就是一个展示pdf的作用。比如我们的 https://medicaluat.mobile.taikang.com/active/pdfViewer/index.html#/pdfView?pdfUrl=后面跟pdf的链接
https://medicaluat.mobile.taikang.com/active/pdfView/index.html#/pdfViewer?pdfUrl=https%3A%2F%2Ftlifehealth.taikang.com%2Factive%2Fimg%2Fpdf%2F202303301413.pdf

实现 pdfViewer.vue
依赖

    "pdfjs-dist": "^2.5.207",
    "pdfvuer": "^1.6.1",
    "vconsole": "^3.3.0",
    "vue": "^2.6.6",
    "vue-pdf": "^4.2.0",

<template>
  <div id="pdfvuer" class="pdfvuer">
    <pdf
      ref="pdf"
      :src="pdfdata"
      v-for="i in numPages"
      :rotate="pageRotate"
      :key="i"
      :id="i"
      :page="i"
      :scale.sync="scale"
    ></pdf>
    <!--  当前页/总页数  -- 滑动的时候，当前页不变，直接给去掉了>
    <!-- <div class="pageNum">{{ page }}/{{ numPages }}</div> -->    <!--  下方tab栏  -->
    <div class="pdf-tab">
      <div
        v-for="(item, i) in tabItem"
        :key="i"
      >
        <div
          class="operate-item"
          @click.stop="item.func"
        >
          <img
            :class="{
              radioImg: item.imgSize == 'radio',
              flatImg: item.imgSize == 'flat',
            }"
            :src="img_base_url + item.icon"
            alt=""
          />
          <div class="txt">{{ item.txt }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
   
  <script>
import pdfvuer from 'pdfvuer';

export default {
  components: {
    pdf: pdfvuer,
  },
  data() {
    return {
      page: 1,
      numPages: 0,
      pdfdata: undefined,
      errors: [],
      scale: 'page-width', //放大系数
      pageRotate: 0,
      pdfUrl: '',
      tabItem: [
        {
          //下方tab栏
          func: this.clock,
          icon: 'rotate_icon.png',
          txt: '翻转',
          imgSize: 'radio',
        },
        // {
        //   func: this.prePage,
        //   icon: 'pre_icon.png',
        //   txt: '上一页',
        //   imgSize: 'flat',
        // },
        // {
        //   func: this.nextPage,
        //   icon: 'next_icon.png',
        //   txt: '下一页',
        //   imgSize: 'flat',
        // },
        {
          func: this.scaleD,
          icon: 'magnify_icon.png',
          txt: '放大',
          imgSize: 'radio',
        },
        {
          func: this.scaleX,
          icon: 'reduce_icon.png',
          txt: '缩小',
          imgSize: 'radio',
        },
      ],
    };
  },
  mounted() {
    let queryData = this.$route.query;
    if(!!queryData.pdfUrl){
      this.pdfUrl = queryData.pdfUrl
      this.getPdf();
    }
  },
  watch: {
    show: function (s) {
      if (s) {
        this.getPdf();
      }
    },
    page: function (p) {
      if (
        window.pageYOffset <= this.findPos(document.getElementById(p)) ||
        (document.getElementById(p + 1) &&
          window.pageYOffset >= this.findPos(document.getElementById(p + 1)))
      ) {
        document.getElementById(p).scrollIntoView();
      }
    },
  },
  methods: {
    // 上一页
    prePage() {
      let p = this.page;
      p = p > 1 ? p - 1 : 1;
      this.page = p;
    },
    // 下一页
    nextPage() {
      let p = this.page;
      p = p < this.numPages ? p + 1 : 1;
      this.page = p;
    },
    // 左滑动翻页
    nextPageLeft() {
      if (this.scale == 100) {
        this.nextPage();
      } else {
        return;
      }
    },
    // 顺时针旋转
    clock() {
      this.pageRotate += 90;
    },
    // 逆时针旋转
    counterClock() {
      this.pageRotate -= 90;
    },
    //放大
    scaleD() {
      this.scale += 0.2;
    },

    //缩小
    scaleX() {
      if (this.scale <= 0.2) return false;
      this.scale += -0.2;
    },
    getPdf() {
      var self = this;
      self.pdfdata = pdfvuer.createLoadingTask(this.pdfUrl)
      self.pdfdata.then((pdf) => {
        self.numPages = pdf.numPages;
        window.onscroll = function () {
          changePage();
          stickyNav();
        };

        // Get the offset position of the navbar
        // var sticky = $('#buttons')[0].offsetTop;

        // Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function stickyNav() {
          //   if (window.pageYOffset >= sticky) {
          //     $('#buttons')[0].classList.remove('hidden');
          //   } else {
          //     $('#buttons')[0].classList.add('hidden');
          //   }
        }

        function changePage() {
          var i = 1,
            count = Number(pdf.numPages);
          do {
            if (
              window.pageYOffset >= self.findPos(document.getElementById(i)) &&
              window.pageYOffset <= self.findPos(document.getElementById(i + 1))
            ) {
              self.page = i;
            }
            i++;
          } while (i < count);
          if (window.pageYOffset >= self.findPos(document.getElementById(i))) {
            self.page = i;
          }
        }
      });
    },
    findPos(obj) {
      return obj.offsetTop;
    },
  },
};
</script>
   
  <style lang="less" scoped>
// #buttons {
//   margin-left: 0 !important;
//   margin-right: 0 !important;
// }
/* Page content */
.pdfvuer {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 667px;
  width: 100%;
  margin: 0 auto;
  overflow: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  font-size: 0.28rem;
  padding-top: 5px;
  background-color: #f4f6fc;
}
.content {
  padding: 16px;
}
.pageNum {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 80px;
  background: #e6e9f4;
  border-radius: 3px;
  font-family: PingFang-SC-Regular;
  font-size: 16px;
  color: #9b9b9b;
  text-align: center;
  line-height: 16px;
  position: fixed;
  bottom: 60px;
  left: 142px;
}
.pdf-tab {
  position: fixed;
  background-color: #fff;
  width: 100%;
  bottom: 0px;
  left: 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 10px 40px;
  box-sizing: border-box;

  .operate-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .radioImg {
      width: 20px;
      height: 20px;
    }

    .flatImg {
      width: 12px;
      height: 20px;
    }

    .txt {
      margin-top: 5px;
      font-family: PingFang-SC-Regular;
      font-size: 11px;
      color: #9b9b9b;
      text-align: center;
      line-height: 12px;
    }
  }

  .paddingRight50 {
    padding-right: 50px;
  }

  .paddingLeft20 {
    padding-left: 20px;
  }
}
</style>