¿Cómo crear el archivo pdf a partir de un xml timbrado 3.3 C# .Net? | Convertir Html a PDF con ayuda de Razor | SAT #2

En este segundo video te mostrare una forma fácil de crear un archivo PDF a partir de un archivo HTML, y con ayuda de Razor poder incrustar nuestro objeto Comprobante obtenido en el primer video.

Código del video: clic aquí

Video 1: https://hdeleon.net/como-crear-el-archivo-pdf-a-partir-de-un-xml-timbrado-3-3-c-net-xml-a-clase-objeto-sat-1/

Video 3: https://hdeleon.net/como-crear-el-archivo-pdf-a-partir-de-un-xml-timbrado-3-3-c-net-creacion-de-qr-sat-3/

Curso para que aprendas a crear el xml 3.3 desde cero: https://hdeleon.net/curso-para-crear-la-factura-electronica-3-3-cfdi-del-sat-gratis-en-c-net/

Catálogos sat mysql: https://hdeleon.net/catalogos-para-facturar-3-3-sat-en-mysql/

Creación de archivo PDF en C# a partir de un archivo HTML (sin crystal report, sin itextsharp)

Creación de un archivo pdf sin utilizar ni crystal report ni itextsharp, de esta manera no dependemos de dll engorrosas como Crystal Reports.

Liga de libreria: https://wkhtmltopdf.org/

Como eliminar etiquetas html de una cadena en c#

Para remplazar las etiquetas html de una cadena o eliminarlas en c#, podemos utilizar la siguiente línea que contiene la expresión regular que hará el trabajo de buscar las etiquetas html:

string candenaConTags="<br><p><b>Un Texto</b></p>";
string cadenaSinTags = Regex.Replace(cadenaConTags, "<.*?>", string.Empty);
//cadenaSinTags -> Un Texto

Recuerda de haber importado la librería para poder hacer uso de la clase Regex:

using System.Text.RegularExpressions;

9.- Modificación de elementos HTML con Javascript. – Curso Básico de #Javascript #9

En este capítulo y el siguiente, complementaremos los dos capítulos anteriores (7. El objeto document8.- La interfaz Node), en los cuales analizamos la teoría de dos de las herramientas más utilizadas de javascript que juntas podemos realizar modificaciones dinámicas de nuestra página web.

Para ello vamos realizar una transformación de un elemento input(<input>) por algunos de sus tipos, y esto lo haremos de una manera fácil, y comenzamos por tener el contenido HTML siguiente:

<div>
<select id="comboMagico" onchange="CambiaComponente()">
<option selected="selected" value="TextBox">TextBox</option>
<option value="Button">Button</option>
<option value="CheckBox">CheckBox</option>

</select>
</div>
<div>
<input  type="text" value="Input Magico" id="inputMagico" />
</div>

Tenemos un elemento combobox (<select>) y un elemento input (<input>) los cuales tienen su id para poderlos identificar; el elemento combobox contiene una función que se activa en el evento onchange (como vimos en el capitulo de eventos de este curso) y que se activa cada que cambiamos la opción seleccionada de nuestro combobox.

Lo que haremos a continuación es que al ser cambiada la opción del combobox, nuestro input de la parte de abajo, se transforme en el tipo seleccionado, es decir si seleccionamos la opción Button, nuestro input se transforme en un botón.

Para ello haremos la función que invoca el combobox de nombre CambiaComponente() de la siguiente manera:

function CambiaComponente(){

//utilizando el metodo getElementById de document obtenemos el nodo del combobox
//y con el atributo value obtenemos la opcion seleccionada
opcion=document.getElementById("comboMagico").value

//Hacemos un switch case, dependiendo la opcion seleccionada en el combobox realizamos una transformación.
switch (opcion){

case "TextBox":
document.getElementById("inputMagico").type="text"
break;

case "Button":
document.getElementById("inputMagico").type="button"
break;

case "CheckBox":
document.getElementById("inputMagico").type="checkbox"
break;

}
}

Lo que hacemos con la función es obtener el valor seleccionado por medio del objeto document, la función getElementById y el atributo value, y después analizarla con un switch case para así transformar nuestro input en el valor elegido.

Para ver un ejemplo del código en ejecucion, ahora no pondre un den clic aqui, pueden observarlo abajo y ustedes hacer la prueba moviendo el combobox:

En este capitulo vimos la facilidad de modificar elementos HTML, y transformarlos, esto nos abre miles de posibilidades para realizar acciones dinámicas a nuestras páginas web.

Ir Capítulo Siguiente (10.- Creación de elementos HTML con Javascript)

Ir Capítulo Anterior (8.- La interfaz Node)

8.- La Interfaz Node – Curso Básico de #Javascript #8

