A标签下载文件

小付-小付

已于 2023-06-09 15:19:10 修改

阅读量624

点赞数

文章标签： javascript vue.js 开发语言前端 html5

于 2023-02-14 14:10:53 首次发布

本文链接：https://blog.csdn.net/weixin_58431406/article/details/129025454

版权

方法一：

 <el-button @click="download(item)" size="mini">下载</el-button>

item拿到的数据：

 download(item) {
            const downloadElement = document.createElement('a') //创建一个a标签
            downloadElement.href = item.resultSubmitFile //给a标签href赋值地址
            downloadElement.download = item.resultSubmitFileName // 给a标签添加一个download属性，属性值就是文件名称 
            document.body.appendChild(downloadElement) //将上面创建的a标签加入到body的尾部
            downloadElement.click()//执行a标签
        },

方法二：

<el-button @click="download(item.resultSubmitFile,item.resultSubmitFileName)" size="mini">下载</el-button>

import Cookies from 'js-cookie'
import axios from 'axios'

 download(url, fileName) {
     axios({
        method: 'get',
        url:'http://xxx.xxx.x.xx:8080/xxxxx/xxx/xxxxxx' ,
        responseType: 'blob',
        headers: {
          token: Cookies.get('token') || '',
        },
      }).then((res) => {
        const blob = new Blob([res.data], { type: res.data.type })
        const link = document.createElement('a')
        link.style.display = 'none'
        link.target = '_blank'
        link.href = URL.createObjectURL(blob)
        document.body.appendChild(link)
        link.download = item.resultSubmitFileName
        link.click()
        URL.revokeObjectURL(link.href)
        window.URL.revokeObjectURL(link)
      })
}