適用於主流瀏覽器匯出Excel表格的程式碼
阿新 • • 發佈:2018-12-18
適用於主流瀏覽器匯出Excel表格的程式碼
問題描述:
有時候寫專案會遇到在網頁點選按鈕可以把網頁上顯示的table表格資料從瀏覽器上直接下載下來,
優點是使用者可以自由選擇有價值的資料進行下載到使用者本地然後用Excel軟體進行資料的各種操作.
有了需求,那麼問題就來了,怎樣寫適用於主流瀏覽器的匯出表格程式碼,或者是其他瀏覽器導不出表格的問題如歌解決呢?
問題程式碼:
問題現象:
我在做專案是就遇到了專案需求使用者點選按鈕匯出Excel表格,以上是當時寫的程式碼;
程式碼寫完後,谷歌和IE edge 都沒有問題,可以順利匯出來,但是火狐和IE瀏覽器導不出Excel表格
後來也是多方查詢資料,終於解決了這個問題,程式碼如下:
問題解決:
Axios.post('allot/showResult//excel',fd,{responseType:'arraybuffer'})
.then(res => {
// // console.log(res)
let fileName = "調撥詳情.xls"
let blob = new Blob([res.data],{type:'application/x-xls'})
if (window.navigator. msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName)
} else {
let link = document.createElement('a')
link.download = fileName
link.href = window.URL.createObjectURL(blob)
document.body.appendChild(link)
link. click()
window.URL.revokeObjectURL(link.href)
}
})
其實,就是增加了一行程式碼,細心的小夥伴肯定一經發現了:
document.body.appendChild(link)
我當時查到的資料跟我程式碼結構差不多,但是還比我多好多行程式碼,我為了弄清楚一個一個試用的,終於讓我的程式碼改動最少就能實現了,happy~
然後,這一行程式碼的作用就是火狐瀏覽器在匯出表格的時候會有一彈框出來,這行程式碼就起這個作用的,如下圖:
IE導不出表格是匯出方式的判斷先後問題
要先判斷IE,然後再判斷非IE的匯出方式
if(window.navigator.msSaveOrOpenBlob) { // 而不是'download' in document.createElement('a')
navigator.msSaveBlob(blob, fileName)
} else {
// 其他程式碼
}
希望這些能幫到大家~