Question

我正在使用带有puppeteer的把手来生成pdf服务器端并将其存储到我的数据库中。一切正常，但我似乎无法获取存储在资产目录中的图像以通过img标签加载。

我的index.js中有一个名为img_picker的帮助程序，它使用图像的名称并应返回图像的路径。下面是我的pdfGenerator函数，该函数接收template.hbs文件并使用puppeteer生成pdf。

    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文件中，我试图像楔子.name这样使用它，它是一个字符串，其中包含要在数据中迭代的图像的名称。

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

我已经看到了要求使用app.use（express.static（））的示例，但是不确定我将如何使用它，因为我不对将要在我的图像中使用的图像进行硬编码模板。

package.json

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

  }

Answer 1

您能为我们提供一个孤立的例子吗？

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

Answer 2

需要比较page.goto和page.setContent。尝试使用 page.goto 加载远程内容或将page.setContent和image编码为base64。 post更加清晰。

await  page.goto(`data: text/html ,${content}`, {waitUntil:'networkidle0'});

车把表示加载动态图像

2 个答案: