PHPEXCEL cambiar formato celdas y texto

Escribir o crear un fichero Excel desde PHP con PHPEXCEL

Escribir o crear un fichero Excel desde PHP con PHPEXCEL

en el siguiente ejemplo te muestro una forma muy simple de escribir un fichero en formato Excel por medio de PHP utilizando la librería PHPExcel

La puedes descargar aqui.

lo primero que tenemos que hacer es instanciar la librería PHPExcel.php  y crear una nueva instancia

después llenamos el objeto Excel con las propiedades del fichero que queremos crear .

A continuación, en la hoja activa, indicamos la celda y el contenido que queremos que tenga en nuestro caso lo he hecho en dos celdas A1 y A2

Y para finalizar indicamos en el encabezado que queremos crear un documento de tipo Excel indicándole el nombre del fichero.

si ejecutas este documento en un navegador verás que en la parte de abajo en la zona de descargas te ha generado un nuevo documento Excel y si lo abres verás que te mostrará el contenido en la celda A1 y A2

include ("excel/Classes/PHPExcel.php");
$objPHPExcel = new PHPExcel();
// Establecer propiedades
$objPHPExcel->getProperties()
->setCreator("videotutoriales.es")
->setLastModifiedBy("videotutoriales.es")
->setTitle("Documento Excel")
->setSubject("Documento Excel")
->setDescription("crear archivos de Excel desde PHP.")
->setKeywords("Excel Office 2007 php")
->setCategory("Pruebas de Excel");

$objPHPExcel->setActiveSheetIndex(0)
->setCellValue('A1', 'videotutoriales.es')
->setCellValue('A2', 'Cursos para descargar')
;

// indicar que se envia un archivo de Excel.
header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment;filename="prueba.xlsx"');
header('Cache-Control: max-age=0');
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
$objWriter->save('php://output');

si te ha gustado el tema en las siguientes entradas te muestro como puedes dar formato a los datos incluidos en las celdas

Escribir o crear un fichero Excel desde PHP

Escribir o crear un fichero Excel desde PHP

Ejemplos de que es y como usar push en un ARRAY en javascript

Ejemplos de que es y como usar push en un ARRAY en javascript

Ejemplos de que es y como usar push en un ARRAY en javascript

Ejemplos de que es y como usar push en un ARRAY en javascript

el método push permite añadir un elemento al final de un array

como puedes ver en el siguiente ejemplo he creado una función que se llama mifuncion que se ejecuta al pulsar en el botón

<p>CLICA EN EL BOTON PARA AÑADIR UN ELEMENTO AL ARRAY.</p>

<button onclick="miFuncion()">Pulsa</button>

<p id="demo"></p>

<script>
var cursos = ["Javascript", "JQuery", "PHP"];
document.getElementById("demo").innerHTML = cursos;

function miFuncion() {
cursos.push("HTML5");
document.getElementById("demo").innerHTML = cursos;
}
</script>

esta función añade elemento HTML5 al array cursos utilizando el método push y después mostramos el resultado en un párrafo identificado como demo.

si quieres añadir varios elementos al ARRAY utiliza el método push e incluye en los parámetros todos los elementos separados por comas

<p>CLICA EN EL BOTON PARA AÑADIR UN ELEMENTO AL ARRAY.</p>

<button onclick="miFuncion()">Pulsa</button>

<p id="demo"></p>

<script>
var cursos = ["Javascript", "JQuery", "PHP"];
document.getElementById("demo").innerHTML = cursos;

function miFuncion() {
cursos.push("HTML5","CSS");
document.getElementById("demo").innerHTML = cursos;
}
</script>

si lo que quieres es añadir el elemento al principio del array utiliza el método  unshift().

<p>CLICA EN EL BOTON PARA AÑADIR UN ELEMENTO AL ARRAY.</p>

<button onclick="miFuncion()">Pulsa</button>

<p id="demo"></p>

<script>
var cursos = ["Javascript", "JQuery", "PHP"];
document.getElementById("demo").innerHTML = cursos;

function miFuncion() {
cursos.unshift("HTML5");
document.getElementById("demo").innerHTML = cursos;
}
</script>

Ejemplos de que es y como usar un ARRAY en javascript

Ejemplos de que es y como usar un ARRAY en javascript

Ejemplos de que es y como usar un ARRAY en javascript

Ejemplos de que es y como usar un ARRAY en javascript

un array en Javascript es una variable que puede contener multiples valores como por ejemplo si tuviésemos que memorizar varios cursos en lugar de tener una variable para cada curso lo que haremos es tener una variable de tipo array en los siguientes ejemplos aprendes cómo funciona.

como puedes ver en el siguiente ejemplo la sintaxis es muy simple creamos una variable y después del símbolo igual y entre corchetes introducimos los valores separados por comas

var nombre-array = [valor1valor2, ...];

como por ejemplo si quisiesemos memorizar varios cursos y siguiendo la sintaxis anterior ….

