面包屑的功能实现 & 下载按钮的功能实现 & vue-pdf的使用及IE中的适配

面包屑的功能实现 & 下载按钮的功能实现 & vue-pdf的使用及IE中的适配

图例

1、面包屑

<el-container class="home-container">
<!-- 面包屑区 -->
      <div class="bread">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/contract-alternative#alternative' }">合同范本</el-breadcrumb-item>
          <el-breadcrumb-item>{{detaList.navigation}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
</div>

2、下载和pdf框

<el-container class="home-container">
<!-- 左侧内容区 -->
      <div class="left">
        <!-- <el-button size="medium" icon="el-icon-download" plain>下载</el-button> -->
        <a
          v-if="detaList.preview_path != detaList.file_path"
          @click="downloadLink(detaList.file_path)"
          style="text-decoration:none;"
        >
          <el-button size="medium" icon="el-icon-download" plain>下载</el-button>
        </a>
        <div class="lef-a">
          <div class="count">
            <iframe :src="detaList.preview_path" width="100%" height="100%"></iframe>
            <!-- <embed :src="detaList.preview_path" type="application/pdf" width="100%" height="100%" /> -->
            <!-- <a :href="detaList.preview_path"></a> -->
            <!-- <span>PDF或PPT显示区域</span> -->
          </div>
        </div>
      </div>
 </div

data和methoods

<script>
import pdf from 'vue-pdf'  //引入
export default {
  name: 'Pdf',
  components: {
    pdf,
  },
  data() {
    return {
      detaList: {},
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: 'pdf', // 文件类型
    }
  },

  created() {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    // this.src = pdf.createLoadingTask(this.src)
    // 获取数据
    this.getDeta()
  },
  methods: {
    downloadLink(url) {
      this.$http.get('/download', { url: url }).then(
        (response) => {
          if (response.code == 200) {
            window.open(url, '_blank')
          } else {
            this.$message.error('文件下载错误')
          }
        },
        (error) => {
          this.$message.error('文件下载错误')
        }
      )
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
        // console.log(this.currentPage)
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
        // console.log(this.currentPage)
      }
    },

    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    // 获取详情
    // get请求 get('地址'，'{params:数据}')
    // get请求 get('地址'，'{params:数据}')
    async getDeta() {
      // console.log('开始详情')
      const hide = this.$message.loading('详情获取中，请您稍等...', 0) //.then(() => this.$message.success('水印已生成', 2))
      let res = await this.$http.get('/contract/detail', {
        id: this.$route.query.id,
      })
      if (res.code != 200) {
        this.$router.push('/404')
        setTimeout(hide, 100)
      } else {
        this.detaList = res.result
        setTimeout(hide, 100)
      }
    },
  },
}
</script>

样式

/deep/.el-breadcrumb__inner.is-link {
  font-weight: 500;
}
.nav {
  width: 80px;
  height: 90px;
  background: yellowgreen;
}
.bread {
  height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  .el-breadcrumb {
    line-height: 20px;
    font-size: 16px;
    color: #999999;
  }
}
.left {
  width: 880px;
  background: #ffffff;
  position: relative;
  float: left;
  .el-button {
    // float: right;
    width: 102px;
    height: 30px;
    position: absolute;
    top: -30px;
    right: 0px;
    // vertical-align: middle;
  }
  .lef-a {
    padding: 20px 20px;
    .count {
      background: #d8d8d8;
      // padding: 20px;
      //虚拟值
      height: 880px;
      span {
        font-size: 30px;
        color: #333333;
      }
    }
  }
}

注——在ie浏览器中下拉列表和dialog对话框的内容会被pdf框进行覆盖

安包

 npm install --save jquery jsencrypt

main.js和所在页面引入

import $ from 'jquery'

解决方案：

<el-submenu index="4">
    <template slot="title">工具</template>
    <el-menu-item @click.native="gotoSensitive">分类</el-menu-item>
    <iframe class="cover" src="about:blank"></iframe>    //添加此行即可兼容IE
</el-submenu>

增添样式

.cover {
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.home-container {
    position: relative;
    z-index: 2;
}