get导出文件

    /*
     * get下载文件
     * @param url:地址
     * @param data:参数
     */
    async getDownFile(url, data){
        return axios({
            method: 'get',
            params: data,
            dataType: 'json',
            url: url,
            responseType: 'blob',
            headers: {
                // eslint-disable-next-line
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            }
        })
    },




    exportFile(){
        let url = `${window.baseUrl}/es/abnormalAlarm/export`;

        // ?pageNum=${this.listQuery.pageNum}&pageSize=${this.listQuery.pageSize}&deviceStation=${this.listQuery.deviceStation || ''}&videoGuids=${this.listQuery.videoGuids || ''}

        let params = {
            pageNum:this.listQuery.pageNum,
            pageSize:this.listQuery.pageSize,
            deviceStation:this.listQuery.deviceStation || '',
            videoGuids:this.listQuery.videoGuids || '',
        }  
            this.api.deviceDownFile(url,params)
            .then((res) => {
                console.log(res,'res')
                let url = window.URL.createObjectURL(new Blob([res.data]));
                let link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                link.setAttribute("download", this.$route.meta.title + ".xlsx");
        
                document.body.appendChild(link);
                link.click();
            })
            .catch(() => {
                this.$message.error("出现错误!");
            });

    },

### 在 Vue3 中通过 GET 请求实现文件导出 为了实现在 Vue3 应用程序中使用 GET 方法来导出文件,可以采用多种方式。一种简单的方法是利用浏览器内置的 `window.location.href` 或者动态创建 `<a>` 标签的方式触发下载行为。 当需要发起 HTTP 请求并与服务器交互时,则可以通过配置 Axios 的响应类型为 `blob` 来处理二进制数据流,并将其转换成可被用户保存至本地系统的文件[^5]。 以下是具体实现方案: #### 使用 window.location.href 方式 这种方式适用于 URL 参数可以直接携带所需信息的情况。 ```javascript // 假设这是你要访问的服务端API路径 const exportUrl = `${process.env.VUE_APP_API_HOST}/api/export`; // 设置查询参数(如果有的话) const params = new URLSearchParams({ paramKey: 'paramValue' }); // 将参数附加到URL后面并重定向页面跳转以启动下载过程 window.location.href = `${exportUrl}?${params.toString()}`; ``` #### 动态创建 a 链接元素 这种方法更加灵活,允许更复杂的操作如指定文件名等。 ```html <template> <!-- 组件模板 --> </template> <script setup lang="ts"> import { ref } from 'vue'; function handleDownloadFile(){ const url = `${process.env.VUE_APP_API_HOST}/api/export`; // 创建隐藏的<a>标签用于模拟点击事件触发下载动作 var linkElement = document.createElement('a'); linkElement.style.display = 'none'; linkElement.href = url; linkElement.download = "filename"; // 自定义文件名称 // 添加到DOM树以便能够触发click() document.body.appendChild(linkElement); // 执行点击事件开始下载流程 linkElement.click(); // 下载完成后移除临时节点保持页面整洁 document.body.removeChild(linkElement); } </script> ``` 这两种方法都适合于简单的场景,在实际应用中可能还需要考虑错误处理机制以及对于不同类型的文件做出适当调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值