La interfaz Node es de la cual todos los Nodos de un documento xml heredan, en este caso cuando utilizamos HTML (XHTML, HTML5) nuestros Nodos son los elementos de la pagina (<a><p><input>), a estos Nodos se le atribuyen ciertas funcionalidades y atributos, los cuales podemos utilizar por medio de javascript, asi que en lo largo de este capitulo cada que hablemos de Nodo estamos hablando de un elemento HTML.

Siendo que estos Nodos heredan de la interfaz Node, podemos aplicar a nuestros elementos de HTML las siguientes funcionalidades (métodos):

MetodoDescripción
appendChild()Agrega un nuevo nodo hijo al final de los nodos hijos del Nodo al que ejecutamos el metodo.
cloneNode()Clona el Nodo
compareDocumentPosition()Compara la colocación de dos nodos en la jerarquía del DOM
getFeature(feature,version)Devuelve un objeto DOM que implementa las APIs especializadas de la función y la versión especificada
getUserData(key)Devuelve el objeto asociado a una tecla en un este nodo. El objeto, primero debe haberse establecido en este nodo llamando setUserData con la misma clave
hasAttributes()Devuelve true si el nodo especificado tiene algún atributo, false en caso contrario
hasChildNodes()Devuelve true si el nodo especificado tiene nodos secundarios, false en caso contrario.
insertBefore()Inserta un Nodo hijo antes del Nodo seleccionado
isDefaultNamespace(URI)Devuelve si el namespaceURI especificado es el valor por defecto
isEqualNode()Comprueba si dos Nodos son iguales
isSameNode()Comprueba si dos Nodos son el mismo Nodo
isSupported()Comprueba si la implementación DOM soporta una función específica y que la función es compatible con el nodo especificado
lookupNamespaceURI()Devuelve el URI de espacio de nombres asociado con el prefijo dado
lookupPrefix()Devuelve el prefijo asociado a un espacio de nombres determinado URI
normalize()Pone todos los nodos de texto debajo de un nodo (incluidos los nodos de atributos) en una forma «normal», donde sólo la estructura (por ejemplo, elementos, comentarios, instrucciones de procesamiento, secciones CDATA y referencias a entidades) separa los nodos de texto, es decir, no existen nodos de texto adyacentes ni los nodos de texto vacíos
removeChild()Elimina un Nodo hijo en especifico del Nodo en el que utilizamos este método.
replaceChild()Remplaza un nodo Hijo con un nuevo Nodo hijo.
setUserData(key,data,handler)Asocia un objeto a una tecla en un nodo

Cabe mencionar que no todos estos métodos se aplican a todos los elementos, ya que hay elementos que no tienen hijos por ejemplo los tipo <input> o <img> por lo cual ejecutar el método removeChild() a uno de estos elementos es paradójico

Ahora que ya vimos el listado de los métodos que pueden realizarse en javascript a los elementos HTML, veamos una lista de los atributos (propiedades) que podemos obtener o asignarles un valor, y son los siguientes:

AtributoDescripción
attributesContiene los atributos de este Nodo, por ejemplo, tratándose de un input, podriamos utilizar el atributo value o id
baseURIDevuelve el URI de base absoluta de un nodo
childNodesDevuelve un tipo NodeList que contiene todos los Nodos hijos del Nodo con el que se utiliza el atributo
firstChildRegresa el primer Nodo hijo del Nodo con el que se utiliza el atributo
lastChildRegresa el ultimo Nodo hijo del Nodo con el que se utiliza el atributo
localNameDevuelve la parte local del nombre de un nodo
namespaceURIRegresa el namespace (espacio de nombre) URI del Nodo
nextSiblingDevuelve el Nodo inmediato del Nodo al que se utilizo el atributo
nodeNameDevuelve el nombre de un Nodo, dependiendo de su tipo
nodeTypeRegresa el tipo del Nodo
nodeValueEstablece o devuelve el valor de un nodo, dependiendo de su tipo
ownerDocumentDevuelve el elemento raíz (Document Object) para un nodo
parentNodeRegresa el padre del Nodo
prefixEstablece o devuelve el prefijo de espacio de nombres de un nodo
previousSiblingDevuelve el Nodo anterior del Nodo del que utilizamos este atributo
textContentEstablece o devuelve el contenido de texto de un nodo y sus descendientes

Esta lista de atributos cabe recalcar el del nombre attributes que viene siendo los atributos de los elementos HTML, por ejemplo los atributos de un elemento de tipo <img> pueden ser “src”, “style”, “position”, etc.

Para poder seleccionar un Nodo utilizaremos el objeto que vimos el capitulo anterior, el objeto document, veamos un ejemplo:

Código HTML

<img id="imagen" src="https://secureservercdn.net/160.153.137.99/357.e61.myftpupload.com/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" />

<input type="button" value="cambia tamaño" onclick="cambiaTamano()" />

Código Javascript

