Chrome_Headless - Puppeteer 返回空内容答案

【问题标题】：Chrome_Headless - Puppeteer returns empty contentChrome_Headless - Puppeteer 返回空内容
【发布时间】：2018-02-04 13:18:37
【问题描述】：

我正在使用 Vuejs 创建一个 Web 应用程序来列出发票，并且我正在使用 Chrome Headless 将该页面的内容转换为 PDF。一切都在 docker 容器中运行。

我有两个容器：
1. 网络应用
2. 发票处理器

我正在尝试使用 puppeteer 获取网页内容，然后对其进行处理以将其内容转换为 PDF。问题是页面内容返回空白。我监视了 webapp 日志，由于某种原因，从服务器加载数据的请求没有被触发。

在网页内部，我有动态内容，因为它是一个 SPA，并且我有多个填充有指令的列表。

在 Docker 中运行 puppeteer 有点不同，因为它不安装 Chromium 依赖项，必须手动安装。

我遵循troubleshooting section 中描述的那些准则

这是我的 Dockerfile：

FROM node:8-slim
RUN apt-get update && \
  apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
  libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
  libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
  libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
  ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

COPY . /app/
WORKDIR app

RUN npm install -g

ARG CACHEBUST=1
RUN npm install puppeteer@0.13.0

RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
    && mkdir -p /home/pptruser/Downloads \
    && chown -R pptruser:pptruser /home/pptruser \
    && chown -R pptruser:pptruser /app

USER pptruser
CMD ["npm", "start"]

容器完美运行，开始向webApp容器发出请求。

这是我用来向页面发出请求的代码

const browser = await puppeteer.launch({
  args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage']
});
const page = await browser.newPage();
await page.goto(URL, { waitUntil: 'networkidle0' });
await page.waitFor(5000);

const aHandle = await context.evaluateHandle(() => document.body);
const resultHandle = await context.evaluateHandle(body => body.innerHTML, aHandle);
await aHandle.dispose();
await resultHandle.dispose();

await page.pdf({ path: path.join(__dirname, './page8.pdf') });
await browser.close();

应该加载的网页是这样的

<ul class="items">
  <component v-for="item in dataList"
    :key="item.id"
    v-bind:value="item.value"/>
</ul>

dataList 在我的组件数据中，是从服务器加载的。问题是这个列表没有被填充，并且正在打印的 PDF 中的这些表是空的。

重要提示：前面提到的所有内容都在本地工作，但不在 Docker 容器内。

谢谢！ :)

【问题讨论】：

标签： docker web-crawler puppeteer google-chrome-headless

【解决方案1】：

在调用 pdf 之前，您需要调用

await page.emulateMedia('screen');

See here for the notes。这基本上将页面的 CSS 媒体类型更改为屏幕。

注意：您也只能在无头模式下生成 pdf，除非是字体问题，否则不能 100% 确定它为什么在本地工作。 See here 或 here

【讨论】：