1. 程式人生 > >vue 用axios實現調用接口下載excel

vue 用axios實現調用接口下載excel

obj splay imp child cati 設置 tails remove a標簽

了解的方式有兩種:

1. 用a標簽,href設置為後端提供的excel接口

<a href="excel接口">導出</a>

簡單方便,缺點就是當有token校驗時,不適合

2. 用axios

把token放在請求的header裏邊

import axios from axios
import { getToken } from js-cookie;

methods: {
    exportExcel () {
        let url = http...,
            token = getToken();
        axios.
get(url, { headers:{ "Admin_token":token }, responseType: blob, //二進制流 }).then(function (res) { if(!res) return let blob = new Blob([res.data], {type: application/vnd.ms-excel;charset=utf-8}) let url
= window.URL.createObjectURL(blob); let aLink = document.createElement("a"); aLink.style.display = "none"; aLink.href = url; aLink.setAttribute("download", "excel.xls"); document.body.appendChild(aLink); aLink.click(); document.body.removeChild(aLink); window.URL.revokeObjectURL(url); }).
catch(function (error) { console.log(error) }); } }

參考:https://blog.csdn.net/xuesheng1610748/article/details/83865679

vue 用axios實現調用接口下載excel