前端下载文件写法

1，a标签下载，

<a href="https://cdn.shopify.com/s/files/1/1545/3617/files/SH01_User_Manaul.pdf" download="test.pdf">download</a>  download：该属性的值为下载文件的名字，可自定义，若不填则为默认文件名，添加该属性可进行下载，若不添加则会直接打开文件

2，获取接口，手动创建a标签

this.$axios({
    method: 'post',
    // header: { "Content-Type": "application/xlsx" }, // http请求类型
    headers: {
        t: localStorage.getItem('token', 'token'),
    },
    responseType: 'blob', // 返回格式，默认json，可选arraybuffer、blob、document、json、text、stream
    url:
        `xxxx?t=${this.t}&hyxlh=${this.hyxlh}&hylx=2`,   //添加相应的参数
})
    .then((res) => {
        console.log('下载', res)
        //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
        let blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel',
        })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
    })

 3.点击按钮下载

<button @click="downAll">
                    导出所有签到名单
                </button>

1.异步请求
downAll () {
                // let params = {}
                let token = localStorage.getItem('t')
                let courseId = localStorage.getItem('courseId')
                let t = decodeURIComponent(token)
                let hyxlh = decodeURIComponent(courseId)
                this.btnLoading = true
                // this.$message.loading('Action in progress..', 0)
                downloadAllSignInList({ hyxlh: hyxlh, hylx: 2 }).then(res => {
                    this.btnLoading = false
                    if (res.code == 0) {
                        let str = res.data
                        let url = this.locationProtocol + str + '&t=' + t
                        window.location.href = url
                    }

                })


            },

2.同步请求

/**
 * 往url后面添加参数
 * @param url : 要添加参数的url
 * @param name: 参数的名
 * @param value: 参数的值
 * @return: 返回url
 */
addUrlParam (url, name, value) {
    var url = url + ''
    url += (url.indexOf('?') === -1 ? '?' : '&') //判断url中是否有'?'
    url += encodeURIComponent(name) + '=' + encodeURIComponent(value) //拼接
    return url
}

let params = {} 
let token = localStorage.getItem('t') 
let courseId = localStorage.getItem('courseId') 
let hylx = 2 
console.log('token', token)
params.t = decodeURIComponent(token) 
params.hyxlh = decodeURIComponent(courseId) 
params.hylx = decodeURIComponent(hylx) 
let dataDownloadUrl = '/meeting/webconsole/meetingSignInterface/downloadAllSignInList'//接口url 

for (let key in params) { 
   dataDownloadUrl = this.addUrlParam(dataDownloadUrl, key, params[key]) //传参

} 
window.location.href = dataDownloadUrl //下载

前端 下载文件写法

前端下载文件写法