vue利用a标签点击下载保存图片

Boriska1996

关注

原创最新推荐文章于 2026-05-28 15:39:42 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

从GitHub到海浪模拟：手把手教你配置WAVEWATCHⅢ 6.07.0的完整开发与测试环境本文详细指导如何在Ubuntu系统中配置WAVEWATCHⅢ 6.07.0的开发与测试环境，涵盖虚拟机设置、依赖安装、源码编译及案例验证的全流程。通过步骤化教程，帮助科研人员快速搭建高效的海浪模拟平台，提升海洋数值模拟的研究效率。阅读详情

vue前端a标签点击下载保存图片

想不调用接口直接下载保存图片，翻csdn把手都翻出血了。

亲测一行代码搞定：

把图片地址设在download属性上，而不是放在href中:

关键代码：

   <a href="" :download="item.src" class="download"></a>

<template>
  <div class="contain">
    <el-dialog title="图片预览" :visible.sync="dialogVisible" width="790px" height="554px" :show-close="true" :autoplay="false" :close-on-click-modal="false">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <a href="" :download="item.src" class="download"></a>
          <img :src="item.src" alt="" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>
<script>
import xiazai from '@/assets/icons/xiazai.svg';

export default {
  name: 'Carousel',
  props: {
    imgList: {
      type: Array,
      default: [],
      required: true,
    },
  },
  data() {
    return {
      downloadImg: [],
      dialogVisible: false,
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__headerbtn {
  display: none;
}
.download {
  height: 50px;
  width: 50px;
  display: block;
  position: fixed;
  background: url('~@/assets/icons/xiazai.svg') no-repeat;
  font-size: 30px;
  opacity: 0.75;
  line-height: 300px;
  right: 0;
  bottom: 0;
}
::v-deep .el-dialog__header {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep .is-active .el-carousel__button {
  background: #3a86ff;
  border-radius: 4px;
  width: 18px;
  height: 8px;
}
::v-deep .el-carousel__button {
  height: 8px;
  width: 8px;
  border-radius: 8px;
}
::v-deep .el-carousel__indicators--outside {
  padding-top: 20px;
}
</style>