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

编程问答 2022-08-13

问题描述

我是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()
})()

我得到以下内容

enter image description here

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

预期输出；

enter image description here

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

解决方法

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

我希望这对以后来这里的人有帮助。

htmljavascriptmathjax