vue-以文件流-blob-的形式-下载-导出文件操作

下面是详细的讲解“vue以文件流blob的形式下载导出文件操作”的完整攻略，包括原理、实现步骤以及示例说明。

一、原理

在前端中，可以通过blob对象来导出文件，同时，也可以通过axios库将数据流转化为blob对象，再进行导出，这个流程涉及到以下几个步骤：

1. 用户发起下载文件的请求
2. 前端向服务器发送请求，获取要导出的文件数据
3. 前端将数据流转化为blob对象
4. 前端生成URL，通过a标签下载文件

二、实现步骤

1. 请求后端数据

首先，我们需要向后端发送请求获取文件数据，这里以axios库为例：

axios({
  method: 'get',
  url: '/api/exportFile',
  responseType: 'blob', // 指定数据格式
})
.then((res)=>{
 //TODO
})

2. 将数据流转化为blob对象

当我们获取得到了服务器返回的文件数据时，接下来需要将其转化为blob对象：

const blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'})

Blob是一种二进制数据，我们可以将服务器返回的数据封装为一个Blob对象，其中传入的第一个参数为数组类型，可以设置多个数据流组成一个数组传入，第二个参数type用于指定要导出文件的文件类型。

3. 生成URL，a标签下载文件

最后，我们可以通过URL.createObjectURL方法来生成文件的URL，将其赋值给一个a标签的href属性，通过设置download属性来实现文件的下载。

const downloadElement = document.createElement('a')
const href = URL.createObjectURL(blob) // 生成文件的 URL
downloadElement.href = href // 设置 href
downloadElement.download = fileName // 设置 download
document.body.appendChild(downloadElement)
downloadElement.click() // 模拟点击事件
document.body.removeChild(downloadElement) // 下载完成后移除a标签元素

三、示例说明

下面给出两个不同类型文件的实例，一个是下载excel文件，一个是下载pdf文件：

下载excel文件

import axios from 'axios'

export default {
  methods: {
    exportExcel() {
      axios({
          url: '/api/export/excel',
          method: 'get',
          responseType: 'blob'
        })
        .then(res => {
          let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'})
          let downloadElement = document.createElement('a')
          let href = URL.createObjectURL(blob) // 创建下载链接
          downloadElement.href = href
          downloadElement.download = 'export.xlsx'
          document.body.appendChild(downloadElement)
          downloadElement.click() // 模拟点击下载
          document.body.removeChild(downloadElement) // 下载完成后移除元素
          URL.revokeObjectURL(href) // 释放URL对象
        })
    }
  }
}

下载pdf文件

import axios from 'axios'

export default {
  methods: {
    exportPDF() {
      axios({
          url: '/api/export/pdf',
          method: 'get',
          responseType: 'blob'
        })
        .then(res => {
          let blob = new Blob([res.data], {type: 'application/pdf'})
          let downloadElement = document.createElement('a')
          let href = URL.createObjectURL(blob) // 创建下载链接
          downloadElement.href = href
          downloadElement.download = 'export.pdf'
          document.body.appendChild(downloadElement)
          downloadElement.click() // 模拟点击下载
          document.body.removeChild(downloadElement) // 下载完成后移除元素
          URL.revokeObjectURL(href) // 释放URL对象
        })
    }
  }
}

以上就是如何利用Vue实现以文件流blob形式下载导出文件操作的攻略，希望对您有所帮助。