[React+andt]React引入antd组件

这篇博客介绍了如何在React项目中安装和使用Ant Design库,包括下载Ant Design、引入组件和样式,以及展示一个基本的按钮用例。

一、下载

npm install antd --save

二、引入+使用

import {Button} from "antd";
import "antd/dist/antd.min.css"

class App extends Component {
    render() {
        return (
            <div>
                <Button type="primary">Primary Button</Button>
            </div>
        );
    }
}

export default App;

要使用 React.js 和 Ant Design 实现浏览器多文件(word、ppt、excel、pdf、txt)预览功能,可以按照不同文件类型分别采用不同的方法。 ### PDF 文件预览 可以使用 `react-pdf` 来实现 PDF 文件的预览,结合 Ant Design 的 `Modal` 组件展示预览窗口。 ```jsx import React, { useState } from 'react'; import { Modal, Button } from 'antd'; import { Document, Page } from 'react-pdf'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; const PdfPreview = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [numPages, setNumPages] = useState(null); const onDocumentLoadSuccess = ({ numPages }) => { setNumPages(numPages); }; const showPreview = () => { setIsModalOpen(true); }; const handleOk = () => { setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; return ( <> <Button onClick={showPreview}>预览 PDF</Button> <Modal title="PDF 预览" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={800} > <Document file="your_pdf_file.pdf" onLoadSuccess={onDocumentLoadSuccess} > {Array.from(new Array(numPages), (el, index) => ( <Page key={`page_${index + 1}`} pageNumber={index + 1} /> ))} </Document> </Modal> </> ); }; export default PdfPreview; ``` ### TXT 文件预览 可以使用 `<pre>` 标签展示 txt 文件内容,同样结合 Ant Design 的 `Modal` 组件。 ```jsx import React, { useState, useEffect } from 'react'; import { Modal, Button } from 'antd'; const TxtPreview = () => { const [isModalOpen, setIsModalOpen] = useState(false); const [txtContent, setTxtContent] = useState(''); useEffect(() => { const fetchTxt = async () => { try { const response = await fetch('your_txt_file.txt'); const text = await response.text(); setTxtContent(text); } catch (error) { console.error('Error fetching txt file:', error); } }; fetchTxt(); }, []); const showPreview = () => { setIsModalOpen(true); }; const handleOk = () => { setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; return ( <> <Button onClick={showPreview}>预览 TXT</Button> <Modal title="TXT 预览" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} > <pre>{txtContent}</pre> </Modal> </> ); }; export default TxtPreview; ``` ### Word、PPT、Excel 文件预览 对于 word、ppt、excel 文件,可以借助第三方服务将其转换为 HTML 格式进行预览,例如腾讯云的文档 HTML 预览服务,文档 HTML 预览地址为:`https://bucketname.cos.ap-shanghai.myqcloud.com/filename?ci-process=doc-preview&dstType=html`,详情可查看文档 HTML 预览 API 文档 [^2]。 ```jsx import React, { useState } from 'react'; import { Modal, Button } from 'antd'; const OfficePreview = () => { const [isModalOpen, setIsModalOpen] = useState(false); const officeUrl = 'https://bucketname.cos.ap-shanghai.myqcloud.com/filename?ci-process=doc-preview&dstType=html'; const showPreview = () => { setIsModalOpen(true); }; const handleOk = () => { setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; return ( <> <Button onClick={showPreview}>预览 Office 文件</Button> <Modal title="Office 文件预览" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={800} > <iframe src={officeUrl} width="100%" height="500px" /> </Modal> </> ); }; export default OfficePreview; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CC_Waiting

我,大学未工作,感谢您的打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值