DEV Community

Jessica Spector
Jessica Spector

Posted on

Step-by-step Tutorial: Understanding Browsershot Laravel

Nowadays, technology will update faster than ever. The latest benefit is enabling the user to download pdf and png files of a webpage easily. The best technology for mobile application development is Browsershot Laravel to convert web pages into images or pdf.

Introduction of Laravel Browswershot

Talking about Latest Browsershot Laravel is an open-source Laravel package that provides a simple way to automate the generation of website screenshots using Headless Chrome. It is built on the Laravel framework and follows architectural patterns and principles.

Moreover, the Browsershot package follows the Model-View-Controller (MVC) architecture pattern, which is the core architecture pattern of the Laravel framework.

Laravel Architecture Logic into Three Interconnected Components:

  • The model: This represents the data and business logic of the application. In the case of Browsershot, this would include the configuration of the Chrome instance and the screenshot generation settings.
  • The view: This represents the user interface of the application. In the case of Browsershot, this would include the rendered screenshot of the target website.
  • The controller: This acts as the intermediary between the model and the view. It handles user requests and updates the model and view accordingly. In the case of Browsershot, this would include the instantiation of the Browsershot class and the execution of the screenshot generation process.

Following these architectural principles and patterns, Browsershot provides a simple and intuitive way to automate website screenshot generation within a Laravel application.

The Browsershot Package Consists of Three Leading Roles:

There are three main components of the browsershot in Laravel, which helps you to integrate data of targeted websites and images. Following are the use for clean API and smooth running applications.

  • The Browsershot class is the main class responsible for interacting with Headless Chrome to generate website screenshots. It handles the Chrome instance's configuration, the target website's navigation, and the screenshot's capture.
  • The Browsershot facade: This provides a simple and clean API for developers to interact with the Browsershot class without having to instantiate it manually. It exposes methods such as url() and fullPage() to configure the screenshot generation process.
  • The Browsershot service provider is responsible for registering the necessary dependencies and configurations for the package to work correctly within a Laravel application. It provides access to the underlying Chrome instance and installs the required drivers and dependencies.

Tutorial Guide to Generate PDF Using Browsershot Laravel

Sure, here is a step-by-step guide on how to use the Browsershot Laravel package to generate PDFs from website screenshots:

Step 1: Install the Browsershot package
The first step is to install the Browsershot package using Composer. Run the following command in your terminal:

composer require spatie/browsershot
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure the package
Next, you must configure the Browsershot package by publishing its configuration file. Run the following command:

php artisan vendor:publish --provider="Spatie\Browsershot\BrowsershotServiceProvider" --tag="config"
Enter fullscreen mode Exit fullscreen mode

This will publish the configuration file to config/browsershot.php.

Step 3: Generate a PDF from the website screenshot

Once the package is installed and configured, you can use the pdf() method to generate a PDF from a website screenshot. Here's an example:

use Spatie\Browsershot\Browsershot;
Browsershot::url('https://example.com')
    ->pdf()
    ->save('example.pdf');
Enter fullscreen mode Exit fullscreen mode

In this example, we're generating a PDF from the example.com website and saving it as example.pdf.

You can also pass additional options to the pdf() method to customize the PDF generation process. For example, you can set the page size, margin, and orientation using the page width (), page-height (), margin(), and landscape() methods respectively. Here's an example:

use Spatie\Browsershot\Browsershot;
Browsershot::url('https://example.com')
    ->pdf()
    ->pageWidth(210)
    ->pageHeight(297)
    ->margin(10, 10, 10, 10)
    ->landscape()
    ->save('example.pdf');

Enter fullscreen mode Exit fullscreen mode

This will generate a landscape PDF with a page size of A4 (210mm x 297mm) and 10mm margins on all sides.

Step 4: View the generated PDF
Once the PDF is generated, you can view it using any PDF viewer. In our example, the PDF was saved as example.pdf, so you can view it by opening that file in a PDF viewer.

And that's it! You have now successfully generated a PDF from a website screenshot using the Browsershot Laravel package.
To know more about testing, outcomes, and advanced technics. You can fine-tune how you will catch and get your Laravel application more flexible and scaled. Read this blog to learn further about Browsershot Laravel.

Conclusion

In a nutshell, the Browsershot Laravel package provides a simple and intuitive way to automate website screenshot generation and PDF generation using headless Chrome. Following the steps outlined in this guide, you can easily install, configure, and use the package to generate PDFs from website screenshots in your Laravel application.

Overall, Browsershot is a powerful and flexible package that can be used in various applications, including web scraping, automated testing, and more. Its seamless integration with the Laravel framework and adherence to established architectural patterns and principles make it an excellent choice for developers looking to streamline their website screenshot and PDF generation workflows.

Top comments (1)

Collapse
 
merite15 profile image
Merite15

I'm on windows machine and i have this error For some reason Chrome did not write a file at test.pdf. Command ======= [] Output ======
Image description