VUE框架之前端下载文件固定写法

                                                                        VUE框架之前端下载文件固定写法

                                                                                                                  写于2020年8月18日   苏州宜家餐厅

downloadClick(row){

                //下载合同 发送axios请求，响应数据为url地址

                contractDownload({id:row.id}).then(res=>{

                    let {code,data} = res.data; //获取响应的url地址数据

                    this.downloadFile("http://139.196.42.209:5004"+data.url);

                })

                .catch(error=>{

                })

            },

//获取到下载地址通过原生请求获取到后端传入的字节流

            downloadFile(url){

            var xhr = new XMLHttpRequest();

            xhr.open('get',url);

            xhr.responseType="blob"; //字节流

            xhr.setRequestHeader('token',getToken());

            xhr.onload = ()=>{

                if(xhr.status==200){

                console.log(xhr.response);

                var filename = xhr.responseURL.substring(xhr.responseURL.lastIndexOf("/")+1);

                this.saveAs(filename,xhr.response)

                }

            };

            xhr.send();

            },

//模拟<a>标签下载

            saveAs(name, data) {

                var urlObject = window.URL;  //window对象的URL对象是专门用来将blob或者file读取成一个url的。

                var export_blob = new Blob([data]); //代表二进制类型的大对象,就是Blob对象是二进制数据

                // <a href="12345.jpg" download="名称" >

                var save_link = document.createElement('a');//创建a标签

                save_link.href = urlObject.createObjectURL(export_blob); //通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL

                //download是 HTML5 中<a>标签新增的一个属性，此属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其保存为本地文件

                save_link.download = name;

                save_link.click();//触发a标签单击

            },