vue中後臺get介面前端怎麼處理
阿新 • • 發佈:2020-09-02
最近在工作中藥實現匯出表格這個功能,後端小哥哥已經實現了介面完成,但是在前端呼叫的時候出現了這個問題
亂碼,現在給出以下解決方案:
1.在main.js中寫入匯出的公共方法
// 匯出Excel公用方法 export function exportMethod(data) { axios({ method: data.method, url: `${data.url}${data.params ? '?' + data.params : ''}`, responseType: 'blob' }).then((res) => {const link = document.createElement('a') let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'}) link.style.display = 'none' link.href = URL.createObjectURL(blob) // link.download = res.headers['content-disposition'] //下載後文件名 link.download = data.fileName //下載的檔名 document.body.appendChild(link) link.click() document.body.removeChild(link) }).catch(error => { this.$Notice.error({ title: '錯誤', desc: '網路連線錯誤' }) console.log(error) })
2、在需要的介面引入這個方法:
import { exportMethod } from'../../main'
3、寫入點選方法:
exportTable(){ let myObj = { method: 'get', url: url, //請求地址 fileName: '小區表格', params: `district_id=${this.district_id}&police_id=${this.police_id}` } exportMethod(myObj) }
OK,這樣就完成啦!親測有效哦