通过 JQuery AJAX 调用保存文件

Question

我正在使用 JQuery 向节点服务器发送 AJAX 请求（使用 Hapi）。服务器正确响应 PDF 文件，但我试图在本地保存文件。要注意的是，如果 POST 发送了正确的数据，PDF 应该只 return。换句话说，它是 "protected"，我不想公开它。

前端代码：

$.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？

Answer 1

您可以通过 html5 使用

实现

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

请注意，这仅适用于 same-origin URL，或 blob: 和 data: 方案。这会被来自服务器的 Content-Disposition header 覆盖。

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

    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)

无论如何，这只是一个有用的方法，如果你想 create/modify 从客户端下载数据，但如果你是从服务器端获取它，那么它更好只是为了打开一个新的 url，让浏览器处理它。

通过 JQuery AJAX 调用保存文件

Save File through JQuery AJAX Call

javascript

ajax

jquery

node.js

hapijs