JavaScript前端下载方式

155 阅读1分钟

第一种,下载xlsx文件

this.$http({

url: this.$http.adornUrl(downloadPath),

method: 'GET',

responseType: 'blob'

}).then((res) => {

var blob = new Blob([res.data], {

type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream'

})

var a = document.createElement('a')

var url = URL.createObjectURL(blob)

a.href = url

a.download = 'xxx.xlsx'

a.click()

window.URL.revokeObjectURL(url)

})

第二种,下载.lic、.cert文件

this.$http({

url: this.$http.adornUrl('/license/generate/' + row.id),

method: 'post',

responseType: 'blob',

transformResponse: [function(data) {

    var reader = new FileReader()

    reader.readAsText(data, 'GBK')

    reader.onload = function(e) {

        // console.log(e)

    }

    return data

}],

headers: {

    'X-Requested-With': 'XMLHttpRequest',

    'Content-Type': 'application/x-www-form-urlencoded'

},

data: this.$http.adornParams(),

}).then(({ data }) => {

if (data) {

    let blob = new Blob([data])

    let url = URL.createObjectURL(blob)

    const elink = document.createElement('a')

    elink.href = url

    if( row.authType == 1) {

        elink.download = 'license.lic'

    } else if ( row.authType == 2){

        elink.download = 'license.cert'

    }

    elink.click()

    elink.remove()

}

})

第三种,下载其他文件

this.$http({

url:this.$http.adornUrl(downloadPath),

method:'get',

responseType: 'blob'

}).then( res =>{

let url = window.URL.createObjectURL(new Blob([res.data]))

let link = document.createElement('a')

link.style.display = 'none'

link.href = url

link.setAttribute('download', downloadFileName)

document.body.appendChild(link)

link.click()

})

/和上面是一样的**/ this.$http({

url: this.$http.adornUrl(downloadPath),

method: 'post',

params: this.$http.adornParams()

}).then(({ data }) => {

let blob = new Blob([data]);

let url = URL.createObjectURL(blob)

const elink = document.createElement('a')

elink.href = url;

elink.download = 'NeoKylin_Mest_Linux_amd64.fp'

elink.click()

})