美文网首页
vue axios post 下载excel文件

vue axios post 下载excel文件

作者: who_are_you_ | 来源:发表于2020-03-25 20:08 被阅读0次

    废话不说,实测有用。

    直接这样写的话不需要注意什么。还有一种方法,以后补上,这里的步骤一步也不能少。

    method: {
    // 请求事件
        Ev(){
            let options = {uid: this.value};
                return new Promise((resolve, reject) => {
                    console.log(JSON.stringify(options));
                    axios.defaults.headers['content-type'] = 'application/vnd.ms-excel;charset=UTF-8';
                    axios({
                        method: 'get',
                        url: 'http://10.com', // 请求地址
                        params: options, // 参数
                        responseType: 'blob' // 表明返回服务器返回的数据类型
                    }).then(
                        response => {
                            resolve(response.data);
                            console.log(response.data);
                            console.log(response);
                            let blob = new Blob([response.data], {
                                type: 'application/vnd.ms-excel'
                            });
                            console.log(blob);
                          // 获取后台返回到headers中的filename
                            let temp = response.headers['content-disposition'].split(';')[1].split('filename=')[1];
                            console.log(temp);
                            let fileName = temp;
                          // 解决兼容问题
                            if (window.navigator.msSaveOrOpenBlob) {
                                console.log(2);
                                navigator.msSaveBlob(blob, fileName);
                            } else {
                                console.log(3);
                                let link = document.createElement('a');
                                // 我用的这个时间段URL.createObjectURL()已经不能用了,这里需要解决一下兼容问题
                                link.href = this.createObjectURL(blob);
                                console.log(this.createObjectURL(blob));
                                link.download = fileName;
                                link.click();
                                // 释放内存
                                // this.revokeObjectURL(link.href);
                            }
                        },
                        err => {
                            reject(err);
                        }
                    );
                });
        },
    createObjectURL(object) {
                return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
            }
    
    

    相关文章

      网友评论

          本文标题:vue axios post 下载excel文件

          本文链接:https://www.haomeiwen.com/subject/lmoxuhtx.html