Convert Figma logo to code with AI

spatie logobrowsershot

Convert HTML to an image, PDF or string

4,812
485
4,812
2

Top Related Projects

88,205

JavaScript API for Chrome and Firefox

9,670

Capture website screenshots

29,463

Scriptable Headless Browser

46,847

Fast, easy and reliable testing for anything that runs in a browser.

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

Quick Overview

Browsershot is a PHP package that allows you to easily create screenshots and PDFs of web pages using Puppeteer. It provides a fluent interface to control headless Chrome, enabling developers to capture web content programmatically.

Pros

  • Easy-to-use API for generating screenshots and PDFs
  • Supports various output formats and customization options
  • Integrates well with Laravel and other PHP frameworks
  • Actively maintained with regular updates

Cons

  • Requires Node.js and Puppeteer to be installed on the system
  • Can be resource-intensive for high-volume operations
  • Limited to Chrome-based rendering, which may not perfectly match all browsers

Code Examples

  1. Taking a screenshot of a webpage:
use Spatie\Browsershot\Browsershot;

Browsershot::url('https://example.com')
    ->save('example.png');
  1. Generating a PDF from a webpage:
use Spatie\Browsershot\Browsershot;

Browsershot::url('https://example.com')
    ->format('A4')
    ->margins(10, 10, 10, 10)
    ->savePdf('example.pdf');
  1. Customizing the screenshot with various options:
use Spatie\Browsershot\Browsershot;

Browsershot::url('https://example.com')
    ->windowSize(1920, 1080)
    ->deviceScaleFactor(2)
    ->fullPage()
    ->timeout(30000)
    ->save('custom_screenshot.png');

Getting Started

  1. Install the package via Composer:
composer require spatie/browsershot
  1. Ensure Node.js and Puppeteer are installed:
npm install puppeteer
  1. Use Browsershot in your PHP code:
use Spatie\Browsershot\Browsershot;

Browsershot::url('https://example.com')->save('screenshot.png');

Note: Make sure to configure the correct Node.js and Puppeteer paths if they're not in the default locations.

Competitor Comparisons

88,205

JavaScript API for Chrome and Firefox

Pros of Puppeteer

  • More comprehensive API with direct control over browser automation
  • Supports a wider range of browser interactions and scenarios
  • Actively maintained by Google, ensuring regular updates and improvements

Cons of Puppeteer

  • Steeper learning curve due to its extensive feature set
  • Requires more setup and configuration for basic tasks
  • Larger package size and potentially higher resource usage

Code Comparison

Browsershot:

use Spatie\Browsershot\Browsershot;

Browsershot::url('https://example.com')
    ->save('example.png');

Puppeteer:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

Summary

Browsershot is a PHP wrapper around Puppeteer, offering a simpler API for common tasks like taking screenshots or generating PDFs. It's easier to use for basic operations but has limited flexibility compared to Puppeteer. Puppeteer provides more control and features but requires more code and setup. Choose Browsershot for quick, simple tasks in PHP projects, and Puppeteer for complex browser automation or when working in a Node.js environment.

9,670

Capture website screenshots

Pros of pageres

  • Lightweight and focused on capturing screenshots
  • Supports multiple URLs and viewport sizes in a single command
  • Includes CLI tool for easy use outside of Node.js projects

Cons of pageres

  • Limited to capturing screenshots only
  • Lacks advanced browser automation features
  • May require additional setup for certain use cases

Code Comparison

pageres:

const Pageres = require('pageres');

(async () => {
    await new Pageres({delay: 2})
        .src('https://example.com', ['1280x1024', '1920x1080'])
        .dest(__dirname)
        .run();
})();

Browsershot:

use Spatie\Browsershot\Browsershot;

Browsershot::url('https://example.com')
    ->windowSize(1280, 1024)
    ->screenshot('example.png');

Both libraries offer straightforward APIs for capturing screenshots, but Browsershot provides more extensive browser control and manipulation options. pageres excels in simplicity and multi-URL/viewport capture, while Browsershot offers a wider range of features for web page interaction and PDF generation. The choice between them depends on the specific requirements of your project and the programming language you prefer to work with.

29,463

Scriptable Headless Browser

Pros of PhantomJS

  • Standalone headless browser, not dependent on external browsers
  • Lightweight and faster for simple tasks
  • Extensive API for advanced scripting and automation

Cons of PhantomJS

  • No longer actively maintained (last release in 2018)
  • Limited support for modern web standards and JavaScript features
  • Lacks some features available in newer headless browser solutions

Code Comparison

PhantomJS:

var page = require('webpage').create();
page.open('http://example.com', function(status) {
  var title = page.evaluate(function() {
    return document.title;
  });
  console.log('Page title:', title);
  phantom.exit();
});

Browsershot:

use Spatie\Browsershot\Browsershot;

$title = Browsershot::url('http://example.com')
    ->evaluate("document.title")
    ->getScreenshot();

