Skip to content

fix element-to-pdf example #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix element-to-pdf example #35

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 40 additions & 25 deletions element-to-pdf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,36 +39,47 @@ const puppeteer = require('puppeteer');
const username = process.env.USERNAME || 'ebidel';
const searchable = process.argv.includes('--searchable');

(async() => {
(async () => {

const browser = await puppeteer.launch();
const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.setViewport({width: 1200, height: 800, deviceScaleFactor: 2});
await page.goto(`https://twitter.com/${username}`);
const page = await browser.newPage();
await page.setViewport({
width: 1200,
height: 800,
deviceScaleFactor: 2
});
await page.goto(`https://twitter.com/${username}`, {
waitUntil: 'networkidle2'
});

// Can't use elementHandle.click() because it clicks the center of the element
// with the mouse. On tweets like https://twitter.com/ebidel/status/915996563234631680
// there is an embedded card link to another tweet that it clicks.
await page.$eval(`.tweet[data-screen-name="${username}"]`, tweet => tweet.click());
await page.waitForSelector('.tweet.permalink-tweet', {visible: true});

const overlay = await page.$('.tweet.permalink-tweet');
const screenshot = await overlay.screenshot({path: 'tweet.png'});
// Can't use elementHandle.click() because it clicks the center of the element
// with the mouse. On tweets like https://twitter.com/ebidel/status/915996563234631680
// there is an embedded card link to another tweet that it clicks.
await page.$eval(`article`, tweet => tweet.click());
await page.waitForSelector('article', {
visible: true
});

if (searchable) {
await page.evaluate(tweet => {
const width = getComputedStyle(tweet).width;
tweet = tweet.cloneNode(true);
tweet.style.width = width;
document.body.innerHTML = `
<div style="display:flex;justify-content:center;align-items:center;height:100vh;">;
const overlay = await page.$('article');
const screenshot = await overlay.screenshot({
path: 'tweet.png'
});

if (searchable) {
await page.evaluate(tweet => {
const width = getComputedStyle(tweet).width;
tweet = tweet.cloneNode(true);
tweet.style.width = width;
document.body.innerHTML = `
<div style="display:flex;justify-content:center;align-items:center;height:100vh;">
${tweet.outerHTML}
</div>
`;
}, overlay);
} else {
await page.setContent(`
}, overlay);
} else {
await page.setContent(`
<!DOCTYPE html>
<html>
<head>
Expand All @@ -93,10 +104,14 @@ if (searchable) {
</body>
</html>
`);
}
}

await page.pdf({path: 'tweet.pdf', printBackground: true});
//NOTE: page.pdf does not work with {headless: false}
await page.pdf({
path: 'tweet.pdf',
printBackground: true
});

await browser.close();
await browser.close();

})();