关于前端接口实现文件（excel等文件）的下载。

excel下载：
get请求：
window.location = 'http://*.*.*.*:8772/dataAsset/export?assetType=' + localStorage.getItem('assetType')
post请求：
<el-button size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
//method方法
handleExport(row){
const url="/user/downloadExcel"
const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
exportExcel(url,options)
}
/**
* 封装导出Excal文件请求
* @param url
* @param data
* @returns {Promise}
*/
//api.js
export function exportExcel(url, options = {}) {
return new Promise((resolve, reject) => {
console.log(`${url} 请求数据，参数=>`, JSON.stringify(options))
axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
axios({
method: 'post',
url: url, // 请求地址
data: options, // 参数
responseType: 'blob' // 表明返回服务器返回的数据类型
}).then(
response => {
resolve(response.data)
let blob = new Blob([response.data], {
type: 'application/vnd.ms-excel'
})
console.log(blob)
let fileName = Date.parse(new Date()) + '.xlsx'
if (window.navigator.msSaveOrOpenBlob) {
// console.log(2)
navigator.msSaveBlob(blob, fileName)
} else {
// console.log(3)
var link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
//释放内存
window.URL.revokeObjectURL(link.href)
}
},
err => {
reject(err)
}
)
})
}

 

文本下载：.txt

element.click()火狐浏览器不支持

1.最简单的，有文件的地址，直接使用a标签实现下载（通用模板前端本地下载）：

 

    <a href="/user/test/xxxx.xls" download="文件名.xls">点击下载</a>

 

  但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”;

如果再vue项目中需要下载文件需要放在public文件夹下 需要下载的路径是相对于index.html文件路径 否则会提示下载文件未找到

 

2.window.open()方法，后端提供下载接口：

 

html：

 

<button type="button" id="btn1">window.open()方法下载</button>

 

js：

（最简单：window.location.href="xxxxx后端给的下载地址"）

var $eleBtn1 = $("#btn1");

 

 

//已知一个下载文件的后端接口：

https://codeload.github.com/douban/douban-client/legacy.zip/master

//方法一：window.open()

$eleBtn1.click(function(){

    var url = "https://codeload.github.com/douban/douban-client/legacy.zip/master";

    window.open(url);

});

 

3.通过form表单提交的方式：

 

 

html：

 

<button type="button" id="btn2">form方法下载</button>

 

js：

 

var $eleBtn2 = $("#btn2");

 

//已知一个下载文件的后端接口：

https://codeload.github.com/douban/douban-client/legacy.zip/master

$eleBtn2.click(function(){

    var $eleForm = $("<form method='get'></form>");

 

    $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");

 

    $(document.body).append($eleForm);

 

    //提交表单，实现下载

    $eleForm.submit();

});

 

移动端文件下载

需求

在H5页面中添加下载按钮，点击按钮下载对应文件

• 1

常用方法：动态生成a标签，把链接地址给到href属性，触发一个click事件，进行下载
由于文件数据是通过接口请求回来的数据流,application/octet-stream类型，需要转换一下来使用：

	download () {
		let link = document.createElement('a')
        link.style.display = 'none'
        // 请求文件数据，返回类型为blob数据流，类型application/octet-stream
        link.href = window.URL.createObjectURL(res.data)
        link.download = ''//文件名
        document.head.appendChild(link)
        link.click()
        document.head.removeChild(link)
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

在pc端上调试没有问题，但放到手机上测试时就会出现各种问题，比如点击下载后没有反应，异或是被识别为非法链接不给下载，又或是下载完成后的文件格式不对

在各方查找资料以及同事间讨论之后，发现直接用绝对地址进行下载可行！

download () {
		let link = document.createElement('a')
        link.style.display = 'none'
        let url = `.....`//绝对地址
        link.href = url
        link.download = ''//文件名
        document.head.appendChild(link)
        link.click()
        document.head.removeChild(link)
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

手机测试后发现没问题，只有uc浏览器不支持打开zip文件而弹出提示，无法下载

附上资料来源截图一张