Download Trigger

Trigger file downloads programmatically.

Motivation

The DownloadTrigger component provides a convenient way to programmatically trigger file downloads in web applications. It handles the complexities of downloading files, whether they are URLs, Blobs, or other data types.

Examples

Basic

Pass the data you want to download to the data prop, and specify the fileName and mimeType of the file.

import { DownloadTrigger } from '@ark-ui/react/download-trigger'

export const Basic = () => {
  return (
    <DownloadTrigger data="Hello world" fileName="hello.txt" mimeType="text/plain">
      Download txt
    </DownloadTrigger>
  )
}

import { DownloadTrigger } from '@ark-ui/solid/download-trigger'

export const Basic = () => {
  return (
    <DownloadTrigger data="Hello world" fileName="hello.txt" mimeType="text/plain">
      Download txt
    </DownloadTrigger>
  )
}

<script setup lang="ts">
import { DownloadTrigger } from '@ark-ui/vue/download-trigger'
</script>

<template>
  <DownloadTrigger data="Hello world" fileName="hello.txt" mimeType="text/plain">Download txt</DownloadTrigger>
</template>

Download SVG

Here's an example of how to download an SVG file.

import { DownloadTrigger } from '@ark-ui/react/download-trigger'

export const Svg = () => {
  return (
    <DownloadTrigger
      data='<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>'
      fileName="circle.svg"
      mimeType="image/svg+xml"
    >
      Download SVG
    </DownloadTrigger>
  )
}

import { DownloadTrigger } from '@ark-ui/solid/download-trigger'

export const Svg = () => {
  return (
    <DownloadTrigger
      data='<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>'
      fileName="circle.svg"
      mimeType="image/svg+xml"
    >
      Download SVG
    </DownloadTrigger>
  )
}

<script setup lang="ts">
import { DownloadTrigger } from '@ark-ui/vue/download-trigger'
</script>

<template>
  <DownloadTrigger
    data='<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>'
    fileName="circle.svg"
    mimeType="image/svg+xml"
  >
    Download SVG
  </DownloadTrigger>
</template>

Promise

You can also trigger downloads from a promise that returns a Blob, File, or string.

import { DownloadTrigger } from '@ark-ui/react/download-trigger'

export const WithPromise = () => {
  const fetchImage = async () => {
    const response = await fetch('https://picsum.photos/200/300')
    return response.blob()
  }

  return (
    <DownloadTrigger data={fetchImage} fileName="random-image.jpg" mimeType="image/jpeg">
      Download Image
    </DownloadTrigger>
  )
}

import { DownloadTrigger } from '@ark-ui/solid/download-trigger'

export const WithPromise = () => {
  const fetchImage = async () => {
    const response = await fetch('https://picsum.photos/200/300')
    return response.blob()
  }

  return (
    <DownloadTrigger data={fetchImage} fileName="random-image.jpg" mimeType="image/jpeg">
      Download Image
    </DownloadTrigger>
  )
}

<script setup lang="ts">
import { DownloadTrigger } from '@ark-ui/vue/download-trigger'

const fetchImage = async () => {
  const response = await fetch('https://picsum.photos/200/300')
  return response.blob()
}
</script>

<template>
  <DownloadTrigger :data="fetchImage" fileName="random-image.jpg" mimeType="image/jpeg">Download Image</DownloadTrigger>
</template>