Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

183
Vistas
Cómo posicionar un archivo Docx real en un Material CardMedia

Tengo un Codesandbox

Tengo esta aplicación que muestra diferentes archivos como jpg, mp4 o ahora archivos docx. No puedo hacer que la posición del archivo docx se vea bien, pero jpg o mp4 funcionan bien.

Pruébelo simplemente abra un archivo doxc.

En el archivo FileContentRenderer.jsx aquí debajo, uso el switch case y n componente abierto necesario como 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);

Creo que el problema es css algo. He intentado tanto y creo que me perdí algo.

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Reemplace su bloque de retorno con el siguiente bloque en su docx-viewer.jsx .

 return ( <div id={docxId} style={{ backgroundColor: 'white', float: 'left', overflowY: 'auto', height: '20vh', }} > <Loading /> </div> );
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda