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!