前端菜鸡流水账日记 --- 导出功能

哈喽哇大家，这是我在CSDN发布文章的第一天也是发布的第一条，希望之后会收获许多志同道合的朋友，我是一个前端菜鸡，正在努力的学习中，发布的也都是我自己工作学习中遇到的问题，就当流水账日记看吧~~~~

-------------------------------------------------------------------------------------------------------------------------------

问题：导出功能的实现 -- 调接口，下载文件excel

------------------------------------------------------------------------------------------------------------------------------

const Download = () => {
    Modal.confirm({
        title: "您是否确定导出雨量计数据？",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", {
            style: "color:red;height:30px",
        }),
        onOk() {
            const params = {
                name: nameValue.value,
                startTime:gonextTime.value[0].format("YYYY-MM-DD HH:mm:ss"),
                endTime:gonextTime.value[1].format("YYYY-MM-DD HH:mm:ss")
            };
            let url = `/api/fjj/data/DataYLExport?name=${params.name}&startTime=${params.startTime}&endTime=${params.endTime}`
            let aDom = document.createElement('a')
            aDom.href = url
            // window.location.href = url  //也ke'y
            aDom.download = `${nameValue.value}.xlsx`
            aDom.click()
        },
        onCancel() {
            console.log("Cancel");
        },
        class: "modal-pt-40",
    });
};

这就是一个导出功能的完整代码了，是列表的导出

其中接口是get请求的，参数直接拼接，这里需要特别记忆下，因为我每次都记不住，用？拼接，${}参数名字，&符号连接

            let url = `/api/fjj/data/DataYLExport?name=${params.name}&startTime=${params.startTime}&endTime=${params.endTime}`

因为浏览器是不支持直接导出文件流的，所以需要新建一个标签，将url地址给新建标签的href --见adom ，或者是直接用window.location.href= url也可以实现效果

需要注意下

import { Modal } from "ant-design-vue";

这个的使用需要先导入在使用，否则会报错

文件流的判断方法是看这里标注的，如果是这个说明是文件流，就不能按照正常的代码的逻辑进行调用

这就是我遇到的问题啦~~~但是也仅限于我自己遇到的和解决的有其他的好办法，也欢迎大家补充讨论哦