# save-html-screenshot

> A nodejs package that allows you to save html and screenshot of an url. It utilizes the locally installed Chrome browser or [browserless.io](https://browserless.io) using puppeteer to save the html and screenshot of the url.

Latest version **0.0.16** (published 2023-10-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install save-html-screenshot
pnpm add save-html-screenshot
yarn add save-html-screenshot
bun add save-html-screenshot
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.16 |
| Published | 2023-10-10 |
| First published | 2023-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 35 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Pawan Paudel |
| Maintainers | pawanpaudel93 |

## Links

- npm: https://www.npmjs.com/package/save-html-screenshot
- Repository: https://github.com/pawanpaudel93/save-html-screenshot
- Homepage: https://github.com/pawanpaudel93/save-html-screenshot#readme
- Issues: https://github.com/pawanpaudel93/save-html-screenshot/issues
- Funding: https://github.com/sponsors/pawanpaudel93
- npm.io page: https://npm.io/package/save-html-screenshot

## Dependencies (4)

- [tempy](https://npm.io/package/tempy.md) 1.0.1
- [puppeteer-core](https://npm.io/package/puppeteer-core.md) 19.7.5
- [find-chrome-bin](https://npm.io/package/find-chrome-bin.md) ^1.0.5
- [@pawanpaudel93/single-file](https://npm.io/package/@pawanpaudel93/single-file.md) ^1.0.7

## Recent versions

- 0.0.16 (latest) — 2023-10-10
- 0.0.15 — 2023-06-24
- 0.0.14 — 2023-06-24
- 0.0.13 — 2023-06-23
- 0.0.12 — 2023-06-22
- 0.0.11 — 2023-06-22
- 0.0.10 — 2023-06-19
- 0.0.9 — 2023-06-17
- 0.0.8 — 2023-06-16
- 0.0.7 — 2023-06-08
- 0.0.6 — 2023-06-08
- 0.0.5 — 2023-05-31
- 0.0.4 — 2023-05-31
- 0.0.3 — 2023-05-31
- 0.0.2 — 2023-05-31
- … 1 more at https://npm.io/package/save-html-screenshot/versions

## README

# save-html-screenshot

A node package that allows you to save HTML and screenshots of an URL. It utilizes the locally installed Chrome browser or [browserless.io](https://browserless.io) using Puppeteer to save the html and screenshot of the URL.

[![NPM version](https://img.shields.io/npm/v/save-html-screenshot?color=green&label=version)](https://www.npmjs.com/package/save-html-screenshot)

## Features

- Complete web page saving as a single HTML file.
- Option to save HTML and URL screenshots.
- Automatic Chrome browser download if not installed.
- Browserless.io supported.

## Installation

You can install save-html-screenshot using npm:

```sh
npm install save-html-screenshot 
```

Using yarn:

```sh
yarn add save-html-screenshot 
```

And, using pnpm:

```sh
pnpm add save-html-screenshot 
```

## Usage

First, import the necessary modules:

```ts
import { HtmlScreenshotSaver, SaveResult } from 'save-html-screenshot'
```

### Constructor

Create an instance of the HtmlScreenshotSaver class with options:

```ts
const saver = new HtmlScreenshotSaver(options)
```

See here on what options can be passed: [HtmlScreenshotSaverOptions](https://github.com/pawanpaudel93/save-html-screenshot/blob/fd689be68ceeb5eafc8622f6a1542843870de91d/src/types.ts#L44C1-L44C1)

### Save Method

The save method captures the html and screenshot of the specified URL and saves it to the specified folder path:

```ts
const result: SaveResult = await saver.save(url, options)
```

The `url` parameter is the URL of the webpage to capture.

The `options` parameter is optional with the following:

- `outputDirectory` (Optional): It specifies the folder path where the screenshot and related files will be saved. If not provided, a temporary directory will be used.
- `outputHtmlFilename` (Optional): Output HTML filename. If not provided, `index.html` will be used.
- `outputScreenshotFilename` (Optional): Output Screenshot filename. If not provided, `screenshot.png` will be used.

The method returns a `SaveResult` object with the following properties:

- `status`: Indicates the status of the operation, either 'success' or 'error'.
- `message`: Provides additional information or an error message if the operation failed.
- `savedDirectory`: The path where the HTML webpage and screenshot are saved.
- `webpage`: The path to the saved HTML webpage.
- `screenshot`: The path to the saved screenshot image.
- `title`: The title of the captured webpage.
- `timestamp`: The timestamp of when the screenshot was captured (in seconds).

## Example

Here's an example that demonstrates the usage of save-html-screenshot using browserless:

```ts
import { HtmlScreenshotSaver } from 'save-html-screenshot'

const apiKey = 'your-api-key'
const url = 'https://example.com'
const saveOptions = {
  outputDirectory: '/path/to/save',
  outputHtmlFilename: 'save.html',
  outputScreenshotFilename: 'save.png'
}

const options = {
  browserlessOptions: {
    apiKey,
  }
}

const saver = new HtmlScreenshotSaver(options)

const result = await saver.save(url, saveOptions)
if (result.status === 'success') {
  console.log('Screenshot saved successfully!')
  console.log('Webpage:', result.webpage)
  console.log('Screenshot:', result.screenshot)
  console.log('Title:', result.title)
  console.log('Timestamp:', result.timestamp)
}
else {
  console.error('Error saving screenshot:', result.message)
}
```

In the above example, replace 'your-API-key' with your actual browserless.io API key and specify the desired URL and folder path.

Without using browserless,

```ts
import { HtmlScreenshotSaver } from 'save-html-screenshot'

const url = 'https://example.com'

const saver = new HtmlScreenshotSaver()

const result = saver.save(url)
if (result.status === 'success') {
  console.log('Screenshot saved successfully!')
  console.log('Webpage:', result.webpage)
  console.log('Screenshot:', result.screenshot)
  console.log('Title:', result.title)
  console.log('Timestamp:', result.timestamp)
}
else {
  console.error('Error saving screenshot:', result.message)
}
```

## Related

- [single-file](https://github.com/pawanpaudel93/single-file)

## License

[MIT](./LICENSE) License © 2023 [Pawan Paudel](https://github.com/pawanpaudel93)

---
_Source: https://npm.io/package/save-html-screenshot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._