pdf预览

	npm i pdfobject

<template>
  <div class="dwgPreview">
    <div class="MxVexxel">
      <el-card v-for="(item,itemIndex) in dwgSrc" :key="itemIndex" class="mxPreview">
        <div class="MxTitle">
          <span :title="item.file_name">{{item.file_name}}</span>
        </div>
        <div class="mxdiv">
          <embed :src="`${baseUrl}${item.fileid}/${item.id} `" type="application/pdf" width="200" height="142">
        </div>
        <div class="MxClick">
          <div class="MxClickDelte" title="查阅" @click="fileNameClick(item,itemIndex)">查阅</div>
        </div>
      </el-card>
    </div>
    <el-dialog
      width="100%"
      :visible.sync="innerVisible"
      append-to-body
      class="elDialogDwg"
    >
      <div class="dwgdiv">
        <!-- <div class="dwgbtn" @click="backBtn">
          <span><i class="el-icon-back"></i>返回</span>
        </div> -->
        <div id="dwgdiv" >
          <embed id="dwgCanvas" :src="`${baseUrl}${dwgdivUrl.fileid}/${dwgdivUrl.id}`" type="application/pdf" width="100%" height="calc(100vh)">
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props:{
  // 接收数据 
    dwgSrc:{
      type: [Array],
      required: true
    }
  },
  data(){
    return {
      baseUrl:'http://218.29.110.116:8086/cadsmart-api/cadsmart/filehandle/preview2/',
      // 图纸预览 大图弹窗
      innerVisible:false,
      dwgdivUrl:{}
    }
  },
  mounted(){

  },
  methods:{
    // 打开全屏预览
    fileNameClick(val,valIndex){
      this.dwgdivUrl=val
      // this.innerVisible=true
      window.open(`${this.baseUrl}${val.fileid}/${val.id}`,val.id)
    },
    // 关闭全屏预览
    backBtn(){
      this.innerVisible=false
    },
  }
}
</script>
<style lang="scss" scoped>
.dwgPreview{
  .MxVexxel{
    overflow-x: auto;
    overflow-y: auto;
    max-height: 43.75rem;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    .mxPreview{
      width: 16.25rem;
      height: 14.125rem !important;
      margin: 10px 30px 20px;
      ::v-deep .el-card__body{
        padding: 0;
      }
      .MxTitle{
        height: 2rem;
        line-height: 2rem;
        color: #303030;
        font-size: .875rem;
        font-weight: bold;
        white-space:nowrap; 
        overflow:hidden; 
        text-overflow:ellipsis;
        // span{
          // &:hover {
            // color: #00b3aa;
            // cursor:pointer;
            // text-decoration: underline;
          // }
        // }
      }
      .mxdiv{
        width: 16.25rem;
        height: 155px;
      }
      .MxClick{
        width: 16.25rem;
        height: 2.25rem;
        // background: rgba(255, 255, 255, 0.5);
        // position: relative;
        // top: -4.5rem;
        opacity: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        // color: #303030;
        &:hover{
          opacity: 1;
          transition: 1s;
          // background: rgba(255, 255, 255, 0.5);
        }
        .MxClickDelte{
          // width: 50%;
          width: 100%;
          height: 2.25rem;
          line-height: 2.25rem;
          &:hover{
            cursor:pointer;
            background: rgba(187, 186, 186, 0.5);
          }
        }
      }
    }
  }
}
</style>
<style scoped>
  .elDialogDwg /deep/ .el-dialog:not(.is-fullscreen){
    margin-top: 0 !important;
  }
  .elDialogDwg /deep/ .el-dialog__headerbtn .el-dialog__close{
    display: none;
  }
  .elDialogDwg /deep/ .el-dialog__header{
    padding: 0;
  }
  .elDialogDwg /deep/ .el-dialog__body{
    padding: 0;
  }
  .dwgdiv{
    width: 100%;
    height: calc(100vh);
  }
  .dwgbtn{
    width: 3.125rem;
    height: 1.875rem;
    line-height: 1.875rem;
    color: #fff;
    font-size: 1rem;
    position: absolute;
    left:.9375rem;
    top:.9375rem;
  }
  .dwgbtn:hover{
    cursor:pointer;
    color: #00b3aa;
  }
  #dwgCanvas{
    width: 100% !important;
    height: calc(100vh) !important;
  }
</style>