menduner/src/views/recruit/enterprise/talentPool/components/details/attachmentResume.vue

<template>
  <div>
    <div class="d-flex attachment-item mb-2 cursor-pointer" v-for="k in attachmentList" :key="k.id">
      <v-icon color="primary">mdi-file-account</v-icon>
      <div class="file-name ellipsis ml-2">{{ k.title }}</div>
      <v-icon color="primary" @click="previewFile(k.url)">mdi-eye-outline</v-icon>
      <v-icon class="mx-2" color="primary" @click="handleDownload(k)">mdi-download-box-outline</v-icon>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { previewFile } from '@/utils'
defineOptions({name: 'enterprise-talentPool-details-attachmentResume'})

const attachmentList = ref([
  {
    id: "1797473178549903362", 
    title: "林同学-Java-15875754758.docx", 
    url: "http://menduner.citupro.com:6868/admin-api/infra/file/24/get/725800ca45aced6c9742e94f576051c8c2527cd49b332c15be2dfbf17daedb92.docx", 
    createTime: 1717385976000, 
    updateTime: 1717385976000
  }, 
  {
    id: "1797484319040229377", 
    title: "林同学-C++-15875754758.docx", 
    url: "http://menduner.citupro.com:6868/admin-api/infra/file/24/get/725800ca45aced6c9742e94f576051c8c2527cd49b332c15be2dfbf17daedb92.docx", 
    createTime: 1717388632000, 
    updateTime: 1717388632000
  }, 
  {
    id: "1797511196383563778", 
    title: "林同学-PHP-15875754758.docx", 
    url: "http://menduner.citupro.com:6868/admin-api/infra/file/24/get/725800ca45aced6c9742e94f576051c8c2527cd49b332c15be2dfbf17daedb92.docx", 
    createTime: 1717395040000, 
    updateTime: 1717395040000
  }
])

const getBlob = (url) => {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.responseType = 'blob'
    xhr.onload = () => {
      if (xhr.status === 200) resolve(xhr.response)
    }
    xhr.send()
  })
}

const saveAs = (blob, filename) => {
  var link = document.createElement('a')
  link.href = window.URL.createObjectURL(blob)
  link.download = filename
  link.click()
}
// 下载附件
const handleDownload = (k) => {
  getBlob(k.url).then(blob => {
    saveAs(blob, k.title)
  })
}
</script>
<style lang="scss" scoped>
  .attachment-item {
    color: #555;
    font-size: 14px;
    .file-name {
      width: 230px;
      &:hover {
        color: var(--v-primary-base);
      }
    }
  }
</style>