时间戳

首页 > 解决方案 > 如何让 Puppeteer 基于 page.$eval 函数在 PDF 中渲染 MathJax？

javascript - 如何让 Puppeteer 基于 page.$eval 函数在 PDF 中渲染 MathJax？

问题描述

我是 Puppeteer 的新手。成功地将整个网站转换为 pdf，但是，理想情况下，我需要将 div 中的 MathJax 方程转换为 pdf。到目前为止，我正在使用以下代码：

// Require puppeteer
const puppeteer = require('puppeteer');

(async () => {

// Create an instance of the chrome browser
// But disable headless mode !

const browser = await puppeteer.launch()

// Create a new page
const page = await browser.newPage()

// Configure the navigation timeout
await page.goto('https://9217531f4f48.ngrok.io/chapter-14/weblesson.php', {
waitUntil: 'load',
// Remove the timeout
timeout: 30000
});

// Navigate to a particular div on the website
const dom = await page.$eval('#doto', (el) => {
return el.innerHTML 
}) // Get DOM HTML
await page.evaluate(async () => {
const script = document.createElement('script');
script.src ='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script';
const promise = new Promise((resolve, reject) => {
script.onload = resolve;
script.onerror = reject;
});
document.head.appendChild(script);
await promise;
});

await page.setContent(dom) 

 await page.pdf({path: 'pdf/pairt.pdf',
             format: 'A4',
             printBackground: true,
             displayHeaderFooter: true,
             headerTemplate: '<div id="header-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="date"></span><span class="title"></span><span class="pageNumber"></span><span class="totalPages"></span></div>',
             
             footerTemplate: '<div id="footer-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="date"></span><span class="title"></span><span class="url"></span><span class="pageNumber"></span><span class="totalPages"></span></div>',
             margin: {
               top: '100px',
               bottom: '200px',
               right: '30px',
               left: '30px',
             },
            });
             
await page.close();
await browser.close()
})()

我得到以下

在此处输入图像描述

Puppeteer 不允许 MathJax 脚本在 page.$eval 上正确转换数学表达式。

预期产出；

在此处输入图像描述

我需要某人的帮助，了解如何将 MathJax 方程呈现为 pdf，如预期输出中所示

标签： javascripthtmlnode.jspuppeteermathjax

解决方案

@Davide Cervone，在添加 await page.waitFor(5000) 行以在创建 pdf 之前等待 MathJax 的完整呈现后，让它与这个调整后的代码一起工作：

"use strict";
// Require puppeteer
const puppeteer = require('puppeteer');

(async () => {

 // Create an instance of the chrome browser but disable headless mode !

 const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']})
 // Create a new page
 const page = await browser.newPage()

 // Configure the navigation timeout
 await page.goto('https://a1e3b598ebba.ngrok.io/chapter-14/lesson.php', {waitUntil: 'load'});


 // Navigate to a particular div on the website
  const dom = await page.$eval('#doto', (el) => {
         return el.innerHTML 
  }) // Get DOM innerHTML

 await page.setContent(dom);  

  var cssb = [];
  cssb.push('<style>');
  cssb.push('h1 { font-size:10px;position:absolute;background-color:#f00; z-index:1000;color:#000; margin-left:30px;}');
  cssb.push('</style>');

  const css = cssb.join('');

  await page.waitFor(5000);

   await page.pdf({path: 'pdf/hn' + Date.now() + '.pdf',
             format: 'A4',
             printBackground: true,
             displayHeaderFooter: true,
             headerTemplate: '<div id="header-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="date"></span>',
             
             footerTemplate: css + '<h1>Page <span class="pageNumber"></span> of <span class="totalPages"></span></h1>',

             margin: {
               top: '100px',
               bottom: '100px',
               right: '30px',
               left: '30px',
             },
            });
             
      await page.close();
     await browser.close()
      })()

我希望这对将来来到这里的人有所帮助。

推荐阅读