Download Trigger for Svelte

Trigger file downloads programmatically.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

<script lang="ts">
import { DownloadIcon, FileTextIcon } from "lucide-svelte";
import { Button } from "@/components/ui/button";
import { DownloadTrigger } from "@/components/ui/download-trigger";
import { Item, ItemTitle } from "@/components/ui/item";
</script>

const DownloadTriggerDemo = () => (
  <div className="flex flex-col gap-4">
    <Item variant="outline">
      <FileTextIcon />
      <ItemTitle>{content}</ItemTitle>
    </Item>
    <DownloadTrigger
      asChild
      data={content}
      fileName="hello.txt"
      mimeType="text/plain"
    >
      <Button size="lg" variant="outline">
        <DownloadIcon />
        Download
      </Button>
    </DownloadTrigger>
  </div>
);

const content = "Hello, World! This is a sample text file.";

Accessibility

Enter: Activate the focused control.
Space: Activate the focused control.

Demos

Download Svg

PreviewCode

Promise

PreviewCode

API Reference

DownloadTrigger

data-slot="download-trigger"

PropType

dataDownloadableData | (() → MaybePromise<DownloadableData>)

The data to download.

Type: DownloadableData | (() → MaybePromise<DownloadableData>)

fileNamestring

The name of the file to download.

The MIME type of the data to download.

Type: ImageFileMimeType | ApplicationFileMimeType | TextFileMimeType | FontFileMimeType | VideoFileMimeType | AudioFileMimeType | FileMimeTypeGroup | AnyString

asChild?Snippet<[PropsFn]>

Render your own element: a snippet that gets the part's props to spread on it.

Type: Snippet<[PropsFn]>