fileItem.vue

<template>
  <div :style="{width:fileWidth}" class="file">
    <!-- <img :src="require(`../assets/img/TXT.png`)" class="file-icon"> -->
    <span class="file-icon">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="`#icon-_CGfujian${fileType}`"></use>
      </svg>
    </span>
    <div class="file-content">
      <div class="file-name">{{file.fileName}}</div>
      <div class="file-createdtime">{{file.createTime | filterCreateTime}}</div>
    </div>
    <Icon class="file-download" type="md-download" @click="handleDownload(file)" />
  </div>
</template>
<script>
export default {
  props: {
    file: Object,
    fileWidth: {
      type: String,
      default: '100%'
    }
  },
  computed: {
    fileType() {
      let type = ['bmp','ppt','txt','excel','zip','pdf','word','rar','jpg','gif','png']
      if (type.includes(this.file.mimeType)) {
        return this.file.mimeType
      } else if (['docx', 'doc', 'docm'].includes(this.file.mimeType)) {
        return 'word'
      } else if (['xls', 'xlsx'].includes(this.file.mimeType)) {
        return 'excel'
      } else {
        return 'tongyongtupian'
      }
    }
  },
  data() {
    return {
    }
  },
  filters: {
    filterCreateTime(val) {
      return val.substr(0, 10)
    },
  },
  methods: {
    handleDownload(list) {
      GMS.$http
        .get(`/common/attachment/${list.id}`, { responseType: 'blob' })
        .then((res) => {
          let blob = new Blob([res.data], {
            type: 'multipart/form-data;charset=utf-8',
          })
          //对文件名乱码转义--【Node.js】使用iconv-lite解决中文乱码
          let iconv = require('iconv-lite')
          iconv.skipDecodeWarning = true //忽略警告
          let downloadElement = document.createElement('a')
          let href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = list.fileName // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
    },
  },
}
</script>
<style lang="less" scoped>
    .file {
      min-height: 60px;
      width: 100%;
      min-width: 60px;
      background: rgba(83, 105, 216, 0.04);
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 10px;
      &-icon {
        // width: 20px;
        // height: 20px;
        width: 40px;
        text-align: left;
        
        font-size: 25px;
        float: left;
      }
      &-content {
        text-align: left;
        display: inline-block;
        width: calc(100% - 70px);
        .file-name {
          font-size: 14px;
          font-weight: 400;
          height: 20px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          color: #0f0f0f;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .file-createdtime {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #7f7f7f;
          line-height: 17px;
        }
      }
      &-download {
        float: right;
        color: #b8b8b8;
        font-size: 16px;
        margin-top: 13px;
        cursor: pointer;
      }
    }
</style>