vue+element-ui專案中如何勾選表格資料匯出到excel表格
阿新 • • 發佈:2018-12-14
在專案中,我們會將查詢資料以table的形式顯示在頁面中,有時候需要匯出頁面資料或者勾選table的複選框來選擇要匯出的資料。element-ui的table元件本身提供了方法,當勾選每行前面的複選框時,獲得他的id。
當我們點選匯出按鈕時,觸發方法,傳送匯出請求,將我們需要匯出的資料的id傳給後端介面,介面返回要匯出的資料流。
我們傳送請求的時候需要設定,responseType:'blob',
當我們拿到介面返回來的資料流時,我們需要轉換成Blob格式地址,再繫結到window.location.href.
程式碼如下:
//請求時需要設定responseType axios({ method: 'post', url: 'xxx', params: {id:xxx}, responseType: 'blob' }).then(response => { ... //這句是將介面返回的資料流轉換成url地址 window.location.href = window.URL.createObjectURL(new Blob([response.data], { type: 'application/vnd.ms-excel' })) ... })