如何从 api-endpoint 在浏览器中显示使用 express/pdfkit 生成的 PDF答案

【问题标题】：How to display a PDF generated with express/pdfkit in browser from api-endpoint如何从 api-endpoint 在浏览器中显示使用 express/pdfkit 生成的 PDF
【发布时间】：2021-02-12 11:18:00
【问题描述】：

我使用 express 和 pdfkit 生成一个 pdf，例如：

router.get("/create_pdf", (req, res) => {
  var foo = req.body.foo;
  var bar = req.body.bar;

  // query Postgres with foo and bar to get some custom values
  
  //create pdf
  const doc = new PDFDocument();
  doc.pipe(res);
  doc.fontSize(25).text("Just a header", 100, 80);

  // build some more stuff depending of Postgres query

  doc.end();
})

我使用 vue 的前端收到响应

print: function() {
  data = {foo: "foo", bar: "bar"};

  this.axios({
    method: "get",
    url: "get_recipe_as_pdf",
    data: data,
  })
    .then((response) => {
      console.log(response);
      window.open(response.data);
    })
    .catch(() => {
      //some error
    });
},

控制台显示data: "%PDF-1.3↵%��↵7 0 obj↵<...

window.open(...) 打开一个空白标签。

我发现了类似的问题，但找不到答案。我可能有一些理解问题，所以我很感激提示。谢谢。

【问题讨论】：

标签： express vue.js pdf browser pdfkit

【解决方案1】：

在您的快递应用中：res.setHeader('Content-Type', 'application/pdf');

在您的前端只需“手动”打开链接，就像点击锚点一样：<a href="{url to pdf}" target="_blank">click me</a>

如果您的浏览器支持，pdf 应该在新选项卡中打开，否则将被下载。

编辑：澄清：window.open 需要一个 url 作为第一个参数，而不是 pdf 的内容。

【讨论】：

感谢您的回答。我是否理解正确，我必须将 pdf 保存在某个地方？我的计划是即时创建它。如果我也想通过 ajax 发送一些数据，这种方法不起作用。抱歉，如果问题不够具体。我更新了问题。
不需要保存在服务器端。您可以将其直接通过管道传输到 res 中。
也许再看一下pdfkit文档。如果这个问题 (stackoverflow.com/questions/58090447/…) 是正确的，那么您在服务器端缺少一些东西。您的客户端代码肯定不起作用，您不能向 window.open 方法提供 pdf blob。