vue-预览PDF文件

小鱼儿心语：喷泉之所以漂亮是因为它有了压力；瀑布之所以壮观是因为它没有了退路；水之所以能穿石是因为永远在坚持。人生亦是如此。加油！

一、使用iframe标签预览PDF文件

代码：

<iframe
   :src="fileUrl"
   id="iframeBox"
   ref="iframeRef"
   frameborder="0"
   style="width: 100%; height: 800px"
></iframe>

js:
export default {
  data() {
    return {
      fileUrl: "test.pdf", //文件路径
    };
  }
};

二、使用embed标签预览PDF文件

代码：

<embed
   :src="fileUrl"
   type="application/pdf"
   width="100%"
   height="800px"
/>

js:
export default {
  data() {
    return {
      fileUrl: "test.pdf", //文件路径
    };
  }
};

三、使用vue-pdf插件预览PDF文件

1、安装依赖

npm install vue-pdf

2、注册并引入组件

import pdf from "vue-pdf";
components: {
  pdf,
},

3、使用组件展示PDF文件

<div
        class="pdf-box"
      >
        <div class="pdf-tab">
          <div class="pdf-tab-button">
            <div class="btn-def btn-pre" @click.stop="prePage">上一页</div>
            <div class="btn-def btn-next" @click.stop="nextPage">下一页</div>
            <div class="btn-def" @click.stop="clock">顺时针</div>
            <div class="btn-def" @click.stop="counterClock">逆时针</div>
          </div>
          <div class="page-size">{{ pageNum }}/{{ pageTotalNum }}</div>
          <pdf
            ref="pdf"
            class="pdf-preview"
            :src="fileUrl"
            :page="pageNum"
            :rotate="pageRotate"
            :style="{ height: customHeight + 'px' }"
            @num-pages="pageTotalNum = $event"
            @link-clicked="page = $event"
          ></pdf>
        </div>
        
 //js
  export default {
  data() {
    return {
      fileUrl: "", //文件路径
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      customHeight: 400, // 自定义的PDF预览框高度
    };
  },
  components: {
    pdf,
  },
  computed: {
   //解决预览pdf文字丢失Warning: Error during font loading: The CMap “baseUrl“ parameter must be specifie的问题
    pdfSrc() {
      //处理pdfUrl返回
      let src = pdf.createLoadingTask({
        url: this.fileUrl,
        //引入pdf.js字体，templ
        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/", //3.5方法已把外部cdn改为本地服务器，解决了用户网络不好有可能会导致字体包加载失败
        cMapPacked: true,
      });
      return src;
    },
  },
  methods: {
    //上一页
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    // 下一页
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    //顺时针
    clock() {
      this.pageRotate += 90;
    },
    //逆时针
    counterClock() {
      this.pageRotate -= 90;
    }  
  },
};

//css
.pdf-box {
  width: 100%;
  height: 800px;
  .pdf-tab {
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pdf-tab-button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .btn-def {
        width: 98px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        border-radius: 5px;
        font-size: 18px;
      }
    }

    .page-size {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
  }
}

今天就分享到这里了，还有其他小功能，大家可以分享交流，共同进步😊