如何使用 wkhtmltoimage 在 Next.js API 中发送管道响应？

Question

我是 Next.js 的新手，我正在尝试使用 wkhtmltoimage，但我似乎无法在我的 Next.js 中发送生成的图像流作为响应API.

const fs = require('fs')
const wkhtmltoimage = require('wkhtmltoimage').setCommand(__dirname + '/bin/wkhtmltoimage');


export default async function handler(req, res) {
  try {
    await wkhtmltoimage.generate('<h1>Hello world</h1>').pipe(res);
    
    res.status(200).send(res)
  } catch (err) {
    res.status(500).send({ error: 'failed to fetch data' })
  }
}

我知道我在这里做错了很多事情，谁能指出我正确的方向？

Answer 1

由于您将 __dirname 和 /bin/wkhtmltoimage 连接在一起，这意味着您已经将 the wkhtmltoimage executable 安装到 ./pages/api/bin 这可能不是一个好主意，因为pages 目录对于 Next.js 是特殊的。

我们假设您已将可执行文件安装在 filesystem/server 的不同位置（例如，您的主目录）。看起来 pipe 函数已经发送了响应，因此 res.status(200).send(res) 行会导致问题，可以将其删除。所以以下应该有效：

// ./pages/api/hello.js
const homedir = require("os").homedir();

// Assumes the following installation path:
//   - *nix:     $HOME/bin/wkhtmltoimage
//   - Windows:  $env:USERPROFILE\bin\wkhtmltoimage.exe
const wkhtmltoimage = require("wkhtmltoimage").setCommand(
  homedir + "/bin/wkhtmltoimage"
);

export default async function handler(req, res) {
  try {
    res.status(200);
    await wkhtmltoimage.generate("<h1>Hello world</h1>").pipe(res);
  } catch (err) {
    res.status(500).send({ error: "failed to fetch data" });
  }
}

如何使用 wkhtmltoimage 在 Next.js API 中发送管道响应？

How to send piped response in Next.js API using wkhtmltoimage?

javascript

next.js

wkhtmltoimage