vue2中封装弹框组件pdf在线预览+下载（oss云链接）

 yarn  add  vue-pdf 

 引入，注册 ，封装弹框组件方便后续使用，话不多说直接上代码

父组件html： 

    <el-button
         size="mini"
         type="text"
         icon="el-icon-view"
         @click="hangdleAttachment(scope.row)"
    >
        附件
    </el-button>
    <!-- 查看附件 -->
    <pdf ref="pdf" :url="form.url" :title="viewTitle" />

父组件js： 

import pdf from "@/components/pdf.vue";

export default {
  components: {
    pdf,
  },
  data() {
    return {
      url:"",
      title:"",
      from:{}
    }
  },
  methods: {
    /**查看附件 */
    hangdleAttachment(row) {
      this.form = row; 
      this.viewTitle = "**附件";
      this.$nextTick(() => {
        if (row.url?.includes(".pdf")) {
          this.$refs.pdf.changeDialog(true);
        } else {
          this.$modal.msgError("无附件");
        }
      });
    },
  },
}

子组件html部分：

  <el-dialog
    :title="title"
    :visible.sync="viewOpen"
    width="60%"
    v-dialogDrag
    append-to-body
  >
    <div class="ViewContent">
      <pdf
        :src="this.url"
        :page="currentPage"
        :scale="1.0"
        @num-pages="onNumPages"
      ></pdf>
    </div>
    <div slot="footer" class="dialog-footer">
      <div class="footer_page">
        <el-button
          size="mini"
          @click="goToPage(currentPage - 1)"
          :disabled="currentPage === 1"
        >
          上一页
        </el-button>
        <span style="padding: 0 10px"
          >{{ currentPage }} / {{ totalPages }}</span
        >
        <el-button
          size="mini"
          @click="goToPage(currentPage + 1)"
          :disabled="currentPage === totalPages"
        >
          下一页
        </el-button>
      </div>
      <div>
        <el-button type="primary" @click="downloadAttachment">下 载</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </el-dialog>

 子组件js部分：

import pdf from "vue-pdf";
export default {
  name: "courseResourcePdf",
  props: ["url", "title"],
  components: {
    pdf,
  },
  data() {
    return {
      // pdf分页
      currentPage: 1,
      totalPages: 0,
      viewOpen: false,
      extension: "",  //打开弹框组件截取父组件传递的url的后缀,方便下载使用
    };
  },
  methods: {
    /** 总页数 */
    onNumPages(numPages) {
      this.totalPages = numPages;
    },
    /** 分页 */
    goToPage(pageNumber) {
      if (pageNumber >= 1 && pageNumber <= this.totalPages) {
        this.currentPage = pageNumber;
      }
    },
    /** 取消按钮 */
    cancel() {
      this.viewOpen = false;
    },
    /** 下载附件 */
    downloadAttachment() {
      fetch(this.url)
        .then((res) => res.blob())
        .then((blob) => {
          const a = document.createElement("a");
          document.body.appendChild(a);
          a.style.display = "none";
          // 使用获取到的blob对象创建的url
          const url = window.URL.createObjectURL(blob);
          a.href = url;
          // 指定下载的文件名
          a.download = `${this.title}.${this.extension}`;
          a.click();
          setTimeout(() => {
            document.body.removeChild(a);
            // 移除blob对象的url
            window.URL.revokeObjectURL(url);
          }, 300);
        });
    },
    // 打开弹框
    changeDialog(flag) {
      this.viewOpen = flag;
      this.extension = this.url.substring(this.url?.lastIndexOf(".") + 1);
    },
  },
};

 子组件css部分：

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding: 10px;
}
:deep(.el-dialog__header) {
  padding: 10px;
}
.ViewContent {
  width: 100%;
  height: 650px;
}
.pdfStyle {
  height: 500px;
  span {
    font-size: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  span:hover {
    color: #017ffb;
    cursor: pointer;
  }
}
.footer_page {
  text-align: center;
}
</style>