Javascript 如何使Puppeter基于page.$eval函数以PDF格式呈现MathJax？

我是新来的木偶演员。成功地将整个网站转换为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()
})()

//需要木偶师
const puppeter=require（'puppeter'）；
（异步（）=>{
//创建chrome浏览器的实例
//但禁用无头模式！
const browser=wait puppeter.launch（）
//创建新页面
const page=wait browser.newPage（）
//配置导航超时
等待页面。转到（'https://9217531f4f48.ngrok.io/chapter-14/weblesson.php', {
等待至：“加载”，
//删除超时
超时：30000
});
//导航到网站上的特定div
const dom=wait page.$eval（'doto'，（el）=>{
返回el.innerHTML
})//获取DOM HTML
等待页面。评估（异步（）=>{
const script=document.createElement（'script'）；
script.src=https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js“id=”MathJax-script'；
持续承诺=新承诺（（解决、拒绝）=>{
script.onload=解析；
script.onerror=拒绝；
});
document.head.appendChild（脚本）；
等待承诺；
});
等待页面。设置内容（dom）
等待page.pdf（{path:'pdf/pairt.pdf'，
格式：“A4”，
背景：是的，
displayHeaderFooter:对，
headerTemplate:“”，
页脚模板：“”，
保证金：{
顶部：“100px”，
底部：“200px”，
右：'30px'，
左：“30px”，
},
});
等待页面。关闭（）；
等待浏览器关闭（）
})()

我得到以下信息

Puppeter不允许MathJax脚本在页面上正确转换数学表达式。$eval

预期产出

---

我需要有人帮助我如何将MathJax方程呈现为pdf格式，如预期输出中所示

@Davide Cervone，在添加wait 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()
      })()

“严格使用”；
//需要木偶师
const puppeter=require（'puppeter'）；
（异步（）=>{
//创建chrome浏览器的实例，但禁用headless模式！
const browser=wait puppeter.launch（{args:['--no sandbox'，'--disable setuid sandbox']}）
//创建新页面
const page=wait browser.newPage（）
//配置导航超时
等待页面。转到（'https://a1e3b598ebba.ngrok.io/chapter-14/lesson.php“，{waitUntil:'加载'}）；
//导航到网站上的特定div
const dom=wait page.$eval（'doto'，（el）=>{
返回el.innerHTML
})//获取DOM innerHTML
等待page.setContent（dom）；
var cssb=[]；
cssb推送（“”）；
cssb.push（'h1{字体大小：10px；位置：绝对；背景色：#f00；z索引：1000；颜色：#000；左边距：30px；}'）；
cssb推送（“”）；
常量css=cssb.join（“”）；
等待页面。等待（5000）；
等待page.pdf（{path:'pdf/hn'+Date.now（）+'.pdf'，
格式：“A4”，
背景：是的，
displayHeaderFooter:对，
headerTemplate:“”，
页脚模板：css+“第页，共页”，
保证金：{
顶部：“100px”，
底部：“100px”，
右：'30px'，
左：“30px”，
},
});
等待页面。关闭（）；
等待浏览器关闭（）
})()

---

我希望这将有助于将来有人来到这里。

您看过存储库中的吗？@DavideCervone，很好的指针。查看这些文件，完成后将再次返回给您。非常感谢。