在VUE中实现文件下载并判断状态的方法

实现文件下载并判断状态的方法涉及到前端和后端两个方面，主要的实现步骤如下：

1. 前端部分：
   在Vue中发起文件下载请求，一般采用axios或者vue-resource等请求库来实现。具体步骤如下：

2. 安装axios或者vue-resource

npm install axios --save

npm install vue-resource --save

• 引入相关库

import axios from 'axios'

或

import VueResource from 'vue-resource'
Vue.use(VueResource)

• 发送文件下载请求

axios({
  method: 'get',
  url: '下载地址',
  responseType: 'blob' // 表示返回类型为二进制流
}).then(res => {
  // 处理文件流并下载
})

或

this.$http.get('下载地址', {responseType: 'blob'}).then(res => {
  // 处理文件流并下载
})

• 处理文件流并下载

let blob = new Blob([res.data], {type: 'application/octet-stream'})
let fileName = '文件名'
if ('download' in document.createElement('a')) {
  // 非IE下载
  let link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = fileName
  link.style.display = 'none'
  document.body.appendChild(link)
  link.click()
  URL.revokeObjectURL(link.href) // 释放URL对象
  document.body.removeChild(link) // 下载完成移除元素
} else {
  // IE10+下载
  navigator.msSaveBlob(blob, fileName)
}

1. 后端部分：
   后端需要根据前端的下载请求，将文件发送至前端。如采用express框架实现，具体的处理代码如下：

const express = require('express')
const app = express()

app.get('/download', (req, res) => {
  // 读取目标文件并发送
  const file = `${__dirname}/目标文件路径`
  res.download(file)
})

1. 判断状态：
   为了提高用户体验，在文件下载时需要对文件的下载状态进行判断处理。具体步骤如下：

2. 监听文件流下载进度

let loaded = 0
if (window.XMLHttpRequest) {
  let xhr = new XMLHttpRequest()
  xhr.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      let progress = event.loaded / event.total  // 下载进度
      loaded = event.loaded
    }
  }, false)
}

• 判断文件是否下载完成

let intervalId
let timer = () => {
  if (loaded === res.data.size) {  // 文件已下载完成
    clearInterval(intervalId)
  }
}
intervalId = setInterval(timer, 1000)

至此，完成了在Vue中实现文件下载并判断状态的方法。下面给出两个示例说明。

示例1：使用axios库下载文件

// 下载文件
axios({
  method: 'get',
  url: '下载地址',
  responseType: 'blob'
}).then(res => {
  // 处理文件流并下载
  let blob = new Blob([res.data], {type: 'application/octet-stream'})
  let fileName = '文件名'
  if ('download' in document.createElement('a')) {
    // 非IE下载
    let link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = fileName
    link.style.display = 'none'
    document.body.appendChild(link)
    link.click()
    URL.revokeObjectURL(link.href) // 释放URL对象
    document.body.removeChild(link) // 下载完成移除元素
  } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName)
  }

  // 监听文件流下载进度
  let loaded = 0
  if (window.XMLHttpRequest) {
    let xhr = new XMLHttpRequest()
    xhr.addEventListener('progress', function(event) {
      if (event.lengthComputable) {
        let progress = event.loaded / event.total  // 下载进度
        loaded = event.loaded
      }
    }, false)
  }

  // 判断文件是否下载完成
  let intervalId
  let timer = () => {
    if (loaded === res.data.size) {
      clearInterval(intervalId)
      console.log('下载完成')
    }
  }
  intervalId = setInterval(timer, 1000)
})

示例2：使用express框架发送文件

const express = require('express')
const app = express()

app.get('/download', (req, res) => {
  // 读取目标文件并发送
  const file = `${__dirname}/目标文件路径`
  res.download(file)

  // 监听文件流下载进度
  let loaded = 0
  res.on('data', data => {
    loaded += data.length
  })

  // 判断文件是否下载完成
  let timer = () => {
    if (loaded === res.headers['content-length']) {
      console.log('下载完成')
      clearInterval(intervalId)
    }
  }
  let intervalId = setInterval(timer, 1000)
})

// 启动服务器
app.listen(3000, () => {
  console.log('服务器已启动...')
})