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!