a标签的download属性实现静态文件或图片下载

前端使用a标签的download属性实现静态文件或图片下载

需要知道的是，如果下载的是浏览器不能识别的（例如：.exe,.zip,.doc等）内容，浏览器会直接进行下载，但是如果下载的是浏览器可以识别的（例如：.png,.jpg等）内容，浏览器不会进行下载，而是进行打开预览。

1. 下载内容为不能识别

1.1 直接使用download属性，属性值为下载文件的名字。

<a href="./企业综合信息系统插件的副本.zip" download="xxx.zip" >压缩包下载</a>
<a href="./img/开题报告.docx" download="xxx.zip" >docx文件下载</a>

1.2 使用window.href()

<a onclick="downloadFile()">下载文件</a>

function downloadFile() {
    window.open(
        //  './img/download.jpeg',     //图片会直接打开预览
        './img/组 5597_slices.zip',
        '_target'
    );
}

2. 下载内容可以识别

<a onclick="downImgFile()">下载图片</a>

function downImgFile(){
    // content是图片的URL地址，
    // filename 是图片的名称（或者是你下载时候给定的名称）
    let content = './img/download.jpeg';
    let filename = '1.jepg'
    // 创建隐藏的可下载链接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
}

1. Blob(Binary long Object)是二进制长对象的意思，Blob通常用于存储大文件，典型的Blob内容是一张图片或者一个声音文件.
2. Window.open(url,name)：打开一个新窗口 详细看： https://blog.csdn.net/qq_40638598/article/details/90546116

但是在vue项目中，会出现下载失败-未发现文件的错误。

正常情况下，我们习惯把下载的内容放在src下，这样下载的时候就找不见href里面的相对路径，我们可以把下载的内容放在public下，还有注意href里面的路径不要写成’…/…/public/xxx’,直接写成’./xxx’就可以了，就是index.html 相对于你下载内容放置的位置。

总结：

1. 把下载内容放在public下面
2. 路径写为’./public/xxx’