portal_website/src/components/el/el14.vue

<template>
  <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
    <h2 class="title1" style="line-height: 40px">资料下载</h2>
    <div>

      <div v-for="i in data.fileList" class="fileCard" style="text-align: left">
        <div class="cardTitle">{{ i.name }}</div>
        <div class="cardValue">{{ i.value }}</div>
        <el-button @click="downFile(i.url,i.fileName)" type="primary" class="downIcon" icon="el-icon-download "
                   circle></el-button>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: 'PlatformFeatures',
  props: ['data'],
  computed: {},

  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    async downFile(url, filename) {
      try {
        const response = await fetch(url, {mode: 'cors'});
        if (!response.ok) throw new Error('网络错误');

        const blob = await response.blob(); // 获取文件数据
        const blobUrl = URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = filename || url.split('/').pop();
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);

        URL.revokeObjectURL(blobUrl); // 释放内存
      } catch (err) {
        console.error('下载失败:', err);
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";


.fileCard {
  vertical-align: top;
  display: inline-block;
  width: 40%;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-top: 1vw;
  position: relative;

  .cardTitle {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 22px;
    font-weight: 700;
    line-height: 45px;
    width: calc(100% - 80px);
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }

  .cardValue {
    position: absolute;
    top: 55px;
    width: calc(100% - 80px);
    left: 20px;
    font-size: 14px;
    line-height: 45px;
    color: #aaa;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }

  .downIcon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  &:nth-child(2n) {
    margin-left: 5%;
  }
}
</style>