pdf预览

作者: AAA前端 | 来源:发表于2023-03-30 09:52 被阅读0次

    通过接口拿到第三方的链接,然后判断不同环境,比如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>
    

    相关文章

      网友评论

          本文标题:pdf预览

          本文链接:https://www.haomeiwen.com/subject/nuwqddtx.html