Commit 3c6023bdb5e7439dc2a46ecd3e0ce090b23e2631
1 parent
c13eb85a
1.图片也用iframe方式
Showing
2 changed files
with
26 additions
and
1 deletions
src/components/Common/CommonTable/index.js
| @@ -1296,7 +1296,7 @@ class CommonTableRc extends React.Component { | @@ -1296,7 +1296,7 @@ class CommonTableRc extends React.Component { | ||
| 1296 | 1296 | ||
| 1297 | let imgBox = <FileOutlined />; | 1297 | let imgBox = <FileOutlined />; |
| 1298 | 1298 | ||
| 1299 | - if (officeFileTypeList.includes(officeFileType)) { | 1299 | + if (officeFileTypeList.includes(officeFileType) || imgTypeList.includes(officeFileType)) { |
| 1300 | imgBox = fileIcon; | 1300 | imgBox = fileIcon; |
| 1301 | } else if (imgTypeList.includes(officeFileType)) { | 1301 | } else if (imgTypeList.includes(officeFileType)) { |
| 1302 | imgBox = <span style={{ cursor: 'pointer' }}> <img src={dataUrl} alt="img" onFocus={() => 0} onClick={e => this.handlePreviewImage(e, picAddr, index)} style={{ width: '30px', height: '20px' }} /></span>; | 1302 | imgBox = <span style={{ cursor: 'pointer' }}> <img src={dataUrl} alt="img" onFocus={() => 0} onClick={e => this.handlePreviewImage(e, picAddr, index)} style={{ width: '30px', height: '20px' }} /></span>; |
src/components/Common/OfficePreview/index.js
| @@ -10,6 +10,7 @@ import "@js-preview/excel/lib/index.css"; | @@ -10,6 +10,7 @@ import "@js-preview/excel/lib/index.css"; | ||
| 10 | 10 | ||
| 11 | const OfficePreview = props => { | 11 | const OfficePreview = props => { |
| 12 | const { officePreviewVisible, officeFileUrl, onCancel, app } = props; | 12 | const { officePreviewVisible, officeFileUrl, onCancel, app } = props; |
| 13 | + const imgTypeList = ['PNG', 'SVG', 'JPG', 'JPEG', 'GIF', 'BMP', 'TIFF', 'ICO']; /* 常见图片格式列表 */ | ||
| 13 | const title = officeFileUrl | 14 | const title = officeFileUrl |
| 14 | .split("/") | 15 | .split("/") |
| 15 | .pop() | 16 | .pop() |
| @@ -45,6 +46,30 @@ const OfficePreview = props => { | @@ -45,6 +46,30 @@ const OfficePreview = props => { | ||
| 45 | <iframe src={fileUrl} style={{ width: '100%', height: '100%' }} frameborder="0"></iframe> | 46 | <iframe src={fileUrl} style={{ width: '100%', height: '100%' }} frameborder="0"></iframe> |
| 46 | </div> | 47 | </div> |
| 47 | )} | 48 | )} |
| 49 | + {imgTypeList.includes(fileType)&& ( | ||
| 50 | + <div className="pdfContainer" style={{ | ||
| 51 | + width: '100%', | ||
| 52 | + // height: '100vh', | ||
| 53 | + display: 'flex', | ||
| 54 | + justifyContent: 'center', | ||
| 55 | + alignItems: 'center', | ||
| 56 | + background: '#f5f5f5', | ||
| 57 | + boxSizing: 'border-box', | ||
| 58 | + padding: 0, | ||
| 59 | + margin: 0 | ||
| 60 | + }}> | ||
| 61 | + <img | ||
| 62 | + src={fileUrl} | ||
| 63 | + style={{ | ||
| 64 | + maxWidth: '90%', | ||
| 65 | + maxHeight: '90vh', | ||
| 66 | + objectFit: 'contain', | ||
| 67 | + border: 'none', | ||
| 68 | + }} | ||
| 69 | + alt="图片预览" | ||
| 70 | + /> | ||
| 71 | + </div> | ||
| 72 | + )} | ||
| 48 | {['MP4', 'WEBM', 'OGG'].includes(fileType) && ( | 73 | {['MP4', 'WEBM', 'OGG'].includes(fileType) && ( |
| 49 | <div style={{ | 74 | <div style={{ |
| 50 | width: "100%", | 75 | width: "100%", |