react实现点击下载/导出,弹出选择保存文件路径弹窗

使用window自带的showSaveFilePicker方法

const opts = {
    types: [
        {
            accept: {
                'application/vnd.ms-excel': ['.xls'],
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
                    '.xlsx'
                ]
            }
        }
    ]
};
const fileHandle = await window.showSaveFilePicker(opts);
const writable = await fileHandle.createWritable({ keepExistingData: true }); // 创建可写入的文件对象

// 在这里写入文件内容
const text = new Blob(['你好,世界'], { type: 'text/plain;charset=UTF-8' });
await writable.write(text);
await writable.close();

具体参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showSaveFilePicker
文件格式参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,关于React Hook实现点击弹窗外隐藏弹窗,可以使用useRef和useEffect来实现clickoutside的效果。 首先,在弹窗组件中定义一个ref,用来获取弹窗元素的DOM节点: ```javascript const modalRef = useRef(null); ``` 然后在组件中使用useEffect监听document的点击事件,判断点击位置是否在弹窗之外,如果是,则隐藏弹窗: ```javascript useEffect(() => { function handleModalClickOutside(event) { if (modalRef.current && !modalRef.current.contains(event.target)) { // 点击弹窗外部,隐藏弹窗 hideModal(); } } document.addEventListener('click', handleModalClickOutside); return () => { document.removeEventListener('click', handleModalClickOutside); }; }, [hideModal]); ``` 这样,当点击document的时候,会触发handleModalClickOutside函数,判断点击位置是否在弹窗之外,如果是,则调用hideModal函数隐藏弹窗。 完整的代码如下: ```javascript import React, { useRef, useEffect } from 'react'; function Modal({ children, hideModal }) { const modalRef = useRef(null); useEffect(() => { function handleModalClickOutside(event) { if (modalRef.current && !modalRef.current.contains(event.target)) { hideModal(); } } document.addEventListener('click', handleModalClickOutside); return () => { document.removeEventListener('click', handleModalClickOutside); }; }, [hideModal]); return ( <div className="modal" ref={modalRef}> {children} </div> ); } export default Modal; ``` 使用的时候,只需要在父组件中传入hideModal函数即可: ```javascript import React, { useState } from 'react'; import Modal from './Modal'; function App() { const [showModal, setShowModal] = useState(false); function handleShowModal() { setShowModal(true); } function handleHideModal() { setShowModal(false); } return ( <div className="app"> <button onClick={handleShowModal}>Show Modal</button> {showModal && ( <Modal hideModal={handleHideModal}> <h1>Modal Content</h1> </Modal> )} </div> ); } export default App; ``` 这样,当点击弹窗外部时,会隐藏弹窗

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值