后台写了一个导出excel的接口,前端jsp怎么实现点击按钮后弹出另存为对话框,然后把保存的地址传到后端
方法一:可以在后端生成一个excel文件,然后使用JS将其下载,如下:
//生成excel文件
var blob = new Blob([data], { type: 'application/vnd.ms-excel' });
var wb_url = URL.createObjectURL(blob);
// 下载该文件
var link = document.createElement('a');
link.download = 'data.xls';
link.href = wb_url;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
方法二:前端点击按钮之后,可以通过ajax请求文件地址,后台返回一个文件的访问地址,在前端使用window.location.href去访问文件,可以实现弹出保存文件的对话框,如下:
// 定义ajax请求
$.ajax({
url: 'exportExcel',
dataType:'json',
success: function(result){
// 访问下载文件
window.location.href = result.data;
}
});
码字不易,如有帮到 还望点个采纳
要实现点击按钮后弹出另存为对话框,可以通过在前端使用 JavaScript 的 FileSaver.js 库来实现。这个库可以将 Blob 对象保存到本地文件中。
首先,需要在 JSP 页面中引入 FileSaver.js 库。可以通过以下方式在 head 中引入:
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
接下来,在 JSP 页面中定义一个按钮,当用户点击该按钮时,触发导出 Excel 的操作。可以通过以下方式实现:
<body>
<button onclick="exportExcel()">导出 Excel</button>
<script>
function exportExcel() {
// 发送导出 Excel 的请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'exportExcel.jsp');
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
// 获取返回的 Blob 对象
const blob = new Blob([xhr.response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 弹出另存为对话框
saveAs(blob, 'export.xlsx');
}
};
xhr.send();
}
</script>
</body>
在上面的代码中,当用户点击“导出 Excel”按钮时,会发送一个 GET 请求到后端的 exportExcel.jsp 接口。该接口需要返回一个 Blob 对象,表示要导出的 Excel 文件内容。在前端接收到 Blob 对象后,通过调用 saveAs 函数将其保存到本地文件中。
在调用 saveAs 函数时,需要传入两个参数:要保存的 Blob 对象,以及保存的文件名。在上面的例子中,保存的文件名为“export.xlsx”。用户在弹出的另存为对话框中选择保存的位置后,浏览器会将文件保存到该位置,并将该位置的路径传递给后端。
以下答案引用自GPT-3大模型,请合理使用:
<script>
$(function(){
$("#save").click(function(){
var formdata = new FormData();
formdata.append("userId","123456");
$.ajax({
type:"post",
url:"xxx/xxx/exportExcel.do",
contentType:"application/x-www-form-urlencoded",
data:formdata,
dataType:"json",
success:function(data){
console.log(data);
// 使用a标签的download属性实现另存为功能,具体代码如下
var downLink = document.createElement("a");
downLink.download = "exceltest";
downLink.href = data.data;
document.body.appendChild(downLink);
downLink.click();
document.body.removeChild(downLink);
}
});
});
});
</script>
如果我的回答解决了您的问题,请采纳我的回答
不知道你这个问题是否已经解决, 如果还没有解决的话:我这边是通过poi插件进行的转换
<!-- https://mvnrepository.com/artifact/org.apache.poi/poi -->
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>3.15</version>
</dependency>