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

最新推荐文章于 2024-05-10 13:10:12 发布

原创最新推荐文章于 2024-05-10 13:10:12 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#imageview #download #html #vue

Vue2.x 同时被 2 个专栏收录

23 篇文章

订阅专栏

15 篇文章

订阅专栏

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>