使用 Puppeteer 加载 VueJS 和 Vuetify 应用程序答案

【问题标题】：Using Puppeteer to load VueJS & Vuetify app使用 Puppeteer 加载 VueJS 和 Vuetify 应用程序
【发布时间】：2021-02-21 18:23:24
【问题描述】：

我正在使用 puppeteer 创建 HTML 页面的 PDF，它使用 Vue 和 Vuetify：

import { launch } from 'puppeteer';
.
.
.
const browser = await launch({ headless: false });
const page = await browser.newPage();
page.setContent(html, { waitUntil: 'networkidle0' });
const pdf = await page.pdf({ format: 'A4' });
await browser.close();
return pdf

HTML 看起来类似于：

<html>
  <body>
    <div id="app"> ... VUE & VUETIFY COMPONENT</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.10/dist/vuetify.js" ></script>
    <script>
      const app = new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data() {} ..... 
      });
    </script>
  </body>
</html>

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

【问题讨论】：

标签： javascript html vue.js vuetify.js puppeteer

【解决方案1】：

<v-app> 使用 v-application 类呈现，因此您可以使用 page.waitFor('.v-application') 来检查您的应用是否准备就绪：

page.setContent(html);

await page.waitFor('.v-application');
// <v-app> assumed to be mounted here

const pdf = await page.pdf({ format: 'A4' });
...

另外请注意，您的示例似乎缺少 Vuetify 所需的重要样式表。不要忘记添加它们：

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

【讨论】：

【解决方案2】：

原来我的 HTML 字符串包含一些无法识别的字符，这就是为什么我的 Vue 应用程序无法正确呈现的原因。

执行以下操作对我有用：

import { readFileSync } from 'fs';

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

【讨论】：