Question

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

我有两个容器：
1. WebApp
2.发票处理器

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

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

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

中描述的那些准则

这是我的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容器内。

谢谢！ :)

Answer 1

在拨打pdf之前，您需要致电

await page.emulateMedia('screen');

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

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

Chrome_Headless - Puppeteer返回空内容

1 个答案: