---
title: "Download"
description: "The rendering of the page in view and of the Manifest, a PDF, a text or a full-size file, as links in two groups."
url: https://clover.iiif.library.northwestern.edu/docs/download
version: "4"
---

# Download

\<Clover.Download /> (web components: \<clover-download>)1 kB added to a page with a Root, gzipped (web components: 16 kB added to a page with a \<clover-root>, styles included, gzipped)

What there is to download, such as a PDF, a text or a full-size image, as links: for this page, and for all of them.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Clover.Download />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json">
  <clover-body></clover-body>
  <clover-download></clover-download>
</clover-root>
```

## API reference

Inside a `Root` (web components: `<clover-root>`), it lists the `rendering` of the Canvases in view, under “This page”, and of the Manifest, under “All pages”, as links, each with its format. Pressed, a link saves its file rather than opening it, where its server lets the file be fetched, and opens it in a new tab where not. With neither, it renders nothing. Its other props go to the `div` around its groups; it takes no `as` or `ref`.

**React**

| Prop           | Type     | Default | Description                                             |
| -------------- | -------- | ------- | ------------------------------------------------------- |
| `headingLevel` | `number` | `3`     | The groups’ headings: one below the heading above them. |
| `className`    | `string` | —       | Added to `clover-download`.                             |

**Web components**

### `<clover-download>`

The renderings of the page in view and of the Manifest (a PDF, a text, a full-size file), as links in two groups, This page and All pages. Nothing while there are none.

| Name            | Type     | Default | Description                                                                                                       |
| --------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
| `heading-level` | `number` | `3`     | The level of its groups' titles, one under the heading it sits beneath. Past 6, each names what it heads instead. |

## Examples

### Heading level

Use `headingLevel` (web components: `heading-level`) for its groups’ headings, “This page” and “All pages”: the level below the heading it sits under, here `4` under an `h3`.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Download headingLevel={4} />
```

**Web components**

```html
<clover-download heading-level="4"></clover-download>
```

### In the templates

`Document` puts its links in its toolbar, and `Default` lists them from a Download button beside its Panel’s About heading. In either, `download={false}` (web components: `download="false"`) leaves them out.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Viewer
  iiifContent="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json"
  template={Document}
/>
```

**Web components**

```html
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/page-transcript/manifest.json"
  template="document"></clover-viewer>
```

### One resource’s rendering

For one resource’s `rendering` alone, as a plain list of links, use [`Rendering` (web components: `<clover-rendering>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/rendering).

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Rendering of="canvas" />
```

**Web components**

```html
<clover-rendering of="canvas"></clover-rendering>
```

## Previous versions

[Clover 3.x › Viewer](https://clover.iiif.library.northwestern.edu/docs/3.x/viewer#api-reference)

- `options.showDownload` is the templates’ `download`, `Document`’s and `Default`’s.
- In a layout of your own, place `Download` (web components: `<clover-download>`) where you want it.