使用 Puppeteer 匯出聲享 PPT

摘要： 聲享是一個基於ThinkJS 開發的線上製作 PPT 平臺。聲享製作的 PPT 支援程式碼高亮、圖片上傳、神奇效果等功能，同時你可以在聲享收藏自己喜歡的 PPT 、對自己的 PPT 進行分類管理。其中有一個 PDF 匯出的功能，可以將自己製作的 PPT 匯出成 PDF 儲存到本地。 功...

聲享是一個基於ThinkJS 開發的線上製作 PPT 平臺。聲享製作的 PPT 支援程式碼高亮、圖片上傳、神奇效果等功能，同時你可以在聲享收藏自己喜歡的 PPT 、對自己的 PPT 進行分類管理。其中有一個 PDF 匯出的功能，可以將自己製作的 PPT 匯出成 PDF 儲存到本地。

功能實現比較簡單，只是提供了一個頁面，使用者需要手動去列印成 PDF。這個方案存在一些問題：

1. 由於使用了 iframe 懶載入導致未載入的 iframe 無法正常顯示。
2. 該種方案只能列印所有頁面的初始狀態。如果頁面中存在切換動畫，可能會丟失部分 PPT 資訊。
3. 需要使用者手動操作，提高了使用難度。

如果是前端來生成 PDF，這些問題基本可以得到解決，但是開發量比較大而且存在一個效率問題。如果 PPT 頁面存在多個 iframe，PDF 的生成時間過長會讓使用者長時間等待，明顯不太合適。最終還是決定服務端來生成 PDF，才有了後來 Puppeteer 的嘗試。

Puppeteer

什麼是 Puppeteer 呢？官方給的解釋是：

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over theDevTools Protocol. Puppeteer runsheadless by default, but can be configured to run full (non-headless) Chrome or Chromium.

簡而言之，這貨是一個提供高階 API 的 node 庫，能夠通過 devtool 控制 headless 模式的 Chrome 或者 Chromium，它可以在 headless 模式下模擬任何的人為操作。通過它我們可以實現：

1. 生成頁面的截圖或者 PDF
2. 抓取 SPA（單頁應用）並生成預渲染內容（即“SSR”（伺服器端渲染））。
3. 自動提交表單，進行 UI 測試，鍵盤輸入等。 ...

通過 Puppeteer，我們可以直接使用 Chrome 把我們需要的內容匯出為 PDF。對比以前的實現方式有以下優點：

1. 不需要使用者手動操作，服務端生成 PDF 後直接以郵件的方式傳送給使用者。
2. PPT 中的動畫可以模擬使用者翻頁的動作觸發，然後以初始、結束兩張 PDF 的方式展示，不會丟失 PPT 內容。
3. 不需要考慮圖片/ iframe 跨域等問題。

可以說 Puppeteer 完美的解決來我們一期 PDF 匯出存在的問題。

解決方案

我們基本的實現思路是：

1. 開啟一個正常的 PPT 播放頁，獲取需要列印的 DOM 元素並翻頁 。
2. 重複第一步操作直至到最後一頁 。
3. 清空頁面內容並將前兩步獲得的頁面內容依次填充到當前頁面（為什麼要依次填充會在後面解釋）。

對應上述方案實現的部分程式碼如下：

1. 通過 Puppeteer 開啟指定的頁面

// 測試時建議headless設定為false，以便可以直觀看到頁面效果
this.browser = await puppeteer.launch({headless: this.isDebug});
this.page = await this.browser.newPage();
await this.page.goto('https://xxxxx.com', { waitUntil:'networkidle2' });
複製程式碼

2. 開啟頁面後可以通過 Puppeteer 模擬使用者翻頁操作，每次翻頁後快取需要列印的 DOM 元素字串。

let canNext;
let i = 0;
const content = {};
do {
canNext = await this.page.$('.navigate-right.enabled');
const iframes = await this.page.$$('.PluginPage.present iframe').length;
content[i++] = {
iframe: iframes,
domStr: await this.page.$eval('.RevealViewPort', el => el.outerHTML)
}
if (canNext) {
await this.page.click('.navigate-right');
// 等待翻頁動畫
await this.page.waitFor(1000);
}
} while (canNext);
複製程式碼

3. 獲取到要列印的所有頁面 DOM 後，替換掉原來的頁面內容。因為 $evaluate 方法中不支援呼叫外部變數所以只能以傳參的方式使用。

this.page.evaluate(domStr => document.body.innerHTML = domStr, content);
複製程式碼

4. 呼叫生成 PDF 的 API

this.page.pdf({
path: path.join(think.ROOT_PATH, 'runtime/xxx.pdf'),
format: 'A4',
landscape: true,
printBackground: true //如果要顯示背景，此屬性要設定為true
})
複製程式碼

5. 使用 nodemailer 傳送郵件給使用者。這一步如果想使用本地的 SMTP 服務請用 nodemailer 的 2.7.5 的版本，此版本後這項功能被刪除了。

let transporter = nodemailer.createTransport({
host: 'smtp.ym.163.com',
port: 994,
secure: true,
auth: {
user: 'xxx@xxx.com',
pass: 'xxx'
}
});
transporter.sendMail({
from: 'xxx@xxx.com',
to: 'xxx@xxx.com',,
subject: '【聲享】xxx',
attachments: [{
filename: 'xxx.pdf',
path: path.join(think.ROOT_PATH, 'runtime/xxx.pdf'),
contentType: 'application/pdf'
}]
})
複製程式碼

開發中需要注意的問題

1. 使用者登入 使用 Puppeteer 開啟頁面相當於你新啟動了一個瀏覽器例項，頁面中的 seession 和 cookie 是空的。而列印所用的頁面需要用到使用者資訊，所以我們登入了一個超管帳號來執行列印操作。在 ThinkJS 中可以通過中介軟體來實現這項功能。在訪問頁面的時候通過引數校驗判斷是否是列印而開啟的頁面，如果是則登入超管帳號。

// 開啟指定頁面時通過校驗後面引數判斷是否以超管登入
module.exports = options => {
return async (ctx, next) => {
const { token, ctime } = ctx.query;
const md5Str = tockenGenerator();
if (md5Str === token) {
await ctx.session('userInfo', adminUser);
}
return next();
};
};

複製程式碼

2. Puppeteer 啟動

如果服務端是執行在 root 許可權下，在啟動 Puppeteer 時要新增 --no-sandbox 引數，否則 Chrome/Chromium 會啟動失敗。詳情見 Running as root without — no-sandbox is not supported 。這個許可權問題在linux以root使用者使用 Chrome 的時候同樣適用。

this.browser = await puppeteer.launch({args:['--no-sandbox']});


複製程式碼

3. iframe 無法載入

聲享支援頁面內嵌入 iframe，在列印的時候碰到一個問題。如果同時在頁面上插入 iframe 過多，後面的 iframe 會直接卡住不再載入。所以 iframe 最好分批插入或者一個一個插入，同時設定10秒來載入iframe。 如果想精確控制 iframe 也可以使用 API 等待 iframe 完全載入再執行後續操作。

for (let i = 0; i < pages.length; i++) {
const page = pages[i];
await this.page.$evaluate(content => {
const divDom = document.createElement('div');
divDom.innerHTML = content;
document.body.appendChild(divDom.childNodes[0])
}, page.domStr);
if (page.iframe) await this.page.waitFor(10000 * page.iframe);
}

複製程式碼