// <input type="file" name="file" id="file"/>
let fileEl = document.getElementById("file")
fileEl.onchange = function () {
    let file = fileEl.files[0]
    /*
    把文件转成url
    createObjectURL()参数可以传blob或者file
     */
    let url = URL.createObjectURL(file)
    let a = document.createElement("a")
    /*
    a.innerHTML = "下载文件"
    或者 a.innerText = "下载文件"
    该属性可有可无,如果页面需要显示a标签,则保留属性;
    反之则无需保留该属性
     */
    // a.innerHTML = "下载文件"
    a.style.display = "none"
    a.href = url
    /*
    这个属性为关键属性,如果不添加download属性,
    则会直接在浏览器打开该文件,对于浏览器不能打
    开的文件会显示乱码,比如压缩包
     */
    a.download = file.name
    document.body.appendChild(a)


    //为a标签赋予点击事件并点击,如果是手动点击,则无需赋予事件
    let evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, true);
    a.dispatchEvent(evt);
    //下载完成之后删除a标签
    document.body.removeChild(a);
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