Key Differences

  • PhantomJS is a standalone JavaScript-based solution, while Browsershot is a PHP wrapper for Puppeteer
  • Browsershot leverages Chrome/Chromium, providing better compatibility with modern web technologies
  • PhantomJS offers more direct control over the browser, while Browsershot simplifies common tasks
  • Browsershot is actively maintained and benefits from ongoing Chrome/Chromium updates
46,847

Fast, easy and reliable testing for anything that runs in a browser.

Pros of Cypress

  • Comprehensive end-to-end testing framework with a rich set of commands and utilities
  • Interactive test runner with time-travel debugging and real-time reloads
  • Extensive documentation and active community support

Cons of Cypress

  • Steeper learning curve due to its extensive feature set
  • Limited to testing web applications within a browser environment
  • Can be slower for simple screenshot or PDF generation tasks

Code Comparison

Browsershot (PHP):

use Spatie\Browsershot\Browsershot;

Browsershot::url('https://example.com')
    ->save('example.png');

Cypress (JavaScript):

describe('Screenshot Test', () => {
  it('captures a screenshot', () => {
    cy.visit('https://example.com');
    cy.screenshot('example');
  });
});

Summary

Browsershot is a PHP library focused on generating screenshots and PDFs from web pages, while Cypress is a comprehensive JavaScript-based end-to-end testing framework. Browsershot excels in simplicity for capturing web content, whereas Cypress offers a more robust solution for full web application testing with additional features like time-travel debugging and real-time reloads. The choice between the two depends on the specific project requirements and the desired level of testing complexity.

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

Pros of Playwright

  • Cross-browser support (Chromium, Firefox, WebKit) out of the box
  • More comprehensive API for advanced web automation and testing
  • Built-in test runner and assertion library

Cons of Playwright

  • Steeper learning curve due to more extensive features
  • Larger package size and potentially higher resource usage
  • May be overkill for simple screenshot or PDF generation tasks

Code Comparison

Browsershot (PHP):

use Spatie\Browsershot\Browsershot;

Browsershot::url('https://example.com')
    ->save('example.png');

Playwright (JavaScript):

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

Summary

Playwright offers more comprehensive web automation capabilities across multiple browsers, making it suitable for complex testing scenarios. However, it may be more complex to set up and use for simple tasks. Browsershot, being more focused on screenshot and PDF generation, provides a simpler API for these specific use cases but lacks the extensive features of Playwright.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Social Card of Spatie's Browsershot

Convert a webpage to an image or pdf using headless Chrome

Latest Version MIT Licensed run-tests Total Downloads

The package can convert a webpage to an image or pdf. The conversion is done behind the scenes by Puppeteer which controls a headless version of Google Chrome.

Here's a quick example:

use Spatie\Browsershot\Browsershot;

// an image will be saved
Browsershot::url('https://example.com')->save($pathToImage);

It will save a pdf if the path passed to the save method has a pdf extension.

// a pdf will be saved
Browsershot::url('https://example.com')->save('example.pdf');

You can also use an arbitrary html input, simply replace the url method with html:

Browsershot::html('<h1>Hello world!!</h1>')->save('example.pdf');

If your HTML input is already in a file locally use the :

Browsershot::htmlFromFilePath('/local/path/to/file.html')->save('example.pdf');

Browsershot also can get the body of an html page after JavaScript has been executed:

Browsershot::url('https://example.com')->bodyHtml(); // returns the html of the body

If you wish to retrieve an array list with all of the requests that the page triggered you can do so:

$requests = Browsershot::url('https://example.com')
    ->triggeredRequests();

foreach ($requests as $request) {
    $url = $request['url']; //https://example.com/
}

To use Chrome's new headless mode pass the newHeadless method:

Browsershot::url('https://example.com')->newHeadless()->save($pathToImage);

Support us

Learn how to create a package like this one, by watching our premium video course:

Laravel Package training

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Documentation

All documentation is available on our documentation site.

Testing

For running the testsuite, you'll need to have Puppeteer installed. Pleaser refer to the Browsershot requirements here. Usually npm -g i puppeteer will do the trick.

Additionally, you'll need the pdftotext CLI which is part of the poppler-utils package. More info can be found in in the spatie/pdf-to-text readme. Usually brew install poppler-utils will suffice.

Finally run the tests with:

composer test

Contributing

Please see CONTRIBUTING for details.

Security

If you've found a bug regarding security please mail security@spatie.be instead of using the issue tracker.

Alternatives

If you're not able to install Node and Puppeteer, take a look at v2 of browsershot, which uses Chrome headless CLI to take a screenshot. v2 is not maintained anymore, but should work pretty well.

If using headless Chrome does not work for you take a look at at v1 of this package which uses the abandoned PhantomJS binary.

Credits

And a special thanks to Caneco for the logo ✨

License

The MIT License (MIT). Please see License File for more information.