文件预览_this.currentimg.lastindexof('?')-CSDN博客

本文链接：https://blog.csdn.net/weixin_43392545/article/details/103539365

<!--  -->
<template>
  <div>
      <img v-if="fileTYPE==1" :src="imgsrc" alt="">
      <iframe v-if="fileTYPE==2" :src="wordsrc" width='100%' height='100%' frameborder='1'>
      </iframe>
      <!-- <pdf
      v-if="fileTYPE==3"
      :src="pdfsrc" 
      :page="currentPage" 
      @num-pages="pageCount=$event" 
      @page-loaded="currentPage=$event" 
      @loaded="loadPdfHandler"> 
    </pdf> -->
  </div>
</template>

<script>
// import pdf from 'vue-pdf'
export default {
  data () {
    return {
        fileTYPE:0,// 1 图片   2 office类word 3 pdf  4 docx
        filename:'',
        filepath:'',
        imgsrc:'',
        wordsrc:'',
        pdfsrc:'',
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        fileType: 'pdf', // 文件类型
　　　　 src: '', // pdf文件地址
    }
  },

  components: {pdf},

  computed: {},

  methods: {
       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 // 加载的时候先加载第一页
      }
  },

  mounted(){
    let typeArr=['bmp','jpg','jpeg','png','tif','gif','webp', 'psd', 'svg', 'tiff','doc','docx','xls','xlsx','ppt','pdf']
    let obj=JSON.parse(localStorage.getItem('lookfile'))  
    this.filename=obj.name
    this.filepath=obj.path
    let str=this.filename.substring(this.filename.lastIndexOf('.')+1).toLowerCase() //文件后缀名字
    let imgArr=['bmp','jpg','jpeg','png','tif','gif','webp','psd','svg','tiff']
    let docArr=['doc','docx']
    let xlsArr=['xls','xlsx','ppt']
    // img--设置图片资源
    if(imgArr.indexOf(str)!==-1){
        this.fileTYPE=1
        this.$nextTick(()=>{
            this.imgsrc=url  // // 例： http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls
            this.wordsrc=''
            this.pdfsrc=''
        })
    }
    // xlsx ppt
    if(xlsArr.indexOf(str)!==-1){
       this.fileTYPE=2
       this.$nextTick(()=>{
            this.imgsrc=''
            this.wordsrc="https://view.officeapps.live.com/op/view.aspx?src="+url  // 例： http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls
            this.pdfsrc=''
        })
    } 
    // pdf--直接访问
    if(str==='pdf'){
        this.fileTYPE=3  
        let p_tag=document.creatElement('a')
        p_tag.href=url  //带域名url  http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf  
        p_tag.click()
        document.removeChild(p_tag)
    }
    //doc docx
    if(docArr.indexOf(str)!==-1){
       this.fileTYPE=4
       let a_tag=document.creatElement('a')
       a_tag.href="http://www.xdocin.com/xdoc?_func=to&amp;_format=html&amp;_cache=1&amp;_xdoc="+url  //带域名url   
       a_tag.click()
       document.removeChild(a_tag)
    }   
  }

}
</script>
<style lang='scss' scoped>
</style>