руль express загрузка динами c изображения - PullRequest
Новая
       14

руль express загрузка динами c изображения

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

Я использую руль с puppeteer для генерации pdf-сервера и сохранения его в моей БД. Это все работает, но я не могу получить изображения, которые я сохранил в каталоге assets, чтобы загрузить через мой тег img.

У меня есть помощник в моем индексе. js с именем img_picker, который принимает в названии изображения и должен возвращать путь к изображению. ниже моя функция pdfGenerator, которая берет файл template.hbs и генерирует pdf с puppeteer. 

    const puppeteer = require("puppeteer");
const hbs = require("handlebars");
const fs = require("fs-extra");
const path = require("path");

// compiles the handlebars docs
const compile = async (templateName, data) => {
  const filePath = path.join(
    process.cwd(),
    `${templateName}.hbs`
  );
  }
  const html = await fs.readFile(filePath, "utf-8");
  return hbs.compile(html)(data);
};

hbs.registerHelper('img_picker', context => {
  console.log('IMAGE PATH: ', path.join(__dirname, 'server', 'reports', 'assets', `${context}@3x.png`))
  return path.join(__dirname, 'server', 'reports', 'assets', `${context}@3x.png`)
})

// use puppeteer to take in compiled hbs doc and create a pdf
// remember to set the contentType to application/pdf when sending response to client
const generatePDF = async (fileName, data) => {
  const browser = await puppeteer.launch({ args: ["--no-sandbox"], headless: true });
  const page = await browser.newPage();
  const content = await compile(fileName, data);
  await page.setContent(content);
  await page.emulateMedia("screen");
  const pdf = await page.pdf({
    format: "A4",
    printBackground: true
  });
  return pdf;
};

// запускает функцию генератора generatePDF ('template', {wedge: "Delivery"});

В своем файле hbs я пытаюсь использовать его следующим образом: wedge.name - это строка с именем изображения, которое я перебираю в данных. 

<!DOCTYPE html>
     <html>
          <head>
          </head>
               <body>
                    <img src="{{{img_picker wedge.name}}}" style="width: 70px;height:70px" />
               </body>
     </html>

I ' мы видели примеры, призывающие использовать app.use (express .stati c ()), но не уверены, как бы я использовал его таким образом, так как я не сильно кодирую изображение, которое буду использовать в моем шаблон.

пакет. json

"main": "index.js",
"dependencies": {
    "express": "^4.17.1",
    "fs-extra": "^8.1.0",
    "handlebars": "^4.7.3",
"puppeteer": "^2.1.1",

  }

Ответы [ 2 ]

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

Необходимо сравнить page.goto и page.setContent. Попробуйте использовать page.goto для загрузки удаленного контента или используйте page.setContent с изображением, закодированным в base64. Более ясно в этом сообщение . 

await  page.goto(`data: text/html ,${content}`, {waitUntil:'networkidle0'});
0 голосов
/ 02 марта 2020

Можете ли вы привести нам такой отдельный пример? 

const Handlebars = require("handlebars");
const path = require("path");

Handlebars.registerHelper('img_picker', context => {
    return path.join(process.cwd(), 'server', 'reports', 'assets', `${context}@3x.png`)
});

const template = Handlebars.compile('<img src="{{{img_picker wedge.name}}}" style="width: 70px;height:70px" />');
console.log(template({ wedge: {name: "hello"} }));

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "handlebars": "^4.7.3"
  }
}

$ node app.js
<img src="/path/to/project/node-test/server/reports/assets/hello@3x.png" style="width: 70px;height:70px" />
...