时间戳

首页 > 解决方案 > 在新的浏览器窗口中打开 thymeleaf 链接

javascript - 在新的浏览器窗口中打开 thymeleaf 链接

问题描述

我知道可以在这里找到很多类似的问题，但没有一个可以帮助我解决我的问题。

客户想要什么：单击一个按钮，然后打开一个带有给定参数的新窗口，并显示一个视图，其中包含从数据库加载的动态数据。

到目前为止我所做的：我有一个带有链接的视图，而不是按钮：

<a th:href="@{/report/reportPrintView(al=false, mlVersion=${report.version}, sv=true, id=${report.orderId})}" target="_blank">Protokoll</a>
<a th:href="@{/report/reportPrintView(al=true, mlVersion=${report.version}, sv=false, id=${report.orderId})}" target="_blank">Airline</a>

和一个由 GET 请求调用的控制器：

@GetMapping("/report/reportPrintView")
public String showReportPrint(@RequestParam("al") boolean al, @RequestParam("mlVersion") String mlVersion, @RequestParam("sv") boolean sv, @RequestParam("id") String id, Model model) {

    ........ do some magic .......

    return "/report/reportPrintView";
}

该视图显示在新的浏览器选项卡中并按预期工作，但如前所述，客户端需要一个新窗口。

为了满足客户的愿望，我尝试了这样的方法：

function openWin(id, mlVersion, al, sv) {
    var url = "/report/reportPrintView.html?al=" + al + "&mlVersion=" + mlVersion + "&sv=" + sv + "&id=" + id;
    ReportPrintPreview = window.open("about:blank", "ReportPrintPreview", "width=666,height=700left=250,top=50,dependent=yes,menubar=no,status=no,resizable=yes,toolbar=no,scrollbars=yes");
    ReportPrintPreview.location.href = url;
    ReportPrintPreview.focus();
    return false;
}
.
.
.
<button th:onclick="'openWin(\'' + ${report.orderId} + '\', \'' + ${report.version} + '\', false, true)'">Protokoll</button>
<button th:onclick="'openWin(\'' + ${report.orderId} + '\', \'' + ${report.version} + '\', true, false)'">Airline</button>

这里发生的情况是打开一个新窗口并显示 404 错误，并且带有按钮的网页显示 400 错误。所以我假设控制器没有收到 GET 请求并且无法显示视图（这是一个合理的结果，因为它不是像 @{/report/....} 这样的 Thymeleaf 调用）。有没有办法让它运行？

标签： javascriptspringspring-mvcthymeleaf

解决方案

这就是我将如何构建它。

JavaScript

function openWin(url) {
    ReportPrintPreview = window.open("about:blank", "ReportPrintPreview", "width=666,height=700left=250,top=50,dependent=yes,menubar=no,status=no,resizable=yes,toolbar=no,scrollbars=yes");
    ReportPrintPreview.location.href = url;
    ReportPrintPreview.focus();
    return false;
}

百里香叶

<button
  th:data-url="@{/report/reportPrintView(al=false, mlVersion=${report.version}, sv=true, id=${report.orderId})}"
  onclick="openWin(this.getAttribute('data-url'))">Protokoll</button>

<button
  th:data-url="@{/report/reportPrintView(al=true, mlVersion=${report.version}, sv=false, id=${report.orderId})}"
  onclick="openWin(this.getAttribute('data-url'))">Airline</button>

推荐阅读