export default function () {
let point = reactive({ x: 0, y: 0 })
function usePoint(e) {
point.x = e.x
point.y = e.y
}
onMounted(() => {
window.addEventListener('mousemove', usePoint)
})
onBeforeUnmount(() => {
window.removeEventListener('mousemove', usePoint)
})
return point
}
import { ElNotification } from "element-plus";
/**
* @description 接收数据流生成 blob,创建链接,下载文件
* @param {any} data 导出的文件blob数据 (必传)
* @param {String} tempName 导出的文件名 (必传)
* @param {Boolean} isNotify 是否有导出消息提示 (默认为 true)
* @param {String} fileType 导出的文件格式 (默认为.xlsx)
* */
interface useDownloadParam {
data: any;
tempName: string;
isNotify?: boolean;
fileType?: string;
}
//下载
export const useDownload = async ({ data, tempName,isNotify = true, fileType = ".xlsx" }: useDownloadParam) => {
if (isNotify) {
ElNotification({
title: "温馨提示",
message: "如果数据庞大会导致下载缓慢哦,请您耐心等待!",
type: "info",
duration: 3000
});
}
try {
const blob = new Blob([data]);
// 兼容 edge 不支持 createObjectURL 方法
if ("msSaveOrOpenBlob" in navigator) return window.navigator.msSaveOrOpenBlob(blob, tempName + fileType);
const blobUrl = window.URL.createObjectURL(blob);
const exportFile = document.createElement("a");
exportFile.style.display = "none";
exportFile.download = `${tempName}${fileType}`;
exportFile.href = blobUrl;
document.body.appendChild(exportFile);
exportFile.click();
// 去除下载对 url 的影响
document.body.removeChild(exportFile);
window.URL.revokeObjectURL(blobUrl);
} catch (error) {
console.log(error);
}
};
//组件中使用
<script setup lang="ts">
import { useDownload } from "@/hooks/useDownload";
const userForm = reactive({})
const userListExport = () => {
new Promise(resolve => {
$Request({
url: $Urls.userListExport,
method: "post",
data: userForm,
responseType: "blob"
}).then((res: any) => {
useDownload({
data: res.data,
tempName:"用户列表"
});
resolve(res);
});
});
};
</script>
vue3 hooks demo
于 2023-10-07 16:09:18 首次发布