Style the content of an object / embed

Question

Style the content of an object / embed

Navigation

#1 by (1 votes)

3

I have a web application that has a object element (containing a embed ) that I use to display the documents selected by the user.

The documents can be PDF or plain text files (.txt) that I have stored in chains in base64, and what I do is change the attributes data and src of object and embed respectively that shows the content. The final result would look like this (simplified):

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>

The PDFs look good, but the text of the .txt looks a bit small and I have been asked to make it bigger and that's where I have the problem. I can not find a way to style it.

I tried changing the text size of object and embed but the content does not take it:

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

I also saw that Chrome takes the contents of the .txt file and puts it within pre , so I tried to stylize pre , but the styles only apply to pre outside of object and not those inside it:

pre {
  font-size: 32px;
}

Is there any way to format the content of the .txt in object ? How would it be done?

html css

asked by Alvaro Montoro 11.10.2017 в 22:00

source

1 answer

Populate data a datatable from a JSON Text in bold from a json

score 1 · Accepted Answer

A solution that could be applied (as commented @gugadev ) is to display the documento (that is, the value in base64) in another file hosted in the same domain as the file where it is required.

By hosting both files under the same domain, the NO browser applies the restrictions for CORS and therefore, we can access the contentDocument created by the object .

Example:

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