在 AdonisJS 中使用 DOM 和 Playwright 来生成 PDF

Question

我正在寻求有关在 AdonisJS 中针对特定用例使用 DOM 的指导。

据我所知，AdonisJS 主要是为服务器端开发而设计的，可能不会自动包含文档对象和其他 DOM 元素的 TypeScript 定义，因为这些概念特定于浏览器环境。

但是，我当前的项目涉及使用 Playwright 库来生成 PDF。我需要通过 $evaluate 方法评估 HTML 类，这需要访问 DOM 类型。即使在尝试使用 JSDOM 库时，我也会遇到定义错误。

我非常感谢您对此事的任何帮助或见解。先感谢您;我在这个阶段有点卡住了。

import { inject } from '@adonisjs/core'
import { HttpContext } from '@adonisjs/core/http'
import { chromium } from 'playwright'
import { ConfigPdfInteface } from '../interface/config_pdf_interface.js'
import { JSDOM } from 'jsdom'
@inject()
export default class PlaywrightService {
  constructor(protected ctx: HttpContext) {}

  async generatePdfPlaywright(
    response: HttpContext['response'],
    path: string,
    documents: any,
    config: ConfigPdfInteface
  ) {
    try {
      const browser = await chromium.launch({
        headless: true,
      })

      const page = await browser.newPage()

      await page.emulateMedia({ media: 'print' })

      const html = await this.ctx.view.render(`${path}`, documents)
      await page.setContent(html, {
        waitUntil: 'networkidle',
      })

      const selector = '#someSelector'
      const bodySize = await page.evaluate((p) => {
        const { document } = new JSDOM(html).window
        console.log('document', document)
        const body = document?.querySelector(p)
        const minHeight = window.getComputedStyle(body!).minHeight
        return minHeight
      }, selector)

      console.log('bodySize', bodySize)

      const pdfBuffer = await page.pdf(config)

      await browser.close()

      response.header('Content-type', 'application/pdf')
      response.header('Content-Disposition', 'inline; filename=example.pdf')

      response.send(pdfBuffer)
    } catch (error) {
      console.error(error)
      response.status(500).send('PDF Error')
    }
  }
}

错误

page.evaluate: ReferenceError: JSDOM is not defined
    at eval (eval at evaluate (:226:30), <anonymous>:2:38)
    at UtilityScript.evaluate (<anonymous>:228:17)
    at UtilityScript.<anonymous> (<anonymous>:1:44)
    at PlaywrightService.generatePdfPlaywright 

Answer 1

我不确定你想要完成什么（看起来像是一个可能的[XY问题]，但无论如何，在浏览器中运行 JSDOM 是没有意义的，因为浏览器已经拥有真正的 DOM。 JSDOM 的重点是在 Node 中模拟浏览器 DOM，而无需浏览器。但当您使用 Playwright 时，您就可以接触到真实的东西。

所以

const bodySize = await page.evaluate((p) => {
  const { document } = new JSDOM(html).window
  console.log('document', document)
  const body = document?.querySelector(p)
  const minHeight = window.getComputedStyle(body!).minHeight
  return minHeight
}, selector)

变成：

const selector = '#someSelector';
const bodySize = await page.$eval(selector, el =>
  getComputedStyle(el).minHeight
);

如果找不到

selector

，

$eval

将会抛出。如果您预计它会丢失，您可以抓住它并进行相应处理。

但是

bodySize

从未在您的代码中使用过。