Handlebars + puppeteer используя base64 для отображения локального изображения png - PullRequest
Новая
       10

Handlebars + puppeteer используя base64 для отображения локального изображения png

1 голос
/ 26 марта 2020

У меня есть проект, где я создаю html с рулем и преобразовываю его в pdf, используя puppeteer. У меня проблема с тем, что мое изображение в кодировке base64 не отображает изображения после рендеринга PDF. Для дополнительного контекста мы сохраняем pdf в нашей базе данных, как только он сгенерирован, а наши изображения находятся в локальном каталоге ресурсов. Я могу заставить изображения загружаться в коды и коробки, но это не включает кукловода, поэтому я думаю, что это проблема. 

// 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}}">

1 Ответ

0 голосов
/ 28 марта 2020

Я не отмечаю это как ответ, а просто как обходной путь, который я использовал для решения этой проблемы. У меня есть реагирующий FE, и мое приложение находится в моно-репо, которое было совместно развернуто в Heroku. Поэтому я решил поместить изображения в мой каталог client / publi c, а затем в коде моего руля я сослался на его URL и имя файла. Это позволяет мне размещать свои собственные изображения в более удобном для управления виде без необходимости заставлять клиента иметь дело с еще одним инструментом, таким как корзины s3. Это решение не идеальное, но пока работает.

...