function cambiaTamano(){
Nodo= document.getElementById("imagen")

//utilizamos el atributo style que a su vez tiene los atributos CSS y asignamos un nuevo width (ancho)
Nodo.style.width="300px";
}

Como podemos ver en el ejemplo utilizamos el objeto document, y uno de sus métodos, getElementById(), con esto, podemos obtener el Nodo deseado en este caso por medio de su Id, y poder utilizar la lista de funcionalidades y atributos anteriormente mostrada, en el código anterior cambiamos el tamaño de una imagen, y si quieren ver como funciona su ejecución den clic aquí.

En este capitulo unimos la funcionalidad de el objeto document, y los Nodos de una pagina web, y los siguientes dos capítulos haremos algo con lo cual se quitaran de todas las dudas (si es que tienen), y podrán ver el potencial de tener estas herramientas a la mano.

Ir Capítulo Siguiente (9.- Modificación de elementos HTML con Javascript)

Ir Capítulo Anterior (7.- El objeto document)

¿Como crear un #div que bloquee la pantalla del navegador mientras se realiza una acción? #javascript

Hoy escribo sobre un tema bastante común que se tiene cuando se planea un sistema el cual tendrá algunas operaciones que ocupan realizarse con peticiones ajax y estas duraran bastante tiempo, y en ese tiempo debemos evitar que el usuario de nuevamente clic al botón que comenzó la petición ajax, para ello les mostrare como hacer rápidamente una ventana que bloquea la pantalla web.

En el siguiente código podemos observar dos funciones una de nombre jsRemoveWindowLoad() que solo sirve para quitar el div bloqueador que vamos a crear y la función jsShowWindowLoad() que prácticamente es la que abrirá  el div el cual bloqueara nuestra pantalla.

function jsRemoveWindowLoad() {
	// eliminamos el div que bloquea pantalla
    $("#WindowLoad").remove();

}

function jsShowWindowLoad(mensaje) {
	//eliminamos si existe un div ya bloqueando
    jsRemoveWindowLoad();

    //si no enviamos mensaje se pondra este por defecto
    if (mensaje === undefined) mensaje = "Procesando la información&amp;lt;br&amp;gt;Espere por favor";

    //centrar imagen gif
    height = 20;//El div del titulo, para que se vea mas arriba (H)
    var ancho = 0;
    var alto = 0;

	//obtenemos el ancho y alto de la ventana de nuestro navegador, compatible con todos los navegadores
    if (window.innerWidth == undefined) ancho = window.screen.width;
    else ancho = window.innerWidth;
    if (window.innerHeight == undefined) alto = window.screen.height;
    else alto = window.innerHeight;

	//operación necesaria para centrar el div que muestra el mensaje
    var heightdivsito = alto/2 - parseInt(height)/2;//Se utiliza en el margen superior, para centrar

   //imagen que aparece mientras nuestro div es mostrado y da apariencia de cargando
    imgCentro = "<div style='text-align:center;height:" + alto + "px;'><div  style='color:#000;margin-top:" + heightdivsito + "px; font-size:20px;font-weight:bold'>" + mensaje + "</div><img  src='img/load.gif'></div>";

        //creamos el div que bloquea grande------------------------------------------
        div = document.createElement("div");
        div.id = "WindowLoad"
        div.style.width = ancho + "px";
        div.style.height = alto + "px";
        $("body").append(div);

        //creamos un input text para que el foco se plasme en este y el usuario no pueda escribir en nada de atras
        input = document.createElement("input");
        input.id = "focusInput";
        input.type = "text"

		//asignamos el div que bloquea
        $("#WindowLoad").append(input);

		//asignamos el foco y ocultamos el input text
        $("#focusInput").focus();
        $("#focusInput").hide();

		//centramos el div del texto
        $("#WindowLoad").html(imgCentro);

}

La funcionalidad de jsShowWindowLoad() sirve para mostrar un div encima de todos los controles en pantalla, este div aparece al momento de ejecutar dicha función, y este div puede desaparecer al invocar la otra función de nombre jsRemoveWindowLoad(). Para entender la funcionalidad de jsShowWindowLoad() anexe comentarios explicando parte por parte. Esto es lo que hace el javascript pero en cuanto a css ocuparemos el siguiente código para que nuestro div aparesca encima y con un estilo más estético:


#WindowLoad
{
    position:fixed;
    top:0px;
    left:0px;
    z-index:3200;
    filter:alpha(opacity=65);
   -moz-opacity:65;
    opacity:0.65;
    background:#999;
}

Este código lo que hace es poner el div encima de todos los controles, además de dar una opacidad para así aun se vea lo que está detrás.

Para ver un ejemplo funcionando dar clic aqui.

Espero les sea de ayuda.

¿Cómo utilizar los métodos #parent() y #find() de #jquery? #ejemplos

