Download

<Clover.Download /><clover-download>1 kB added to a page with a Root, gzipped14 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.


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


<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<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.

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

`<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 headingLevelheading-level for its groups’ headings, “This page” and “All pages”: the level below the heading it sits under, here 4 under an h3.


<Clover.Download headingLevel={4} />


<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}download="false" leaves them out.


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


<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<clover-rendering>.


<Clover.Rendering of="canvas" />


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

Previous versions

Clover 3.x › Viewer

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