Appearance

Streamsaver Plugin ​

File Information ​

  • Path: plugins/streamsaver.client.js
  • Purpose: StreamSaver library integration for file downloads

Overview ​

The Streamsaver plugin integrates the StreamSaver library, which enables streaming file downloads directly to the user's download folder without storing the entire file in memory. This is especially useful for large file downloads.

Key Features ​

  1. Streaming Downloads

    • Downloads without memory storage
    • Handles large files
    • Direct to download folder

  2. Global Access

    • Available as $streamSaver
    • Client-side only
    • Injected globally

Usage Examples ​

Basic Download ​

javascript
// In component
async downloadLargeFile(fileId) {
  const response = await this.$axios.get(
    `/api/files/${fileId}/download`,
    { responseType: 'blob' }
  )
  
  const fileStream = this.$streamSaver.createWriteStream('filename.pdf')
  const writer = fileStream.getWriter()
  
  writer.write(await response.data.arrayBuffer())
  writer.close()
}

Streaming Download ​

javascript
// In component
async streamDownload(url, filename) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  const stream = this.$streamSaver.createWriteStream(filename)
  const writer = stream.getWriter()
  
  const pump = async () => {
    const { done, value } = await reader.read()
    if (done) {
      writer.close()
    } else {
      writer.write(value)
      return pump()
    }
  }
  
  pump()
}

Integration Points ​

  • File Downloads: Large file downloads
  • Asset Downloads: Asset file downloads
  • Bulk Downloads: Multiple file downloads

Notes for Development ​

  • Plugin is client-only (.client.js)
  • Available as $streamSaver globally
  • Useful for large files
  • Reduces memory usage
  • Direct to download folder