浅谈vue中文件下载的几种方式及方法封装

下面是针对“浅谈vue中文件下载的几种方式及方法封装”的完整攻略。

1. 传统方式的文件下载

在Vue中，最简单的方式就是使用传统方式的文件下载，这种方式是利用a标签的download属性，直接下载文件。

<template>
  <div>
    <a :href="downloadUrl" download="example.png">下载示例</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      downloadUrl: 'http://example.com/example.png'
    }
  }
}
</script>

2. 使用XMLHttpRequest进行文件下载

另一种方式是使用XMLHttpRequest进行文件下载，这种方式实际上是通过ajax请求服务器获取文件，再将返回的二进制数据转化为文件保存在本地。

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile () {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', '/api/file', true)
      xhr.responseType = 'blob'

      xhr.onload = function () {
        const content = xhr.response
        const fileName = 'example.png'
        const url = window.URL.createObjectURL(new Blob([content]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
      }

      xhr.send()
    }
  }
}
</script>

3. 使用axios进行文件下载

可以使用axios来实现下载文件的功能，这种方式同样是利用XMLHttpRequest，只不过将其封装在了axios库里面。

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    downloadFile () {
      axios({
        method: 'get',
        url: '/api/file',
        responseType: 'blob'
      }).then(res => {
        const content = res.data
        const fileName = 'example.png'
        const url = window.URL.createObjectURL(new Blob([content]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
      })
    }
  }
}
</script>

4. 封装下载文件的方法

为了方便使用，可以将文件下载的功能封装成单独的方法，在需要使用的地方调用即可。

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
import { downloadFile } from '@/utils/download'

export default {
  methods: {
    downloadFile () {
      const url = '/api/file'
      const fileName = 'example.png'
      downloadFile(url, fileName)
    }
  }
}
</script>

上面引入了download.js文件中的downloadFile方法，代码如下：

function downloadFile (url, fileName) {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.responseType = 'blob'

  xhr.onload = function () {
    const content = xhr.response
    const url = window.URL.createObjectURL(new Blob([content]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    link.click()
  }

  xhr.send()
}

export { downloadFile }

以上就是浅谈Vue中文件下载的几种方式及方法封装的完整攻略，希望对你有所帮助。