增加pdf，xlsx，docx文件预览功能

yangys

2025-12-03 fdb0ed498f295b50c072c4b3652c08e2d60a747a

 src/views/wel/shemi.vue

@@ -124,11 +124,21 @@
    <el-dialog title="程序解锁" append-to-body v-model="unlockBox">
      <avue-form :option="unlockOption" v-model="unlockForm" @submit="unlockSubmit" @reset-change="unlockCancel" />
    </el-dialog>
    <avue-tabs :option="tabsOption" @change="tabsHandleChange" style="margin-top: 30px;" v-if="isShowTabs"></avue-tabs>
    <avue-tabs ref="tabs" :option="tabsOption" @change="tabsHandleChange" style="margin-top: 30px;" v-if="isShowTabs"></avue-tabs>
    <avue-form v-if="tabsType == 'tab1'" :option="tabsFormOption" v-model="tabsForm"></avue-form>
    <!--<span v-else-if="tabsType == 'tab2'">版本信息</span>-->
    <template v-else-if="tabsType == 'tab3'">
      <div v-html="convertToHtml(fileContent)" class="convertToHtml"></div>
      <div v-if="txtShow" v-html="convertToHtml(fileContent)" class="convertToHtml"></div>
      <el-image clsss="preview-content" v-if="imgShow" :src="imgUrl" :fit="fit" />
        <div v-if="pdfShow" class="pdf-content">
            <vue-pdf-embed v-if="pdfShow" :source="pdfUrl"/>
        </div>
        <div v-if="docShow" class="pdf-content">
            <vue-office-docx :src="docUrl"/>
        </div>
        <div v-if="xlsShow" class="pdf-content">
            <vue-office-excel :src="xlsUrl"/>
        </div>
    </template>
    <template v-else-if="tabsType == 'tab4'">
      <!--
@@ -210,6 +220,7 @@
<script>

import { Delete, Edit, Search, Share, Upload ,Lock,Unlock} from '@element-plus/icons-vue'
import {getFileLink } from '@/api/flow/todolist';
import debounce from 'lodash/debounce';
import NProgress from 'nprogress';
import { downloadXls } from '@/utils/util';
@@ -309,10 +320,23 @@
      content2: "",
      codeDiffFileName1: "",
      codeDiffFileName2: "",

      

      selectionList: [],
      targetRow: {},
      file: null,
      fileContent: "",
      imgUrl:'', //图片预览地址
      pdfUrl:'',
      docUrl:'',
      xlsUrl:'',
      imgShow: false,//图片预览是否显示
      pdfShow:false, //pdf显示框
      txtShow: true, //程序内容是否显示
      docShow: false,
      xlsShow: false,

      isShowTabs: true,
      nodeTypeList: [],
      
@@ -351,6 +375,7 @@
          prop: 'tab4'
        }]
      },
      //currentTab : 'tab1',
      hisFileViewModel: false,//历史文件列表对话框
      hisFileTableData:[], //历史文件列表数据
      hisFileContent:'',//历史文件内容
@@ -981,11 +1006,14 @@
      if (this.tabsForm.nodeType == 60) {
        //包名节点
        this.tabsOption = this.tabsOptionPackage;
        this.currentNodeType ='package';
        //获取历史记录
        this.getHistory(row.id);
      } else if (this.tabsForm.nodeType == 70){
        //文件节点
        this.tabsOption = this.tabsOption2;
        //TODO 切换到之前的类型，如果节点类型与之前相同。
        this.currentNodeType ='file';
        //获取文件内容
        this.getFile(row.id);
        
@@ -995,9 +1023,19 @@
      }else{
        this.tabsOption = this.tabsOption1;
      }
      this.isShowTabs = true;
      this.$nextTick(() => {
        this.tabsType = 'tab1';
        this.isShowTabs = true;
        var prop = 'tab1';
        var tabIndex = 0;
        for(var i =0;i<this.tabsOption.column.length;i++){
          if(this.tabsOption.column[i].prop == this.tabsType){
            prop = this.tabsType;
            tabIndex = i;
            break;
          }
        }
        this.$refs.tabs.changeTabs(tabIndex);
        this.tabsType = prop;
      })
    },
    tabsHandleChange(tabs) {
@@ -1005,18 +1043,75 @@
    },
    
    getFile(id) { //查看文件内容
      this.loading = true;
      axios({
        url: '/blade-mdm/program/nodehis/content-by-nodeid',
      //this.loading = true;

      this.getFileLinkByNode(id).then(res=>{
        let fileLink = res.data.data;
        let lowerName = fileLink.toLowerCase();
        if(lowerName.endsWith(".png") || lowerName.endsWith(".jpg") || lowerName.endsWith(".jpeg") || lowerName.endsWith(".bmp")){
              //图片
              this.imgShow = true;
              this.pdfShow = false;
              this.txtShow = false;
              this.docShow = false;
              this.xlsShow = false;

              this.imgUrl = fileLink;
              
              //this.imgUrl = "http://192.168.56.1:2888/img/bg/img-logo.png"; //可以显示
          }else if(lowerName.endsWith(".pdf")){
              //pdf
              this.imgShow = false;
              this.pdfShow = true;
              this.txtShow = false;
              this.docShow = false;
              this.xlsShow = false;
  
              this.pdfUrl = fileLink
              
          }else if(lowerName.endsWith(".docx")){
              this.imgShow = false;
              this.pdfShow = false;
              this.txtShow = false;
              this.docShow = true;
              this.xlsShow = false;

              this.docUrl = fileLink
              
          }else if(lowerName.endsWith(".xlsx")){
              this.imgShow = false;
              this.pdfShow = false;
              this.txtShow = false;
              this.docShow = false;
              this.xlsShow = true;

              this.xlsUrl = fileLink
          }else{
            axios({
              url: '/blade-mdm/program/nodehis/content-by-nodeid',
              method: 'get',
              params: { nodeId: id },
            }).then(
              res => {
                this.loading = false;
                this.fileContent = res.data.data;
              }
            );
        }
      });

          
    },
   
  getFileLinkByNode(id){

      return axios({
        url: '/blade-mdm/program/nodehis/link-by-nodeid',
        method: 'get',
        params: { nodeId: id },
      }).then(
        res => {
          this.loading = false;
          this.fileContent = res.data.data;
        }
      );
      });
    },
      
    getHistory(id) {  //查看历史记录
      this.loading = true;
      axios({
@@ -1241,4 +1336,20 @@
.marginR12 label {
  margin-right: 12px;
}

.preview-content {
    padding: 10px 10px;
    min-height: 100px;
    overflow: auto;
    max-height: 400px;
}

.pdf-content {
    background-color: #fffee1;
    padding: 5px 5px;
    min-height: 100px;
    overflow: auto;
    max-height: 400px;
    white-space: pre-wrap;
}
</style>