1. 程式人生 > 實用技巧 >vue中後臺get介面前端怎麼處理

vue中後臺get介面前端怎麼處理

最近在工作中藥實現匯出表格這個功能,後端小哥哥已經實現了介面完成,但是在前端呼叫的時候出現了這個問題

亂碼,現在給出以下解決方案:

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,這樣就完成啦!親測有效哦