前端页面导出excel文件功能(导出)
前端导出excel表格
·
方法一:
一、后台管理系统中常有导出excel功能,可定义一个函数,在其他.vue文件中导入即可用。
1.1定义函数
export function excelDown(res, name = "模版文件.xlsx", type) {
var typ =
type || "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
var blob = new Blob([res], { type: typ });
var downloadElement = document.createElement("a"); //创建a标签
var href = window.URL.createObjectURL(blob);
downloadElement.href = href;
downloadElement.download = name; //导出时的文件名 例:商品包管理.xlsx
document.body.appendChild(downloadElement);
downloadElement.click(); //触发点击事件
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
}
1.2 定义接口函数
export const get_content_export = p =>
get(server + "/content-info/export" ,p,{responseType:'blob'})
//此处的get为已封装好的get请求函数 //请求要带上 {responseType:'blob'}
二、引入
import { excelDown } from "@/util/utils"; //从excelDown函数文件路径引入
import { get_content_export } from "@/server/api/server" //导入接口
三、使用
3.1 无导出限制条件时
//导出
handleExportFile(){
let params = {****} //请求参数
get_content_export(params).then(res=>{
this.$message.success("导出成功")
excelDown(res,"媒资管理.xlsx") // 传入文件流(res),文件名即可
}).catch(err=>{
this.$message.error(err)
console.log(err);
})
}
3.2 有导出限制条件时(需要借助 FileReader对象读取导出失败时返回的信息)
//导出(假设:导出的数据超过1w条时前端页面提示最多导出1w条数据,少于1w条正常导出)
handleExportFile(params).then(res=>{
let that = this
//导出数据超过1w条
if (res.data.type === 'application/json'){
const reader = new FileReader() // 读取文件内容
reader.onload = function (event) { //文件读取成功触发
const message = JSON.parse(reader.result) //返回文件内容
that.$message.error(message.msg)
/*console.log(reader.result); '{"code":"400","msg":"一次导出媒资记录最大为1w
条!","success":false}' */
}
reader.readAsText(res.data) //将文件读取为文本
}else{ //少于等于1w条,正常导出
excelDown(res.data,'媒资管理.xlsx')
}
}).catch(err=>{
this.$message.error(err)
})
方法二:使用window.location.href
handleExportFile(){
try{
window.location.href = `服务名/接口?params1=${}¶ms2=${}¶ms3=${}` //参数拼接
}catch(err){
this.$message.error(err)
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)