crearemos una variable llamada cursos, pondremos el símbolo =  un corchete [  y un valor,  recuerda que si es texto tiene que ir entre comillas ”  y si es un número no es necesario

y después una coma    ,     y otro valor.

y así sucesivamente,  y para finalizar cerramos el corchete ]  y un punto y coma   ;      para finalizar la línea:

var cursos = ["Javascript", "JQuery", "PHP"];

con el siguiente ejemplo puedes ver cómo mostrar el contenido de un array

tenemos un párrafo identificado como demo y una vez hemos declarado el array cursos,  como hemos hecho anteriormente,  identificamos el elemento demo por su id y utilizamos el método inner HTML indicando que muestre el contenido de la variable cursos

<p id="demo"></p>
<script>
var cursos = ["Javascript", "JQuery", "PHP"];
document.getElementById("demo").innerHTML = cursos;
</script>

una forma más visual de declarar un array es separándolo por lineas el resultado sería el mismo

var cursos = [
"Javascript",
"JQuery",
"PHP"
];

Acceder a los elementos de un Array

para poder acceder alguno de los elementos de un array primero tienes que saber que cada uno de los elementos está identificado por un índice es decir el primero es 0 el segundo es 1 y así sucesivamente

por ejemplo en este caso JavaScript está en el índice 0 jQuery esté en el índice 1 y  PHP está en el índice 2

var cursos = ["Javascript", "JQuery", "PHP"];

si seguimos con el ejemplo anterior del párrafo identificado como demo con el siguiente ejemplo mostramos el segundo elemento de la matriz cursos en este caso jQuery,  si quisieses que mostrase el primer valor pones 0 entre los corchetes,  y si quisieses que mostrase el tercer valor pones 2 entre corchetes

document.getElementById("demo").innerHTML = cursos[1];

y también puedes modificar un valor como puedes ver en el siguiente ejemplo en el cual asignamos a el tercer elemento el curso HTML5 recuerda siempre que un array empieza por 0

cursos[2]="HTML5";

para mostrar cada uno de los elementos de un array utilizaremos una estructura de control que haga un loop en el array,  en este caso utilizaremos la estructura for

si te fijas en el siguiente ejemplo primero hemos definido el array cursos con los diferentes cursos y hemos creado una variable llamada texto que empieza una lista desordenada

después empezamos el loop, y entre paréntesis iniciamos una variable i   , en la condición indicamos que realice la siguiente acción mientras la variable i sea menor de la longitud del array cursos utilizando el método length que nos devuelve el tamaño del array

dentro de las llaves vamos añadiendo a la variable texto cada uno de los elementos del array cursos y como índice utilizamos la variable i

después solo nos falta mostrar el resultado de la variable texto en el elemento identificado como demo en este caso un párrafo

<p id="demo"></p>
<script>
var cursos = ["Javascript", "JQuery", "PHP"];
texto="<ul>";

for (i = 0; i < cursos.length; i++) {
texto += "<li>" + cursos[i] + "</li>";
}

texto += "</ul>";
document.getElementById("demo").innerHTML = texto;
</script>

para añadir elementos a nuestro array utilizamos el método push

cursos.push("HTML5");

o también puedes utilizar el método length del array

cursos[cursos.length] = "HTML5";

otros métodos que puedes utilizar con un Array son:

toString(): convierte el array en texto separado por comas

join(” * “): convierte el array en texto pero indicando tú el separador dentro de los paréntesis

pop(): elimina el último elemento del array

push(): añade un nuevo elemento al final del array

shift(): elimina el primer elemento del array

unshift(): añade un elemento al principio del array

concat(): crea un nuevo array juntando dos arrays

 

Ejemplo para extraer un trozo de texto con substring de javascript

Ejemplo para extraer un trozo de texto con substring de javascript

Ejemplo para extraer un trozo de texto con substring de javascript

Ejemplo para extraer un trozo de texto con substring de javascript

la forma en la que tenemos de extraer partes de un texto es con el método substring de JavaScript el cual, como puedes ver en la sintaxis, escribimos primero el elemento al cual se le quieres extraer parte de su texto, un . seguido de substring y entre paréntesis la posición del primer carácter que quieres extraer , una coma “,” y la posición del último carácter que quieres extraer

con esto te extraerá el texto que hay entre inicio y final.

RECUERDA QUE EMPEZAMOS CON CERO

elemento.substring(inicio, final)

en el siguiente ejemplo creamos una variable llamada texto 1 que contiene el texto Hola cibernauta y en la variable texto final extraemos de la primera variable el carácter que hay en la posición 5 recuerda que empezamos en 0 hasta el carácter que hay en la posición 16 y en este caso el resultado final será cibernauta

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(5, 16);

si al utilizar el metodo substring de JavaScript omites el segundo parámetro, te dará el texto comprendido entre la primera posición que tú le indiques en este caso 5 hasta el final como puedes ver en el siguiente ejemplo:

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(5);

sí el primer parámetro del método substring es mayor que el segundo se intercambian los valores es decir como es normal el primer parámetro o el primer carácter que tiene que extraer la primera posición ha de ser siempre inferior a la segunda como puedes ver en el siguiente ejemplo:

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(16,5);

