jsp怎么实现弹出另存为

后台写了一个导出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>

如果我的回答解决了您的问题,请采纳我的回答

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/735688
  • 我还给你找了一篇非常好的博客,你可以看看是否有帮助,链接:JSP异常处理
  • 除此之外, 这篇博客: 在jsp页面通过一个按钮将数据库中的数据导出为excel文件中的 1.先安装poi插件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    我这边是通过poi插件进行的转换

    <!-- https://mvnrepository.com/artifact/org.apache.poi/poi -->
    <dependency>
      <groupId>org.apache.poi</groupId>
      <artifactId>poi</artifactId>
      <version>3.15</version>
    </dependency>

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^