5

Tengo una aplicación web que tiene un elemento object (que contiene un embed) que uso para mostrar los documentos seleccionados por el usuario.

Los documentos pueden ser PDF o ficheros de texto plano (.txt) que tengo almacenados en cadenas en base64, y lo que hago es cambiar los atributos data y src del object y embed respectivamente para que muestre el contenido. El resultado final se vería así (simplificado):

object {
  border: 1px solid #ccc;
  width: 300px;
  height: 100px;
}
<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh">
  <embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" />
</object>

Los PDF se ven bien, pero el texto de los .txt se ve un poco pequeño y me han pedido que lo haga más grande y ahí es donde tengo el problema. No encuentro la forma de darle estilo.

He intentado cambiado el tamaño del texto del object y embed pero el contenido no lo toma:

object, embed {
  font-size: 32px;
}

También vi que Chrome toma el contenido del fichero .txt y lo pone dentro de un pre, así que intenté estilizar el pre, pero los estilos sólo se aplican a los pre de fuera del object y no a los de dentro del mismo:

pre {
  font-size: 32px;
}

¿Hay alguna manera de dar formato al contenido de los .txt en el object? ¿Cómo se haría?

4
  • Si los documentos son escritos en el servidor y accedidos a través del mismo dominio, podrías obtener el documento interno del object con JavaScript y aplicar los estilos correspondientes.
    – gugadev
    el 11 oct. 2017 a las 20:32
  • @Guz ¿Cómo sería eso? Los documentos los recibo en base64 y no tengo información de dónde o cómo se almacenan. Hago una llamada a un servicio que me devuelve la cadena
    – Alvaro Montoro
    el 11 oct. 2017 a las 20:52
  • ¿Puedo sugerir una respuesta utilizando un lenguaje de backend? Por ejemplo en PHP
    – Marcos
    el 27 nov. 2017 a las 17:55
  • @Marcos ¿qué tienes en mente? Tengo un object/embed al que le cambio el data/src de manera dinámica (recibo los datos en base64 via AJAX), y parece que no hay manera de estilizarlo usando CSS/JS porque se considera un contexto diferente. Si tienes algo que funcione en el lado del servidor, podría valer.
    – Alvaro Montoro
    el 27 nov. 2017 a las 18:18

1 respuesta 1

2

Una solución que se podria aplicar (como comento @gugadev) es visualizar el documento (es decir el valor en base64) en otro archivo hosteado en el mismo dominio que el archivo donde se lo requiere.

Al hostear ambos archivo bajo el mismo dominio, el navegador NO aplica las restricciones para CORS y por ende, podremos acceder al contentDocument creado por el object.

Ejemplo:

index.html

<style>
object {
  border: 1px solid #ccc;
  width: 300px;
  height: 100px;
}
</style>
<object id="object" data="//content.php?contentType=text/plain&base64=SGVsbG8gV29ybGQh"></object>
<script>
var element = document.getElementById('object');
element.onload = function() {
  var objectDoc = element.contentDocument.documentElement,
    pres = objectDoc.getElementsByTagName('pre');

  // Cambiamos el estilo
  pres[0].style.fontSize = '3em';
}
</script>

content.php

<?php
header("Content-Type: " . $_GET['contentType']);
echo base64_decode($_GET['base64']);

Demo

1
  • Parece que esta es la única manera de hacerlo por las restricciones de seguridad del navegador.
    – Alvaro Montoro
    el 28 nov. 2017 a las 18:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.