Este articulo trata sobre los métodos parent() y find() de jquery. Estos métodos son demasiado poderosos cuando se manejan de manera adecuada, ya que se puede navegar por medio de todo el contenido HTML de un sitio, y a su vez, realizar modificaciones dinámicas, o obtener algún elemento o un conjunto de estos para realizar alguna animación o calculo.

Para ver su funcionamiento utilizaremos el siguiente código HTML que describe un div padre con muchos hijos dentro los cuales llame de acuerdo a un árbol genealógico (padre, hijo, nieto, bisnieto).


<div id="divPadre">
   <div id="divHijoPrimero">
      <div id="divNietoPrimero">
         <div id="divBisnieto"></div>
      </div>
   </div>
   <div id="divHijoSegundo">
      <div id="divNietoSegundo"></div>
   </div>
</div>

Comenzaremos por seleccionar el div bisnieto con el siguiente selector:

obj=$("#divBisnieto");

Esto nos dará el objeto divBisnieto, pero supongamos que quisiéramos obtener el div padre (osea el div que contiene a los demás), para ello utilizaremos el método parent() de jquery de la siguiente manera:

//tres veces parent nos sacaría hasta el div padre, el cual contiene a los demás divs
obj=$("#divBisnieto").parent().parent().parent();

Como podemos observar cada que utilizamos el método parent() lo que hacemos es dirigirnos al padre inmediato del objeto HTML que tenemos en el selector.

Ahora supongamos que teniendo el divBisnieto seleccionado queramos seleccionar un elemento fuera del padre inmediato de divBisnieto, por ejemplo el div con id divNietoSegundo, para ello utilizaremos el método find() el cual al contrario de parent() nos permite realizar una selección sobre los elementos dentro de un objeto ya seleccionado anteriormente, y lo hacemos de la siguiente manera:

//tres veces parent nos sacaría hasta el div padre, el cual contiene a los demás divs
obj=$("#divBisnieto").parent().parent().parent();

//y ya teniendo en la variable obj el padre de todos los divs utilizamos find
objDivNietoSegundo=obj.find("#divNietoSegundo")

Recuerden que pueden utilizar el método find() de igual manera que los selectores comunes $() con la diferencia que solo abarcara los elementos hijos del selector ya utilizado.

Espero les sirva este rápido tutorial y utilicen estos métodos ya que pueden hacer cosas muy interesantes.

¿Como recorrer elementos HTML por medio de jquery? y realizar operaciones con su contenido HTML

El propósito de esta entrada es aprender a utilizar jquery mas allá de hacer animaciones y cosas de estética, aprenderemos a utilizar jquery para realizar recorrido por elementos DOM y aplicar alguna operación matemática por medio de los valores dados.

Para ello utilizare una tabla HTML en la cual plasme 3 productos, que bien pueden representar los productos de un carrito de compras o alguna otra cosa parecida.

<table class="productos">
    <tr>
        <th>sudadera</th><td>180</td>
    </tr>
    <tr>
        <th>camisa</th><td>130</td>
    </tr>
    <tr>
        <th>pantalon</th><td>200</td>
    </tr>
</table>
<input type="button" value="Calcular" onclick="jsCalculaTotal()" />
<br />
<p>Resultado: <b id="resultado"></b></p>

También se puede observar que hay un botón el cual invoca la función de nombre jsCalculaTotal(), esta función realizara todo el proceso. Y debajo del botón existe un elemento con un id de nombre “resultado”, aquí es donde plasmaremos el resultado.

Nuestra tabla tiene una clase llamada “productos” esta será útil para realizar la selección de los elementos

Para realizar el recorrido utilizaremos el método each() de jquery el cual recorre lo obtenido por el selector y se le puede realizar alguna operación uno a uno de los elementos.


function jsCalculaTotal(){
	resultado=0;

	$(".productos td").each(function(){
		var valorASumar=$(this).html();
		resultado+=parseInt(valorASumar);
	})
	//imprimimos el resultado en el componente con la clase "resultado"
	$("#resultado").html(resultado)
}

En este caso realizaremos el recorrido por los td de nuestra tabla, para ello utilizamos el selector $(“.productos td”) esto nos seleccionara todos los td hijos de el elemento que contiene la clase “productos”, seguido de este selector agregamos el método each() y vamos recorriendo uno a uno los elementos y por medio del método html() de jquery obtenemos el contenido del elemento que es el precio del artículo, y a su vez sumándolos en una variable llamada resultado, (por si desconocen el método parseInt(), este es un método de javascript el cual convierte un valor a entero, ya que si no lo hacemos así obtendríamos una concatenación al utilizar +=).

recorrido jquery de elementos html

Espero les sirva para poder realizar cosas mas allá de este simple ejemplo, y poder sacar potencial de jquery para realizar modificaciones dinámicas.