1. 程式人生 > >vue實現點選下載圖片

vue實現點選下載圖片

​<el-table-column label='縮圖' width='100'>
   <template slot-scope='scope'>
       <a :href="scope.row.url" download="">
          <img :src='scope.row.url' class="img-circle" width="35px" style="" />
       </a>
    </template>
</el-table-column>

主要實現的功能是,vue開發的頁面中,點選圖片,直接將該圖片儲存到本地,是用a標籤實現;

不過這裡需要注意的是,該方式只支援火狐與谷歌瀏覽器;

另外在程式碼實現的過程中應注意href與src中都是圖片地址,且要保持一致;href前要加:實現動態繫結;download裡的屬性值是下載的檔名,若為空,則檔名為href中的圖片名稱。 ​