h5 + vant + ts展示pdf

朴灿烈づ我的快乐病毒、 2023-01-05 12:46 218阅读 0赞

**h5 + vant + ts展示pdf**

> 1、npm install vue-pdf@4.2.0  
> 2、组件中引用 import pdf from “vue-pdf”;

> pdf 与 van-popup 封装

<template>
      <div class="view-pdf">
        
        <van-popup v-model="showPop"
                   round
                   position="bottom"
                   :style="{ height: '90%' }">
          <pdf v-for="i in numPages"
               :key="i"
               :src="src"
               :page="i"
              ></pdf>
        </van-popup>
      </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue, Prop, Emit } from "vue-property-decorator";
    // 引入pdf
    import pdf from "vue-pdf";
    // 解决部分文字不显示的问题
    // import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
    import axios from "axios";
    @Component({ 
      components: { 
        pdf,
      },
    })
    export default class index extends Vue { 
      @Prop() data: any;
    
      src: any = "";
      numPages: number = 0;
      page: number = 1;
      currentPage: number = 0;
      showPop: boolean = false;
      isWX: boolean = true;
    
      created() { 
        var ua: any = window.navigator.userAgent.toLowerCase();
        // 判断是否是微信打开
        this.isWX = ua.match(/MicroMessenger/i) == "micromessenger";
      }
    
      handleSee() { 
        if (this.data.content) { 
          if (this.data.type == "pdf") { 
            // 如果后端返回数据是base64
            //let da = dataURLtoBlob(this.data.content)
            let da = this.data.content;
            let _this = this
            let win: any = window
            if (win.createObjectURL != undefined) {  // basic
              _this.src = win.createObjectURL(da)
            } else if (win.webkitURL != undefined) {  // webkit or chrome
              try { 
                _this.src = win.webkitURL.createObjectURL(da)
              } catch (error) { 
    
              }
            } else if (win.URL != undefined) {  // mozilla(firefox)
              try { 
                _this.src = win.URL.createObjectURL(da)
              } catch (error) { 
              }
            }
            let loadingTask = pdf.createLoadingTask(_this.src)
            this.showPop = true;
            loadingTask.promise.then((pdf: any) => { 
              _this.numPages = pdf.numPages
              }).catch((err: any) => { 
              console.error('pdf 加载失败', err)
            })
          } 
        } else { 
          this.$toast.fail("内容不存在");
        }
      }
    
      //base64 转换 blob
      dataURLtoBlob(dataurl: any) { 
        var bstr = atob(dataurl);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) { 
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {  type: "pdf" });
      }
    }
    </script>
    
    <style scoped lang="less">
    .btn-group { 
      padding: 24px;
    }
    </style>

> 对封装popup引用

<van-button type="info" @click='handleViewPdf'>查看</van-button>
    <view-pdf :data="currentPdfInfo" ref="view-pdf" />

> 此案例返回为blob

// 查看按钮点击方法
    handleViewPdf() { 
      this.$toast.loading({ 
         duration: 0,
            message: "正在加载",
         });
         let config: any = { 
            url: "/admin/pdf/download",
            method: 'get',
            baseURL: process.env.VUE_APP_URL + "/credit",
            responseType: "blob",
            headers: { 
               "X-Access-Token": getStore("token") ? getStore("token") : "",
            },
            params: { 
               type: '2',
                 entryId: this.orderDetail[0].orderId
               },
            };
            axios(config).then((response: any) => {   
                this.$toast.clear();
                if (response.status == 200) { 
                    const content: any = response.data;
                    const blob = new Blob([content], {  type: "application/pdf" });
                    this.currentPdfInfo = { 
                        content: blob,
                        type: "pdf",
                    };
    
                    this.$nextTick(() => { 
                        let ele: any = this.$refs["view-pdf"];
                        ele.handleSee();
                    });
                }
            })
        }

> ps:  
> 需要注意的点，自己一直卡了很久  
> 关于axios封装 拦截器需要对 blob单独设置。

axios.interceptors.response.use(
        function(response) { 
            console.log("Response", response)
            if (response.status == 200) { 
                let responseData = response.data
                if (response.config.responseType == "blob") { 
                    return response;
                }
                return responseData
            } else { 
                return { }
            }
        },
        function(error) { }
    )