v3-lab-web/src/components/lookDocumentDialog/lookDocumentListDialog.vue

<!--
    查看多个文档

    import lookDocumentListDialog from '@/components/lookDocumentDialog/lookDocumentListDialog.vue'

    components: {
      lookDocumentListDialog
    },

    <lookDocumentListDialog v-if="lookDocumentListType" :propsLookDocumentListData="propsLookDocumentListData"></lookDocumentListDialog>

      //查看多个文档
      lookDocumentListButton(type){
        if(type==1){
          this.$set(this,'propsLookDocumentListData',{
            title:"查看附件",
            list:this.addForm.data7
          });
          this.$set(this,'lookDocumentListType',true);
        }else{
          this.$set(this,'lookDocumentListType',false);
        }
      },
-->
<template>
  <el-dialog class="lookDocumentListDialog" :title="lookDocumentListTitle"
             :visible.sync="lookDocumentListType" v-if="lookDocumentListType"
             @close="outLook"
             width="1500px" height="700" append-to-body>
    <div class="lookDocumentListDialog-page">
      <div class="left-box">
        <div class="left-title-box">
          <img src="@/assets/ZDimages/safetyCheck/icon_dr_wj.png">
          <p>材料附件</p>
          <p class="button-p" @click="allDownloadButton">全部下载</p>
        </div>
        <div class="left-for-box scrollbar-box">
          <p class="left-for-p" v-for="(iframeItem,iframeIndex) in lookDocumentList" :key="iframeIndex"
             @click="lookDocumentListCheck(iframeIndex)"
             :class="lookDocumentListIndex == iframeIndex?'check-p':''">{{iframeItem.name}}</p>
        </div>
      </div>
      <div class="center-border"></div>
      <div class="right-box">
        <vue-office-docx
          style="width:1030px;"
          v-if="officeType === 'docx'&&!officeNullType"
          :src="lookUrl"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
        <vue-office-excel
          style="width:1030px;"
          v-if="officeType === 'excel'&&!officeNullType"
          :src="lookUrl"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
        <vue-office-pdf
          style="width:1030px;"
          v-if="officeType === 'pdf'&&!officeNullType"
          :src="lookUrl"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
        <p v-if="officeNullType" class="office-null-text">加载失败...</p>
      </div>
    </div>
    <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
      <p class="dialog-footer-button-null"></p>
      <p class="dialog-footer-button-info" @click="outLook">取消</p>
      <p class="dialog-footer-button-primary" @click="downloadButton">下载</p>
      <p class="dialog-footer-button-null"></p>
    </div>
  </el-dialog>
</template>

