vue 项目实现文件下载

前端的html部分

<div class="file" v-for="item in jiaoanList" :key="item.name">
	.....
	// 这里从后台传过来的数据是文件的信息（xxx.doc/xxx.pdf..等）
	<el-col :span="6">
	  <a href="#">
	    <div class="operate-sigle" @click="download(item.data)">
	    // item.data 是name信息
	      <img class="operate-pic" src="../../assets/xiazai.png" alt="">
	      <span>下载</span>
	    </div>
	  </a>
	</el-col>
</div>

前端页面的效果图

实现文件下载的js部分

async download (name) {
      const res = await this.$http.post('teachingplan/download',
        {
          filename: name
        }, {
          responseType: 'blob', // 二进制流文件，一定要设置成blob，默认是json
          'Content-Type': 'application/json'
        }
      )
      if (res.status === 200) {
        // this.$message.success('获取到了下载数据')
        console.log('教案的下载信息：', res)
        // 创建Blob对象
        var blob = new Blob([res.data])
        console.log('blob', blob)
        var url = window.URL.createObjectURL(blob)
        // 创建a标签
        var aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.href = url
        aLink.setAttribute('download', name)
        console.log('aLink', aLink)
        document.body.appendChild(aLink)
        aLink.click()
        // 下载完成,  移除创建的元素
        document.body.removeChild(aLink)
        // 			 也要释放Blob对象
        window.URL.revokeObjectURL(url)
      }
    }
    Blob对象的基本属性：
	size ：Blob对象包含的字节数。(readonly)
	type ： Blob对象包含的数据类型MIME，如果类型未知则返回空字符串。

后台返回的数据

创建包装好了的a标签

这样就实现了点击直接下载文件~