Question

我有一个项目，我在其中建立带有把手的html，并使用puppeteer将其转换为pdf。我遇到的问题是，渲染pdf后，我的base64编码图像无法显示图像。为了获得更多上下文，我们将pdf生成后将pdf存储在数据库中，并将图像保存在本地资产目录中。我可以将图像加载到codeandbox中，但是其中不包括伪造者，因此我认为这就是问题所在。

// takes the handlebars template and compiles it
const compile = async (templateName, data) => {
  const filePath = path.join(__dirname, "templates", `${templateName}.hbs`);
  if (!filePath) {
    throw new Error(`Could not find ${templateName}.hbs in generatePDF`);
  }
  const html = await fs.readFile(filePath, "utf-8");
  return hbs.compile(html)(data);
};

// use puppeteer to take in compiled hbs doc and create a pdf
const generatePDF = async (fileName, data) => {
  const preparedData = prepareDataForPDF(data);
  const browser = await puppeteer.launch({
    args: ["--no-sandbox"],
    headless: true,
  });
  const page = await browser.newPage();
  const content = await compile(fileName, preparedData);
  await page.goto(`data: text/html;charset=UTF-8, ${content}`, {
    waitUntil: "networkidle0",
  });
  await page.setContent(content);
  await page.emulateMedia("screen");
  await page.waitFor(100);

  const pdf = await page.pdf({
    format: "A4",
    printBackground: true,
  });
  browser.close();
  return pdf;
};

// the helper to convert my image to base64
hbs.registerHelper("getIntro", async (context, idx) => {
  let bitmap = await fs.readFile(
    path.join(__dirname, "assets", `${context}_intro_${idx}.png`),
  );
  const buff = await Buffer(bitmap).toString("base64");

  let imgSrcString = `data:image/png;base64,${buff}`;
  console.log(imgSrcString);
  return imgSrcString;
});

<!-- for context "this" is just an index number as this gets iterated over for multiple images -->
<img src="{{getIntro "Leadership" this}}">

Answer 1

我并不是将其标记为答案，而只是作为解决该问题的替代方法。我有一个React FE，我的应用程序位于一个联合仓库中，该仓库已联合部署到Heroku。因此，我决定将图像放置在我的客户/公共目录中，然后在我的车把代码中，引用它的URL和文件名。这让我以更易于管理的方式托管自己的图像，而不必强迫客户使用诸如s3存储桶之类的其他工具。该解决方案并不理想，但目前可以使用。

使用base64的车把+操纵er显示本地png图像

1 个答案: