1. 程式人生 > >vue+element-ui專案中如何勾選表格資料匯出到excel表格

vue+element-ui專案中如何勾選表格資料匯出到excel表格

        在專案中,我們會將查詢資料以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' }))
    ...
})