时间戳

首页 > 解决方案 > 通过 JQuery AJAX 调用保存文件

javascript - 通过 JQuery AJAX 调用保存文件

问题描述

我正在使用 JQuery 将 AJAX 请求发送到节点服务器（使用 Hapi）。服务器正确响应 PDF 文件，但我正在尝试将文件保存在本地。问题是，只有在 POST 发送了正确的数据时，PDF 才应该返回。换句话说，它是“受保护的”，我不想公开暴露它。

前端代码：

$.get('http://localhost:3000').done(function (data) {
  console.log(data);
});

后端代码：

server.route({
  method: 'GET',
  path: '/',
  handler: async (request, h) => {
    return h.file('./static/sample.pdf', {
      mode: 'attachment',
      filename: 'sample.pdf'
    })
  }
});

我收到数据，但前端 UI 中没有任何反应。如何下载自动发送的 PDF？

标签： javascriptjquerynode.jsajaxhapijs

解决方案

您可以使用 html5 来实现

<a href="http://link/to/file" download="FileName">Download it!</a>

请注意，这仅适用于同源 URL 或 blob: 和 data: 方案。这会被服务器的 Content-Disposition 标头覆盖。

如果您想以编程方式执行此操作，您可以执行此操作

    const element = document.createElement("a")
    element.setAttribute(
      "href",
      // you could also use base64 encoding here like data:application/pdf;base64,
      "data:text/plain;charset=utf-8," + encodeURIComponent('pdf binary content here') 
    )
    element.setAttribute("download", "file.pdf")

    element.style.display = "none"
    document.body.appendChild(element)

    element.click()

    document.body.removeChild(element)

无论如何，如果您想从客户端创建/修改下载的数据，这只是一种有用的方法，但是如果您从服务器端获取它，那么最好打开一个新的 url，让浏览器处理它.

推荐阅读