Este artículo contiene código y gráficos para imprimir certificados para nuestros kits de aprendizaje JMP gratuitos
Código de impresión
IanAtJMP
Podría usar su código para que funcione sin problemas. El Kit pasa la variable de nombre y el js hace el resto. Déjame saber qué más necesitas. ¡Gracias!
//
//Add new temporary canvas element to the DOM with size matching contents of the slide
$('body').append('<CANVAS id="printarea" width="'+ $('#slidecontainer').width() + '" height="' + $('#slidecontainer').height() + '">');
//Get the offset position of the slide container relative to document
var slidePos = $('#slidecontainer').offset();
//Store the temp canvas element in a variable
var pcanvas = $('#printarea');
//Store the context of the temp canvas element in a variable
var ctx=document.getElementById('printarea').getContext('2d');
//Loop through all elements in the slide content (background image, hard-coded text)
//and add them to the temp canvas in the correct position
$('.content:visible').each(function () {
var os = $(this).offset();
ctx.drawImage(this, os.left-slidePos.left, os.top-slidePos.top);
});
//Create a new image containing the contents of the new canvas
var img = pcanvas[0].toDataURL();
//Remove the temp canvas from the DOM
pcanvas.remove();
/* --- Prepare for printing... --- */
//Open a new window with the proper dimensions
var w = window.open('', '', 'scrollbars=no, height=' + ($('#slidecontainer img').height()+700) + ',width=' + ($('#slidecontainer img').width()+934));
//Get the document object
var wd = w.document;
//Write HTML content to the new window. It includes the image we just created from the temp canvas and the user name
wd.write('<TITLE></TITLE>');
wd.write('');
wd.write('<DIV style="position: absolute; padding: 300px; left: 70px; height: 50px; font-size: 30px; font-family: Arial, sanf-serif; font-weight:bold; text-align:center;">' + $('.vartext b').text() + '</DIV>');
wd.write('<IMG src="' + img + '" />');
wd.write('');
wd.close();
//Print the new window
w.print(); // JavaScript Document</CANVAS>