<script>
  //引入VueOfficeDocx组件
  import VueOfficeDocx from '@vue-office/docx'
  import '@vue-office/docx/lib/index.css'
  //引入VueOfficeExcel组件
  import VueOfficeExcel from '@vue-office/excel'
  import '@vue-office/excel/lib/index.css'
  //引入VueOfficePdf组件
  import VueOfficePdf from '@vue-office/pdf'
  import axios from 'axios'
  import saveAs from 'file-saver'
  import JSZip from 'jszip'
  export default {
    name: 'lookDocumentListDialog',
    props:{
      propsLookDocumentListData:{},
    },
    components: {
      VueOfficeDocx,
      VueOfficeExcel,
      VueOfficePdf
    },
    data(){
      return{
        lookDocumentListType:true,
        lookDocumentListTitle:"",
        lookDocumentList:[],
        lookDocumentSrc:"",
        lookDocumentListIndex:0,
        //文档类型
        officeType:null,
        //开关
        officeNullType:true,
        //文档地址
        lookUrl:"",
        fileBrowseEnvironment:localStorage.getItem('fileBrowseEnvironment'),
      }
    },
    created(){
      this.$set(this,'lookDocumentListTitle',this.propsLookDocumentListData.title);
      this.$set(this,'lookDocumentList',this.propsLookDocumentListData.list);
      this.lookDocumentListCheck(0);
    },
    mounted(){

    },
    methods:{
      //全部下载
      allDownloadButton(){
        // 初始化一个zip打包对象
        let zip = new JSZip()
        var promises = [];
        this.lookDocumentList.forEach(item => {
          const promise = this.getFile(item.url).then(data => {
            console.log(data)
            zip.file(item.name, data, { binary: true });
          });
          promises.push(promise);
        });
        Promise.all(promises).then(() => {
          zip.generateAsync({ type: "blob" }).then(content => {
            // 生成二进制流
            saveAs(content, '材料附件.zip')
            this.msgSuccess('操作成功')
          });
        });
      },
      getFile(url){
        return new Promise((resolve, reject) => {
          axios({
            method: "get",
            url:this.fileBrowseEnvironment+url,
            responseType: "blob"
          })
            .then(data => {
              resolve(data.data);
            })
            .catch(error => {
              reject(error.toString());
            });
        });
      },
      // 切换按钮
      lookDocumentListCheck(val){
        let type = '';
        if(this.lookDocumentList[val].url.split('.')[1] == 'docx'){
          type = 'docx'
        }else if(this.lookDocumentList[val].url.split('.')[1] == 'xlsx'){
          type = 'excel'
        }else if(this.lookDocumentList[val].url.split('.')[1] == 'pdf'){
          type = 'pdf'
        }
        let url = this.fileBrowseEnvironment + this.lookDocumentList[val].url;
        this.$set(this,'lookUrl',url);
        this.$set(this,'lookDocumentListIndex',val);
        this.$set(this,'officeType',type);
        this.$set(this,'officeNullType',false);
      },
      // 返回按钮
      outLook(){
        this.$parent.lookDocumentListButton(2)
      },
      // 下载按钮
      downloadButton(){
        let name = this.lookDocumentList[this.lookDocumentListIndex].name.split('.')[0];
        let type = this.lookDocumentList[this.lookDocumentListIndex].name.split('.')[1];
        let url = this.fileBrowseEnvironment + this.lookDocumentList[this.lookDocumentListIndex].url;
        const oReq = new XMLHttpRequest()
        oReq.open('GET', url, true)// URL 为下载的URL地址
        oReq.responseType = 'blob'
        oReq.onload = function() {
          const file = new Blob([oReq.response], {
            type: 'blob'
          })
          saveAs(file, name+'.'+type) // fileName为文件名
        }
        oReq.send()
      },
      //文件加载成功
      renderedHandler() {
        console.log("渲染完成")
        this.$set(this,'officeNullType',false);
      },
      //文件加载失败
      errorHandler() {
        console.log("渲染失败")
        this.$set(this,'officeNullType',true);
      },
    }
  }
</script>

<style scoped lang="scss">
  .lookDocumentListDialog{
    .lookDocumentListDialog-page{
      display: flex;
      flex:1;
      height:645px;
      overflow: hidden;
      padding:0 50px;
      .left-box{
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width:265px;
        .left-title-box{
          padding-bottom:20px;
          display: flex;
          width:230px;
          border-bottom:1px dashed #D8D8D8;
          img{
            width:16px;
            height:13px;
            margin:13px 15px 13px 0;
          }
          p:nth-child(2){
            flex:1;
            line-height:40px;
            font-size:16px;
            color:#0183FA;
          }
          .button-p{
            padding:0 10px;
            margin-top:5px;
            height:30px;
            line-height:30px;
            font-size:14px;
            color:#0183FA;
            border:1px solid #0183FA;
            border-radius:4px;
            cursor: pointer;
          }
          .button-p:hover{
            color:#fff;
            border:1px solid #0183FA;
            background-color: #0183FA;
          }
        }
        .left-for-box{
          flex:1;
          .left-for-p{
            padding:0 10px;
            width:230px;
            line-height:40px;
            margin-top:10px;
            font-size:16px;
            color:#333;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            cursor: pointer;
          }
          .check-p{
            background-color:rgba(1,131,250,0.2);
            color:#0183FA;
          }
        }
      }
      .center-border{
        border-right:1px dashed #D8D8D8;
      }
      .right-box{
        flex:1;
        display: flex;
        margin-left:57px;
        position: relative;
        .positionButton{
          position: absolute;
          top:15px;
          right: 35px;
          border:1px solid #0183fa;
          border-radius:4px;
          line-height:30px;
          width:60px;
          text-align: center;
          cursor: pointer;
          color:#0183fa;
          background-color: #fff;
        }
        .iframe{
          flex:1;
        }
      }
      .out-button{
        width:60px;
        line-height:30px;
        color:#999;
        background-color: #dedede;
        border-radius:4px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top:17px;
        right:17px;
        z-index:99999;
      }
    }
  }
</style>