如何使用 wkhtmltoimage 在 Next.js API 中發送管道響應？

Question

我是 Next.js 的新手，我正在嘗試使用wkhtmltoimage ，但我似乎無法發送生成的圖像 stream 作為我的 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連接在一起，這意味着您已經將 wkhtmltoimage 可執行文件安裝到./pages/api/bin這可能不是一個好主意，因為pages目錄對於 Next.js 是特殊的。

我們假設您已將可執行文件安裝在文件系統/服務器上的不同位置（例如，您的主目錄）。 看起來pipe function 已經發送了響應，所以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" });
  }
}