时间戳

首页 > 解决方案 > PDF Blob - Window.open 不显示内容

javascript - PDF Blob - Window.open 不显示内容

问题描述

我正在尝试在前端显示来自后端的 pdf 文件，但新窗口仅显示 PDF 控件。有人可以评估我的代码并指出我做错了什么吗？

后端代码：

@RequestMapping(value = "/capaRdv/{idRdv}", method = RequestMethod.POST)
    public void relatorioCapaRdv(@PathVariable Integer idRdv, HttpServletResponse response) throws JRException, SQLException, IOException {
        Map<String, Object> parameters = new HashMap<String, Object>();
        parameters.put("idRdv", idRdv);
        InputStream jasperStream = this.getClass().getResourceAsStream("/reports/capaRdv.jasper");
        JasperReport jasperReport = (JasperReport) JRLoader.loadObject(jasperStream);
        JasperPrint jasperPrint = JasperFillManager.fillReport(jasperReport, parameters, dataSource.getConnection());
        response.setContentType("application/pdf");
        response.setHeader("Content-Disposition", "inline; filename=capaRdv" + idRdv + ".pdf");
        final OutputStream outStream = response.getOutputStream();
        JasperExportManager.exportReportToPdfStream(jasperPrint, outStream);
    }

前端代码：

emiteRelatorio(idRdv) {
  const url = `${baseApiUrl}/relatorios/capaRdv/${idRdv}`;
  axios
    .post(url, { responseType: "blob" })
    .then(res => {
      const file = new Blob([res.data], { type: "application/pdf" });
      const fileURL = URL.createObjectURL(file);
      window.open(fileURL);
    })
    .catch(error => {
      Swal.fire({
        text: error.response.data.error,
        type: "error",
        confirmButtonClass: "md-button md-danger btn-fill",
        buttonsStyling: false
      });
    });
}

https://imgur.com/KbfSRJ3

https://imgur.com/jP2ZJx5

标签： javascriptvue.jsvuejs2

解决方案

通过将 POST 方法更改为 GET 解决：

method = RequestMethod.GET

axios.get

推荐阅读