zoukankan      html  css  js  c++  java
  • vue使用post导出文件

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

    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);
                })
            }
  • 相关阅读:
    过往总结
    查找光标处的标识符
    【转】Linux 内核开发 Eclipse内核开发环境搭建
    【转】Writing linux kernel code in Eclipse
    【转】 Linux内核升级指南
    [转]Ubuntu 11.04 安装后要做的20件事情
    【转】vim 替换操作大全
    【转】移动硬盘安装ubuntu
    重置 Winsock 目录
    【转】让Firefox像vim一样操作
  • 原文地址:https://www.cnblogs.com/theblogs/p/13470460.html
Copyright © 2011-2022 走看看