vue页面导出excel文件流

最新推荐文章于 2025-07-01 21:04:37 发布

峰晨朴朴

最新推荐文章于 2025-07-01 21:04:37 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/kh6417/article/details/107306301

vue 专栏收录该内容

4 篇文章

订阅专栏

描述

项目中用到了单页面应用，使用axios请求，需要做一个excel文件流导出，完整代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>单页面应用</title>
    </head>
    <body>
        <div id="app">
            123
        </div>
    </body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
            },
            created(){
                console.log(123)
                axios.get( 'http://192.168.3.91:8090//export1?id=1',{'responseType': 'blob'} ).then(
                    function(response){
                        console.log(response)
                        let a = document.createElement('a');
                        let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); 
                        let objectUrl = URL.createObjectURL(blob);
                        a.setAttribute("href",objectUrl);
                        a.setAttribute("download", '计划单电子表格.xlsx');
                        a.click();
                    }
                )
            },
            methods:{
            }
        })
    </script>
</html>