vue使用post导出文件

 

 

项目中导出excel文件很常见，分为get和post方式，get相对简单些，在url后面拼接需要的参数

get方式

get请求方式传参如果是对象类型 需要 用encodeURI(JSON.stringify(params)) 转换一下

get请求方式拼接参数长度上限为2083，超过这个长度导出excel失败

 

post方式请求返回的是表格流文件，需要使用blob对象指定要读取的数据，在此记录下

<div class="same-head">
        <el-button type="success" size="mini" @click="hadnleAdd">登记系统信息</el-button>
        <el-button type="primary" size="mini" @click="hadnleImport">导入</el-button>
        <el-button type="primary" size="mini" @click="hadnleExport">导出</el-button>
        <el-button type="primary" size="mini" @click="hadnleDownload">下载模板</el-button>
</div>

exportFile() {
            let that = this;
            this.$http({
                method: 'post',
                url: this.$api.projectInfo.exportExcel,
                data: JSON.stringify(this.exportData),
                responseType: 'blob',//服务器返回的数据类型
            }).then((res) => {
                console.log(res, '响应状态');
                let blob = new Blob([res], {type:"application/force-download"}) // Blob 对象表示一个不可变、原始数据的类文件对象
                console.log(blob);
                let fileReader = new FileReader()   // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
                fileReader.readAsDataURL(blob)
                //开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
                fileReader.onload = (e) => {
                    let a = document.createElement('a')
                    a.download = `项目应用信息台账.xlsx`
                    a.href = e.target.result
                    document.body.appendChild(a)
                    a.click()
                    document.body.removeChild(a)
                }
            }).catch(err => {
                console.log(err);
            })
        }