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

之前写过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 [previewImage, setPreviewImage] = useState('');/* 当前文件的格式* 涉及到 预览、下载、删除* png/jpg/jpeg:预览（图片的预览）和删除* pdf：预览（pdf格式的预览）和删除* ofd：下载和删除*/const [currentFileType, setCurrentFileType] = useState(''); // 当前文件的格式

  // upload的属性const props = {action: uploadUrl,method: 'POST',listType: 'picture-card',accept: '.jpeg,.jpg,.png,.pdf,.ofd,image/jpeg,image/jpg,image/png,application/pdf,',showUploadList:currentFileType === 'ofd'? { showDownloadIcon: true, showRemoveIcon: true, showPreviewIcon: false }: { showDownloadIcon: false, showRemoveIcon: true, showPreviewIcon: true },};

  // 文件预览const handlePreview = async (file) => {setPreviewImage(file.preview);setPreviewVisible(true);};// 文件下载const handleDownload = (file) => {window.location.href = file?.preview; // 使用真正的文件地址进行下载};// 文件上传const normFile = (e) => {······if (e?.response || e[0]?.response || e?.fileList[0]?.response) {const res = e?.response || e[0]?.response || e?.fileList[0]?.response;if (res?.code !== 200) {message.error(res?.message);setFileLists([]);return [];}const url = res.data.filePath;e.fileList[0].thumbUrl = url;  // 用于显示文件的缩略图e.fileList[0].preview = url;  // 预览时真正的文件链接if (url) {const urlArr = url.split('.') || [];const fileType = urlArr[urlArr?.length - 1];  // 获取当前文件格式if (fileType?.toLowerCase() === 'pdf') { // 如果是pdfe.fileList[0].thumbUrl = pdfUrl;  // 使用pdf的模板图片，pdfUrl是引入的一个静态文件地址require('@static/../..')setCurrentFileType('pdf');} else if (fileType?.toLowerCase() === 'ofd') {  // 如果是ofde.fileList[0].thumbUrl = ofdUrl; // 使用ofd的模板图片，ofdUrl也是引入的一个静态文件地址setCurrentFileType('ofd');} else {setCurrentFileType('image');}setPreviewImage(url);}setFileLists(e.fileList);return e && e.fileList;}setFileLists(e.fileList);return e && e.fileList;};

<FormItem label="文件">{getFieldDecorator('file', {valuePropName: 'fileList',getValueFromEvent: normFile,})(<Upload onPreview={handlePreview} onDownload={handleDownload} {...props}>{fileList?.length >= 1 ? null : uploadButton}</Upload>,)}<ModalclassName={styles['invoice-attachment']}visible={previewVisible}footer={null}onCancel={handleCancel}width={1000}>{currentFileType === 'pdf' ? (<iframetitle="PDF"className="scrolling"scrolling="no"frameBorder="0"id="press"src={previewImage}width="100%"height={630}/>) : (<img alt="example" style={{ width: '100%' }} src={previewImage} />)}</Modal>
</FormItem>

图片示例

PDF
固定的模板图片

预览真实的文件

OFD
固定的模板图片

点击下载图片即可下载文件

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

基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
Element中Upload上传组件的http-request方法
刚开始接触vue,新框架是vue+Element.其中写到上传组件的时候卡住了.问题详细: Upload上传组件中的action是必选参数,但是调后台接口的时候需要手动加参数和token,比较麻烦. ...
XX健康:预约管理-套餐管理图片上传与预览Redis实现定时清理垃圾图片
1. 新增套餐 1.1 需求分析套餐其实就是检查组的集合,例如有一个套餐为"入职体检套餐",这个体检套餐可以包括多个检查组:一般检查.血常规.尿常规.肝功三项等.所以在添加套餐时 ...
MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览源代码是从博客园下载我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
微信小程序基于vant和springboot实现附件上传和预览
前言图片上传和预览在移动端应用非常广泛和频繁,vant组件库van-uploader组件已经帮我们实现了大部分功能,但是在系统中频繁使用还是有点麻烦,我们根据自身的业务系统重新封装了一下简化我们的开 ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http:// ...
php+jquery实现图片上传预览_和拖动位置值,PHP教程：thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
ajax js图片上传到php,Ajax上传并预览图片（附代码）
这次给大家带来Ajax上传并预览图片(附代码),Ajax上传并预览图片的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上 ...