Javascript 如何将PDF文件发送到前端？

我的系统中保存了一个.PDF文件，我正在尝试使用node/express将该文件发送到前端

我正在将文件作为流（二进制字符串）发送到前端，但是在前端运行一些代码以将.PDF下载到用户计算机上时，.PDF文件显示为空白

以下是我在服务器上的路由：

app.post('/someroute', (req, res) => {
  let pdfPath = './somepath/where/the/pdf/is'
  // if the file does not exist
  if (!fs.existsSync(pdfPath)) {
    console.log(`The PDF does NOT exist @ ${pdfPath}`)
    return res.json({ success: false });
  }

  res.download(pdfPath, (err) => {
    if (err) {
      console.log('there was error in res.downoad!', err)
    } else {
      fs.unlink(pdfPath, (err) => {
        if (err) {
          console.log('there was error in unlinking the pdf file!', err)
        } else {
          console.log('success!')
        }
      })
    }
  })
})

以下是前端的代码：

$.post("/someroute", function(data) {
    console.log('creating PDF...', data)

    var downloadLink = document.createElement('a')
    downloadLink.target = '_blank'
    downloadLink.download = 'new_pdf_haha.pdf'
    var blob = new Blob([data], { type: 'application/pdf' })
    var URL = window.URL || window.webkitURL
    var downloadUrl = URL.createObjectURL(blob)
    // set object URL as the anchor's href
    downloadLink.href = downloadUrl
    // append the anchor to document body
    document.body.append(downloadLink)
    // fire a click event on the anchor
    downloadLink.click()
    // cleanup: remove element and revoke object URL
    document.body.removeChild(downloadLink)
    URL.revokeObjectURL(downloadUrl)
  })

这是我在前端接收到的流：

这是我希望在前端下载的PDF：

$.post("/someroute", function(data) {
    console.log('creating PDF...', data)

    var downloadLink = document.createElement('a')
    downloadLink.target = '_blank'
    downloadLink.download = 'new_pdf_haha.pdf'
    var blob = new Blob([data], { type: 'application/pdf' })
    var URL = window.URL || window.webkitURL
    var downloadUrl = URL.createObjectURL(blob)
    // set object URL as the anchor's href
    downloadLink.href = downloadUrl
    // append the anchor to document body
    document.body.append(downloadLink)
    // fire a click event on the anchor
    downloadLink.click()
    // cleanup: remove element and revoke object URL
    document.body.removeChild(downloadLink)
    URL.revokeObjectURL(downloadUrl)
  })

以下是实际下载的内容：

---

如果有人能提供任何见解或帮助，我们将不胜感激，谢谢

我认为这对您不起作用的主要原因是jQuery不支持“blob”数据类型

我做了一些研究，发现了一个如何使用jQuery的示例：

您需要从博客文章中包含jQuery插件，然后将$.post调用转换为$.ajax调用（使用方法post），并指定传输数据类型为“二进制”（以加载插件）

包含插件后，将代码更改为如下所示：

    $.ajax({
            method: "POST",
            url: "/someroute",
            dataType: 'binary' // USE THE PLUGIN
        })
        .then(function (data) {
            console.log("Got the PDF file!");

            // Do with the PDF data as you please.

            var downloadLink = document.createElement('a')
            downloadLink.target = '_blank'
            downloadLink.download = 'new_pdf_haha.pdf'
            var blob = new Blob([data], { type: 'application/pdf' })
            var URL = window.URL || window.webkitURL
            var downloadUrl = URL.createObjectURL(blob)
            downloadLink.href = downloadUrl
            document.body.append(downloadLink) // THIS LINE ISN'T NECESSARY
            downloadLink.click()
            document.body.removeChild(downloadLink);  // THIS LINE ISN'T NECESSARY
            URL.revokeObjectURL(downloadUrl);
        })
        .catch(function (err) {
            console.error("An error occurred.");
            console.error(err);
        });

这里有一个完整的工作示例：

请注意，我的服务器设置与您的不同，这可能是您的问题，也可能不是。我已经包括了流式和非流式PDF文件下载的示例代码，以便进行比较-默认情况下使用流式，因为我认为这是您想要的

还请注意，似乎没有必要将合成链接添加到文档中，我已将这些行标记为不必要

我还应该注意到，最好使用HTTPGET而不是HTTPPOST来完成这类工作。如果这样做，您可以将浏览器下载代码简化为以下代码：

        var downloadLink = document.createElement('a');
        downloadLink.target = '_blank';
        downloadLink.download = 'new_pdf_haha.pdf';
        downloadLink.href = "someroute";
        document.body.append(downloadLink)
        downloadLink.click()
        document.body.removeChild(downloadLink);

---

不客气。别忘了给我上一票：）不幸的是，我的声望（sadface）不到15，所以我不能上/下一票。当我有了代表后，我一定会回到这篇文章并投票表决。干杯！我忘了他们有那个限制。