site-shot

Create a pdf of screenshots from a static site

Usage no npm install needed!

<script type="module">
  import siteShot from 'https://cdn.skypack.dev/site-shot';
</script>

README

Site-Shot

Create a pdf of screenshots from a static site

Install

This project includes everything you need to generate screenshots and pdfs with Firefox out of the box, so you can just:

npm install -g site-shot

Use

To use in Node.js simply install and require site-shot. Then pass a path to a static site and a callback function.

var siteShot = require('site-shot')

siteShot('www', function(err, output) {
  console.log(output) // path to saved pdf
})

You can also (optionally) pass an options object to site-shot dictating things like where to output the pdf and what host and port the temporary static server should use:

var siteShot = require('site-shot')

siteShot('www', {output: 'build/pdfs'}, function(err, output) {
  console.log(output)// pdf now saved in the 'build/pdfs' folder
})

Options are:

Name Description Default
name Name of pdf (without file extension) Current Date
output Path where the pdf should be saved './'
format Export format either 'pdf' or 'png' 'pdf'
host Host you'd like to use for the server 'localhost'
port Port for the server 5678
browser Browser you'd like to use to generate screenshots(see 'Using Other Browsers' below) 'firefox'
width Width of browser window (in pixels) 1280

Using Other Browsers

This project uses selenium-webdriver to run an actual browser which opens each link and screenshots every page. Selenium webdriver automatically comes set up for Firefox, so if you're ok with Firefox you don't need to do anything.

If you are set on a different browser, you must get the download for that specific browser. Simply visit the selenium downloads page, select the latest version, and find the correct file for that browser and make sure it is exported to your path.

Browser Download
'chrome'1 chromedriver
'firefox' included, no download
'safari' SafariDriver.safariextz
'phantomjs'2 phantom-js

1 Chromedriver currently has a bug where the screenshot will only be what is 'above the fold' as opposed to the whole web page. This may or may not be desirable for your use case.

2 Phantom-js screenshots seem like they don't render CSS correctly. I think this is related to using a font service which has whitelisted domains, so it is something to think about.

CLI

If you globally install site-shot, you can use it as a cli:

Usage: site-shot [input path] [options]

Options:
  -n, --name     filename of pdf (without extension)
  -o, --output   output folder path (relative)                   [default: "./"]
  -f, --format   format of output:
                 pdf|png                                        [default: "pdf"]
  -h, --host     host for static server                   [default: "localhost"]
  -p, --port     port for static server                          [default: 5678]
  -b, --browser  browser selenium should use:
                 firefox|chrome|safari|phantomjs            [default: "firefox"]
  --help         Show help
  -v, --version  Show version number

Examples:
  site-shot www            screenshot all pages in ./www and export pdf
  site-shot www -o pdfs    screenshot all pages in ./www and export to ./pdfs

Contribute

This project uses the standard style, so you should use it too! npm test will automatically make sure the code is written to the standard. If the tests pass, you are good to go!