y si el primer parámetro del método substring es negativo se asumirá que es 0 cómo puedes comprobar en el siguiente ejemplo:

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(-5,5);

y si lo que quieres extraer es solo el primer carácter le puedes poner 0 como primer parámetro y 1 como segundo parámetro cómo puedes comprobar en el siguiente ejemplo:

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(0,1);

Ejemplo para cambiar una imagen por otra onclick con javascript

Ejemplos de cambiar contenido div javascript

Ejemplos de cambiar contenido div javascript

Ejemplo para cambiar una imagen por otra onclick con javascript

en el siguiente ejemplo demuestra cómo puedes cambiar una imagen dinamicamente utilizando Javascript

<!DOCTYPE html>
<html>
<body>

<img id="mi_imagen" src="primera_imagen.jpg">
<script>
document.getElementById("mi_imagen").src = "segunda_imagen.jpg";
</script>

</body> 
</html>

y si quieres que cambie cuando haces clic sobre un botón, te dejo este otro código en el que como puedes ver he añadido un botón y en su evento onclick es dónde le pongo la programación de Java Script en la cual identificamos a quien le queremos cambiar la imagen, con el método get element by ID, y después indicamos que la propiedad SRC es decir origen sea igual a la imagen nueva que tú quieres que se visualice

<!DOCTYPE html>
<html>
<body>

<img id="mi_imagen" src="primera_imagen.jpg">

<button type="button"
onclick="document.getElementById("mi_imagen").src = 'segunda_imagen.jpg'">
Pulsame!</button>
</body> 
</html>

solo tienes que reemplazar la primera imagen por la imagen que tú quieras que aparezca al principio y la segunda imagen por la nueva imagen que quieres que aparezca cuando hagas clic en el botón qué es entonces cuando cambia de la Imagen

y recuerda que si las imágenes están en una carpeta, también lo tienes que indicar

Ejemplo para cambiar el texto de un div con javascript

Ejemplos de cambiar contenido div javascript

Ejemplos de cambiar contenido div javascript

Ejemplo para cambiar el texto de un div con javascript

como puedes ver en el siguiente código dentro del Body tenemos definido un párrafo identificado como p1 que tiene un texto dentro” Hola cibernauta”.

Después viene la programación de Java Script en la que una vez identificado por el ID de un elemento en este caso P1 utilizamos la propiedad innerHTML y después del igual indicamos el nuevo texto

esto se ejecuta al cargar la página es decir no verás los cambios

<html>
<body>

<p id="p1">Hola Cybernauta!</p>

<script>
document.getElementById("p1").innerHTML = "Muchas gracias!";
</script>

</body>
</html>

te muestro otro ejemplo de cómo cambiar el texto de un div en el que hemos añadido un botón en el cual le hemos añadido el evento onclick.

y hemos primero identificado el elemento que queremos cambiar, hemos utilizado la propiedad inner HTML, como hemos hecho anteriormente, y le hemos dicho que era igual al texto que queremos que aparezca.

aquí sí que verás los cambios cuando hagas clic en el botón

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hola Cybernauta!</p>
<button type="button"
onclick="document.getElementById('p1').innerHTML = 'Muchas gracias!'">
Pulsame!</button>

</body>
</html>

 

Ejemplos de javascript cambiar propiedad css

Ejemplos de javascript cambiar propiedad css

Ejemplos de javascript cambiar propiedad css

Ejemplos de javascript cambiar propiedad css

en el siguiente código te muestro cómo cambiar propiedad css con JavaScript

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hola Cybernauta!</p>
<p id="p2">Hola Cybernauta!</p> 
<script> 
document.getElementById("p2").style.color = "blue"; 
document.getElementById("p2").style.fontFamily = "Arial"; 
document.getElementById("p2").style.fontSize = "larger"; 
</script> 
<p>El parrafo 2 es cambiado por javascript y sus propiedades CSS.</p> 
</body> 
</html>

como puedes ver en el ejemplo, después del Body tenemos definidos dos párrafos identificados como P1 y P2, y en la programación de Java Script hemos alterado el aspecto del párrafo P2 modificando su color, la tipografía y el tamaño del texto.

Lo importante es que veas que hemos utilizado el método getElementById()  de JavaScript para poder modificar solo el aspecto del elemento que me interesa

En el siguiente ejemplo demuestro cómo puedes cambiar el aspecto de un párrafo cuando se pulsa o se hace clic en un botón.

Si te fijas hemos utilizado el evento onclick y utilizando la misma función de JavaScript getElementById()  y pasando como parámetro el elemento que quieras cambiar, en este caso P1 , podemos cambiar cualquier propiedad CSS

<!DOCTYPE html>
<html>
<body>

<h1 id="p1">Hola Cybernauta</h1>

<button type="button"
onclick="document.getElementById('p1').style.color = 'red'">
Pulsame!</button>

</body>
</html>