a标签下载

知识点

download 下载：跨域问题（加载了非同源内容，相当于导航功能）
解决方法：
（1） 在服务器设置ContentDisposition，使用http响应头：ContentDisposition
（2） 先下载源数据文件，生成blob对象，在使用URL.createObjectURL()创建一个非跨域的数据源，在页面写入a标签支持下载。

前端代码

<script setup>

import xx1 from './assets/xx1.png'



</script>

<template>
<div><a :href="xx1" download="重命名.png"> 下载图片 ，并重命名</a></div>
<div><a :href="xx1"> 下载</a></div>
<div><a href="http://cn.bing.com/images/search?view=detailV2&ccid=wc%2fdCG%2fK&id=2A67B025EDB55DFCC3EACFBF5B0CD513CC71AE39&thid=OIP.wc_dCG_KbIKZwMdtD3gL2QHaEt&mediaurl=https%3a%2f%2fpic3.zhimg.com%2fv2-58d652598269710fa67ec8d1c88d8f03_r.jpg%3fsource%3d1940ef5c&exph=1304&expw=2048&q=%e5%9b%be%e7%89%87&simid=607986392530124616&FORM=IRPRST&ck=7906E4DE8F66609504206A4E0B045F1E&selectedIndex=2&ajaxhist=0&ajaxserp=0" 
download="重命名.png"> 
下载其他网站图片</a>
</div>
</template>