Javascript 使用木偶演员加载VueJS&；Vuetify应用程序

我正在使用Puppeter创建HTML页面的PDF，该页面使用Vue&Vuetify：

import{launch}来自“木偶演员”；
.
.
.
const browser=等待启动（{headless:false}）；
const page=wait browser.newPage（）；
setContent（html，{waitUntil:'networkidle0'}）；
const pdf=wait page.pdf（{格式：'A4'}）；
等待浏览器关闭（）；
返回pdf

HTML与此类似：

... VUE和VUETIFY组件
const app=新的Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{}。。。。。
});

但是，当浏览器打开时，看起来Vue&Vuetify没有正确加载。

是使用

v-application

类呈现的，因此您可以使用来检查应用程序是否已准备就绪：

page.setContent（html）；
wait page.waitFor（“.v-application”）；
//假设安装在这里
const pdf=wait page.pdf（{格式：'A4'}）；
...

还要注意，您的示例似乎缺少Vuetify所需的重要样式表。别忘了添加它们：

---

发现我的HTML字符串包含一些无法识别的字符，因此我的Vue应用程序无法正确呈现

做以下事情对我来说很有用：

import { readFileSync } from 'fs';

const htmlString = readFileSync('path-to-html-file').toString();
  
page.setContent(htmlString, { waitUntil: 'networkidle0' });