[英]I need help position a real Docx file in a Material CardMedia
I have a Codesandbox我有一个Codesandbox
I have this app that displays different files like jpg, mp4 or now docx files.我有这个应用程序可以显示不同的文件,如 jpg、mp4 或现在的 docx 文件。 I can't make docx file position so it look good but jpg or mp4 is working ok.
我无法制作 docx 文件 position 所以它看起来不错,但 jpg 或 mp4 工作正常。
Try it just open a doxc file.试一下,打开一个doxc文件。
In file FileContentRenderer.jsx here below I use switch case
and n open Component needed like docx-viewer.jsx在下面的文件FileContentRenderer.jsx中,我使用
switch case
和 n 打开所需的组件,如docx-viewer.jsx
/* eslint-disable no-return-assign */
import React from "react";
import CardMedia from "@material-ui/core/CardMedia";
import { withStyles } from "@material-ui/core/styles";
import { DocxViewer, VideoViewer, UnsupportedViewer } from "./drivers";
const styles = () => ({
viewerWrapperMp4: {
background: "black",
width: "100%",
height: "20vw",
textAlign: "center"
},
viewerMp4: {
width: "auto",
height: "100%"
},
outer: {
height: "100%",
width: "100%",
position: "relative",
overflow: "hidden"
},
cardMedia: {
width: "100%",
height: "20vw"
}
});
class FileContentRenderer extends React.Component {
driveForImage() {
const { CurrentFile } = this.props;
const { classes } = this.props;
return (
<CardMedia
className={classes.cardMedia}
image={CurrentFile.preview}
title="test test"
/>
);
}
render() {
const { classes, CurrentFile } = this.props;
const filePath = CurrentFile;
switch (CurrentFile.mediaType) {
case "csv": {
break;
}
case "jpg": {
return this.driveForImage();
}
case "image/jpeg": {
return this.driveForImage();
}
case "image/gif": {
return this.driveForImage();
}
case "image/bmp": {
return this.driveForImage();
}
case "image/png": {
return this.driveForImage();
}
case "video/mp4": {
return (
<CardMedia>
<VideoViewer fileType="mp4" filePath={filePath.preview} />
</CardMedia>
);
}
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': {
return (
<CardMedia className={classes.cardMedia}>
<DocxViewer
fileType="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
filePath={filePath.preview}
/>
</CardMedia>
);
}
default: {
return UnsupportedViewer;
}
}
return null;
}
}
export default withStyles(styles)(FileContentRenderer);
I think the problem is css something.我认为问题是 css 什么的。 I have tried so much and think I missed something
我已经尝试了很多,并认为我错过了一些东西
Replace your return block with following block in your docx-viewer.jsx
.用
docx-viewer.jsx
中的以下块替换您的返回块。
return (
<div
id={docxId}
style={{
backgroundColor: 'white',
float: 'left',
overflowY: 'auto',
height: '20vh',
}}
>
<Loading />
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.