zoukankan      html  css  js  c++  java
  • vue 用axios实现调用接口下载excel

    了解的方式有两种:

    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)
            });
        }
    }

    注:如果上面的方法还是乱码,请尝试一下方法:

     1.如果装了mockjs,把mockjs去掉

     2.使用原生的js请求

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

  • 相关阅读:
    linux查找日志技巧
    路径选择算法|Floyd算法|Dijkstras算法(带GUI界面带实验报告)
    待整理
    ClassLoader类加载解惑
    SAX解析xml
    DOM 表单应用
    网站前端优化14条
    用wordpress制作网站的总结
    海豚浏览器前端面试总结
    程序员的美妙生活
  • 原文地址:https://www.cnblogs.com/bear-blogs/p/10480478.html
Copyright © 2011-2022 走看看