javascript - 如何使用 jsreport 和 jsreport Chrome Pdf 渲染 1k pdf 文件?

标签 javascript node.js pdf puppeteer jsreport

我正在尝试使用 Express.js 和端点生成 1k 报告,我在 JSON 中传递一个数组,API 遍历它并在 forEach 循环中,然后每个对象都用于 抓取一个门户网站,获取响应,并创建一个 PDF 文件...

这种方法伪工作,但我很确定存在一些并发问题...因为,如果我在 JSON 数组中传递 2 个项目,API 可以毫无问题地创建 2 个 PDF 文件,但如果我通过300 API 随机创建 50... 或 60 或 120。

这是我的jsreport配置

const jsReportConfig = {
  extensions: {
    "chrome-pdf": {
      launchOptions: {
        timeout: 10000,
        args: ['--no-sandbox', '--disable-setuid-sandbox'],
      },
    },
  },
  tempDirectory: path.resolve(__dirname, './../../temporal/pdfs'),
  templatingEngines: {
    numberOfWorkers: 4,
    timeout: 180000,
    strategy: 'http-server',
  },
};

我这样设置 jsreport 实例

jsreport.use(jsReportChrome());
jsreport.use(jsReportHandlebars());
jsreport.init()

这就是我呈现报告的方式,checkInvoiceStatus 函数用作 HTTP 调用,返回注入(inject) Handlebars 模板的 HTML 响应。

const renderReports = (reporter, invoices) => new Promise(async (resolve, reject) => {
    try {
      const templateContent = await readFile(
        path.resolve(__dirname, './../templates/hello-world.hbs'),
        'utf-8',
      );
      invoices.forEach(async (invoice) => {
        try {
          const response = await checkInvoiceStatus(invoice.re, invoice.rr, invoice.id)
          const $ = await cheerio.load(response);
          const reporterResponse = await reporter.render({
            template: {
              content: templateContent,
              engine: 'handlebars',
              recipe: 'chrome-pdf',
              name: 'PDF Validation',
              chrome: {
                displayHeaderFooter: true,
                footerTemplate: '<table width=\'100%\' style="font-size: 12px;"><tr><td width=\'33.33%\'>{#pageNum} de {#numPages}</td><td width=\'33.33%\' align=\'center\'></td><td width=\'33.33%\' align=\'right\'></td></tr></table>',
              },
            },
            data: {
              taxpayerId: 'CAC070508MY2',
              captcha: $('#ctl00_MainContent_ImgCaptcha').attr('src'),
              bodyContent: $('#ctl00_MainContent_PnlResultados').html(),
            },
          });
          reporterResponse.result.pipe(fs.createWriteStream(`./temporal/validatedPdfs/${invoice.id}.pdf`));
        } catch (err) {
          console.error(err);
          reject(new Error(JSON.stringify({
            code: 'PORTAL-PDFx001',
            message: 'The server could not retrieve the PDF from the portal',
          })));
        }
      });
      resolve();
    } catch (err) {
      console.error(err);
      reject(new Error(JSON.stringify({
        code: 'PORTAL-PDFx001',
        message: 'The server could not retrieve the PDF from the portal',
      })));
    }
  });

不知道为什么,这个函数在500ms后终止,但是文件是在1分钟后创建的...

app.post('/pdf-report', async (req, res, next) => {
  const { invoices } = req.body;
  repository.renderReports(reporter, invoices)
    .then(() => res.status(200).send('Ok'))
    .catch((err) => {
      res.status(500).send(err);
    });
});

更新

除了@hurricane 提供的代码外,我还必须将 jsReport 配置更改为此

const jsReportConfig = {
  chrome: {
    timeout: 180000,
    strategy: 'chrome-pool',
    numberOfWorkers: 4
  },
  extensions: {
    'chrome-pdf': {
      launchOptions: {
        timeout: 180000,
        args: ['--no-sandbox', '--disable-setuid-sandbox'],
        ignoreDefaultArgs: ['--disable-extensions'],
      },
    },
  },
  tempDirectory: path.resolve(__dirname, './../../temporal/pdfs'),
  templatingEngines: {
    numberOfWorkers: 4,
    timeout: 180000,
    strategy: 'http-server',
  },
};

最佳答案

我认为在您的结构中,使用 writeFileSync 函数而不是使用 writeStream 可以轻松解决您的问题。但这并不意味着它是最好的方法。因为您必须等待每个渲染和每个写入文件进程启动另一个。所以我建议使用 Promise.all,这样你就可以同时运行你的长进程。这意味着您将只等待最长的过程。

快速取胜 - 缓慢的过程

reporterResponse.result.pipe 

将此行更改为

   fs.createFileSync(`./temporal/validatedPdfs/${invoice.id}.pdf`);

更好的方法 - 快速的过程

const renderReports = (reporter, invoices) => new Promise(async (resolve, reject) => {
  try {
    const templateContent = await readFile(
      path.resolve(__dirname, './../templates/hello-world.hbs'),
      'utf-8',
    );
    const renderPromises = invoices.map((invoice) => {
      const response = await checkInvoiceStatus(invoice.re, invoice.rr, invoice.id)
      const $ = await cheerio.load(response);
      return await reporter.render({
        template: {
          content: templateContent,
          engine: 'handlebars',
          recipe: 'chrome-pdf',
          name: 'PDF Validation',
          chrome: {
            displayHeaderFooter: true,
            footerTemplate: '<table width=\'100%\' style="font-size: 12px;"><tr><td width=\'33.33%\'>{#pageNum} de {#numPages}</td><td width=\'33.33%\' align=\'center\'></td><td width=\'33.33%\' align=\'right\'></td></tr></table>',
          },
        },
        data: {
          taxpayerId: 'CAC070508MY2',
          captcha: $('#ctl00_MainContent_ImgCaptcha').attr('src'),
          bodyContent: $('#ctl00_MainContent_PnlResultados').html(),
        },
      });
    });
    const renderResults = await Promise.all(renderPromises);
    const filewritePromises = results.map(renderedResult => await fs.writeFile(`./temporal/validatedPdfs/${invoice.id}.pdf`, renderedResult.content));
    const writeResults = await Promise.all(filewritePromises);
    resolve(writeResults);
  } catch (err) {
    console.error(err);
    reject(new Error(JSON.stringify({
      code: 'PORTAL-PDFx001',
      message: 'The server could not retrieve the PDF from the portal',
    })));
  }
});

关于javascript - 如何使用 jsreport 和 jsreport Chrome Pdf 渲染 1k pdf 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55581416/

相关文章:

json - 向 JSON 添加新属性

javascript - 为导入的 CSS 文件添加前缀

pdf - 如何将PDF二进制部分转换为ASCII/ANSI,以便在文本编辑器中查看?

javascript - Typescript 编译的 Javascript 代码无法正常工作(variable.default.function())

Javascript/jQuery 函数类似于 Liquid : cycle

node.js - 如何使用 jest 框架为 cassandra 在 Node.js 中执行查询编写单元测试

objective-c - 在 PDF : Tm or Td/TD? 中查找文本

javascript - 如何在 react.js 中允许 CORS?

javascript - Json数据中某个字段的最大数字

java - 使用带有android的IText创建PDF时获取IOException