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

Question

我的系统上保存了一个 .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)
  })

这是我在前端接收到的流: stream on the frontend

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

这是实际下载的内容:

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

Answer 1

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

我做了一些研究并找到了一个如何让它与 jQuery 一起工作的例子:

http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

您需要包含博文中的 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);
        });

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

https://github.com/ashleydavis/pdf-server-example

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

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

我还应注意，最好使用 HTTP GET 而不是 HTTP POST 来执行此类操作。如果这样做，您可以将浏览器下载代码简化为以下代码:

        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);