vue实现下载平台

Vue 实现下载平台的方法

前端实现下载功能

在 Vue 中实现文件下载功能，通常可以通过以下方式完成：

1. 使用 <a> 标签下载

   <a :href="fileUrl" download="filename.ext">下载文件</a>

   其中 fileUrl 是文件的完整 URL 路径，download 属性指定下载后的文件名。

2. 通过 JavaScript 动态创建下载链接

   downloadFile(url, filename) {
     const link = document.createElement('a')
     link.href = url
     link.download = filename
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
   }

3. 使用 axios 处理二进制文件下载

   axios({
     url: '/api/download',
     method: 'GET',
     responseType: 'blob'
   }).then(response => {
     const url = window.URL.createObjectURL(new Blob([response.data]))
     const link = document.createElement('a')
     link.href = url
     link.setAttribute('download', 'file.pdf')
     document.body.appendChild(link)
     link.click()
   })

后端接口实现

后端需要提供文件下载的 API 接口，以下是常见实现方式：

1. Node.js Express 实现

   app.get('/download', (req, res) => {
     const file = `${__dirname}/files/sample.pdf`
     res.download(file)
   })

2. Spring Boot 实现

   

   @GetMapping("/download")
   public ResponseEntity<Resource> downloadFile() {
     Resource resource = new FileSystemResource("path/to/file");
     return ResponseEntity.ok()
         .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + resource.getFilename() + "\"")
         .body(resource);
   }

大文件分片下载

对于大文件下载，可以考虑实现分片下载功能：

1. 前端分片请求

   async function downloadLargeFile(url, fileName) {
     const response = await fetch(url)
     const reader = response.body.getReader()
     const contentLength = +response.headers.get('Content-Length')
     let receivedLength = 0
     const chunks = []
   
     while(true) {
       const {done, value} = await reader.read()
       if(done) break
       chunks.push(value)
       receivedLength += value.length
       console.log(`Received ${receivedLength} of ${contentLength}`)
     }
   
     const blob = new Blob(chunks)
     const downloadUrl = window.URL.createObjectURL(blob)
     const a = document.createElement('a')
     a.href = downloadUrl
     a.download = fileName
     a.click()
   }

2. 后端支持 Range 请求

   app.get('/large-file', (req, res) => {
     const filePath = 'path/to/large/file'
     const stat = fs.statSync(filePath)
     const fileSize = stat.size
     const range = req.headers.range
   
     if(range) {
       const parts = range.replace(/bytes=/, "").split("-")
       const start = parseInt(parts[0], 10)
       const end = parts[1] ? parseInt(parts[1], 10) : fileSize-1
       const chunksize = (end-start)+1
       const file = fs.createReadStream(filePath, {start, end})
       const head = {
         'Content-Range': `bytes ${start}-${end}/${fileSize}`,
         'Accept-Ranges': 'bytes',
         'Content-Length': chunksize,
         'Content-Type': 'video/mp4',
       }
       res.writeHead(206, head)
       file.pipe(res)
     } else {
       const head = {
         'Content-Length': fileSize,
         'Content-Type': 'video/mp4',
       }
       res.writeHead(200, head)
       fs.createReadStream(filePath).pipe(res)
     }
   })

下载进度显示

在 Vue 中实现下载进度显示：

axios({
  url: '/api/download',
  method: 'GET',
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    this.downloadProgress = percentCompleted
  }
}).then(response => {
  // 处理下载完成后的逻辑
})

文件下载平台完整实现方案

1. 文件列表展示 使用 Vue 组件展示可下载文件列表，每个文件项包含下载按钮。

   

2. 权限控制 在发送下载请求前检查用户权限，可以使用 Vuex 或 Pinia 管理用户状态。

3. 下载记录 每次下载完成后，调用 API 记录下载日志。

4. 断点续传 对于大文件，实现断点续传功能，保存已下载的部分。

5. 多线程下载 使用 Web Worker 实现多线程下载加速。

6. 错误处理 添加下载失败的重试机制和错误提示。

以上方法可以根据实际需求组合使用，构建完整的文件下载平台功能。