前端下载文件方法分享

        之前前端下载文件一直不是我弄的，但是最近发现一个需求要下载word文档和excel表格，之前是下载pdf和图片，之前的方法有点不适用。今天就来分享一些下载文件的方法。

一、a标签下载

这里的οnclick="return false"是取消a标签的跳转功能

<a href="下载的链接" download="下载的文件名" onclick="return false">点击下载</a>

二、form表单下载

	function downloadFile(downloadUrl, fileName) {
            // 创建表单
            const formObj = document.createElement('form');
            formObj.action = `${downloadUrl}`;
            formObj.method = 'get';
            formObj.target = 'frameName'
            formObj.style.display = 'none';
            // 创建input，主要是起传参作用，这里的是为了额外传参用的
            const formItem = document.createElement('input');
            formItem.value = fileName; // 传参的值
            formItem.name = 'fileName'; // 传参的字段名
            // 插入到网页中
            document.body.appendChild(formItem);
            document.body.appendChild(formObj);
            formObj.submit(); // 发送请求
            document.body.removeChild(formObj); // 发送完清除掉
        }

三、window.open下载

window.open('下载的地址')
location.href('下载的地址')

这两种方法下载实际上和a标签一样

四、canvas和Image对象下载

function downloadImages(imgsrc) {//下载图片地址
    var image = new Image();
    // 解决跨域 Canvas 污染问题,
    image.setAttribute("crossorigin", "anonymous");
    //图片加载执行这个函数
    image.onload = function() {
    	//创建canvas
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //将图片格式转为base64
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = '图片'+ Date.now(); // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
    };
    image.src = imgsrc + '?time=' + Date.now();  //注意，这里是灵魂，否则依旧会产生跨域问题

}

五、fetch和blob对象下载

function downloadIamge(imgSrc) {
    let imgUrl = imgSrc;// 图片链接
    let a = document.createElement('a');
    let now =Date.now();
    // console.log(now);
    // 这里是将url转成blob地址，
    fetch(imgUrl,{
        mode:'cors'
    })  // 跨域时会报错
        .then(res => res.blob())
        .then(blob => { // 将链接地址字符内容转变成blob地址
            a.href = URL.createObjectURL(blob);
            a.download ='名字'+ now; // 下载文件的名字
            document.body.appendChild(a);
            a.click();
            //在资源下载完成后 清除 占用的缓存资源
            window.URL.revokeObjectURL(a.href);
            document.body.removeChild(a);
        })
}

六、xhr对象和blob下载

//运行时调用downfile2函数就行第一个参数是下载的地址，第二个是文件名
function downfile2(url, name2) {
            let filename2 = url;
            let fileUrl = `/down?url=${filename2}`;
            let houzhui = getExtension(filename2);
            //获取下载文件的后缀
            function getExtension(name) {
                return name.substring(name.lastIndexOf("."))
            }
            this.getBlob(fileUrl).then(blob => {
                // saveas(fig,filename) 将 fig 指定的图窗或 Simulink 模块图保存到 filename 文件中。将文件名指定为字符向量或字符串，包括文件扩展名，例如 'myplot.jpg'。文件扩展名用于定义文件格式
                this.saveAs(blob, `${name2}${houzhui}`);
            })
        }
        // 第一步，要先通过当前url 取得 blob 对象（必须）
        function getBlob(url) {
            return new Promise(resolve => {
                // axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装
                const xhr = new XMLHttpRequest()
                /*  调用 open 并不会真正发送请求，而只是做好发送请求的准备工作*/
                xhr.open('GET', url, true)
                xhr.responseType = 'blob'
                // 监听 load 事件,发送完如果成功将得到的对象传给saveAs
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        resolve(xhr.response)// 转为blob 请求类型类型
                    }
                }
                //调用 send() 正式发送请求
                xhr.send()
            })
        }
        function saveAs(blob, filename) {
            var link = document.createElement('a')// 创建a标签
            link.href = window.URL.createObjectURL(blob)// 获取blob 下载url
            link.download = filename//自定义文件名
            link.click();// 点击下载
        }

总结

          这些就是一些下载文件的方法，不过a标签和form表单在实践中不能下载多个文件，比如form表单下载时发送两个请求，之后发现只发送了一个请求，具体原因现在还不太确定，等研究一下在分享，或者那位大佬评论一下，大家互相学习。