Skip to content
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

Jump to bottom

Implement Page#pdf #5

Merged
merged 2 commits into from
Jun 28, 2020
Merged

Implement Page#pdf #5

merged 2 commits into from
Jun 28, 2020

Conversation

YusukeIwaki
Copy link
Owner

github-actions[bot]
github-actions bot reviewed Jun 28, 2020
View reviewed changes
lib/puppeteer/page/pdf_options.rb Outdated

# @return [PaperSize]
private def calc_paper_size
paper_width = 8.5
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[rubocop] reported by reviewdog 🐶
Lint/UselessAssignment: Useless assignment to variable - paper_width. Did you mean paper_height?

lib/puppeteer/page/pdf_options.rb Outdated
# @return [PaperSize]
private def calc_paper_size
paper_width = 8.5
paper_height = 11.0
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[rubocop] reported by reviewdog 🐶
Lint/UselessAssignment: Useless assignment to variable - paper_height. Did you mean paper_width?

@YusukeIwaki
Copy link
Owner Author

Working example is

Puppeteer.launch(slow_mo: 50, headless: true)) do |browser|
  page = browser.pages.first || browser.new_page
  page.viewport = Puppeteer::Viewport.new(width: 1200, height: 800, device_scale_factor: 2)

  username = 'AndroidDev'
  searchable = true

  page.goto("https://twitter.com/#{username}")
  page.wait_for_selector("article")
  page.Seval("article", "tweet => tweet.click()")
  page.wait_for_selector 'article', visible: true

  overlay = page.S('article')

  if searchable
    js = <<-JAVASCRIPT
    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>
      `;
    }
    JAVASCRIPT
    page.evaluate(js, overlay)
  else
    screenshot = overlay.screenshot(path: 'tweet.png')

    require 'base64'
    page.content = <<-HTML
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          html, body {
            height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fafafa;
          }
          img {
            max-width: 60%;
            box-shadow: 3px 3px 6px #eee;
            border-radius: 6px;
          }
        </style>
      </head>
      <body>
        <img src="data:img/png;base64,#{Base64.strict_encode64(screenshot)}">
      </body>
    </html>
    HTML
  end
  page.pdf(path: 'tweet.pdf', print_background: true)
end

Original implementation: https://github.com/puppeteer/examples/blob/master/element-to-pdf.js

@YusukeIwaki YusukeIwaki merged commit f510740 into master Jun 28, 2020
@YusukeIwaki YusukeIwaki deleted the content_to_pdf branch June 28, 2020 08:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@YusukeIwaki