【antd 3.x】upload上传组件预览pdf格式文件和下载ofd格式文件

本文介绍了在Ant Design 3.x的Upload组件中处理PDF和OFD文件的预览与下载。由于Upload组件不支持PDF和OFD的缩略图显示,建议使用模板图片代替。PDF预览通过iframe实现,而OFD文件由于浏览器不支持预览,只能提供下载。详细内容包括代码示例和操作演示。
摘要由CSDN通过智能技术生成

之前写过upload组件关于图片的上传和预览,本篇不再讲解,可见文章【antd 3.x】在表单中使用上传组件上传图片(文件)和预览功能

本篇文章主要内容:
是关于pdf和ofd格式的文件的预览和下载,浏览器不支持预览ofd格式文件,只能下载。

1、首先声明,upload组件是不支持显示pdf和ofd文件格式的缩略图的【这里使用业务解决,让设计给一个pdf和ofd的模板图片,当上传的文件为pdf或ofd格式时,显示该模板图片】
2、pdf预览用到了iframe标签,也可以使用embed标签
3、ofd文件下载
代码示例:

说明:(1)上传组件listType为picture-card时,鼠标悬浮默认显示预览和删除两个小图标,官方文档中还有一个下载,下载图标不会默认显示,需要设置 showUploadList 属性,将 showDownloadIcon 设置为true,才会显示下载小图标,此时方可触发onDownload方法。

  const [previewVisible, setPreviewVisible] = useState(false);
  const [fileList, setFileLists] = useState([]);
  const 
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design的上传组件支持上传PDF文件并且预览PDF文件需要将PDF文件转换为图片格式,然后使用图片预览组件进行预览。以下是示例代码: ```jsx import React, { useState } from 'react'; import { Upload, Button, message, Spin } from 'antd'; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; import { pdfjs, Document, Page } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; const UploadPDF = () => { const [fileList, setFileList] = useState([]); const [previewUrl, setPreviewUrl] = useState(''); const [loading, setLoading] = useState(false); const handleChange = ({ fileList }) => { setFileList(fileList); if (fileList.length > 0) { setLoading(true); const reader = new FileReader(); reader.readAsDataURL(fileList[0].originFileObj); reader.onloadend = () => { setPreviewUrl(reader.result); setLoading(false); }; } else { setPreviewUrl(''); } }; const handlePreview = () => { window.open(previewUrl); }; const handleRemove = () => { setFileList([]); setPreviewUrl(''); }; const uploadButton = ( <div> {loading ? <LoadingOutlined /> : <PlusOutlined />} <div style={{ marginTop: 8 }}>Upload</div> </div> ); return ( <div> <Upload fileList={fileList} onChange={handleChange} onRemove={handleRemove} beforeUpload={(file) => { if (file.type !== 'application/pdf') { message.error(`${file.name} is not a PDF file`); return false; } return true; }} showUploadList={false} > {fileList.length === 0 ? ( uploadButton ) : ( <Button onClick={handlePreview}>Preview</Button> )} </Upload> {previewUrl && ( <div style={{ marginTop: 16 }}> <Spin spinning={loading}> <Document file={previewUrl} onLoadSuccess={null}> <Page pageNumber={1} width={400} /> </Document> </Spin> </div> )} </div> ); }; export default UploadPDF; ``` 在这个示例中,我们使用了`react-pdf`库来渲染PDF文件的预览图。`handleChange`函数在上传PDF文件后将PDF文件转换为DataURL,然后设置预览图的URL。`handlePreview`函数用于打开预览图。`handleRemove`函数用于删除上传PDF文件和预览图。在上传组件中,`beforeUpload`函数用于验证上传的文件是否为PDF文件。最后,`Document`和`Page`组件用于渲染PDF文件的预览图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值