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文件而彈出提示，無法下載
附上資料來源截圖一張