关于前端接口实现文件（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页面中添加下载按钮，点击按钮下载对应文件

常用方法：动态生成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) } 

在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) } 

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

附上资料来源截图一张