Impressão com frameset

Damon · Janeiro 20, 2014

Bom dia pessoal.

Estou usando uma aplicação com frameset:

frameset framespacing='0' border='1'  rows='25%,75%,36%' frameborder='1'

Eu tenho dentro 3 frame digamos que é frame1, frame2, frame3.

Dentro do frame3 eu tenho um botão para imprimir o conteúdo do frame2, porem ele imprimi somente o conteúdo do frame3 onde esta o botão.

<script language="JavaScript1.2">
<!--
function DoPrinting(){
if (!window.print){
alert("Use o Netscape  ou Internet Explorer \n nas versões 4.0 ou superior!")
return
}
window.print()
}
//-->
</script>
<form>
  <input type="button" value="Clique para imprimir a página" OnClick="javascript:DoPrinting()">
</form>

Eu já tentei passar a pagina do frame2 como parâmetro mas não funcionou alguém tem alguma ideia

de como resolver isso ?

webdevbr · Janeiro 20, 2014

1- Frameset foi depreciado, Viva o HTML5!

2- Os frames são como paginas dentro de paginas, portanto você não poderá imprimir nada acima ou abaixo de algum frame sem utilizar os dados

3- Pra que usar frames quando vc pode fazer tudo numa pagina soh?

Use todo o conteúro numa página só, esse negocio d iframes só funciona quando vc precisa integrar alguma aplicação externa como um chat ou video....

Damon · Janeiro 20, 2014

Use todo o conteúro numa página só, esse negocio d iframes só funciona quando vc precisa integrar alguma aplicação externa como um chat ou video....

webdevbr

No meu caso estou desenvolvendo um chat por isso o uso Ok.

Alguma solução ?

xanburzum · Janeiro 20, 2014

dá uma olhada neste método, onde é usado javascript e CSS, ele só imprime o que estiver dentro da DIV <div id="conteudo">

então onde vc quer imprimir, coloque o conteúdo dentro dela. Quando for imprimir ele pegará o conteúdo da DIV e vai jogar no arquivo imprime.htm que será aberto com um pop-up para user clicar em imprimir ou cancelar a impressão

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>FS Print - Imprimindo com Javascript</title>
<script src="fs.js" type="text/javascript"></script>
<script src="fsprint.js" type="text/javascript"></script>
<link href="imprime.css" media="screen" rel="stylesheet" />
</head>
<body>
<a href="javascript:void(0)" onClick="javascript:imprime('conteudo')">Imprimir</a>

    <h1>Título H1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id ligula. Nunc dapibus, purus quis commodo suscipit, felis risus ultricies pede, ut aliquet lacus mi at nibh. Sed condimentum. Aliquam in sem. Curabitur ornare, mi eu auctor laoreet, dui magna pulvinar mi, sed fermentum nulla erat id est. Sed dui lorem, commodo quis, dapibus sit amet, congue vehicula, dolor. Nulla facilisi. Vivamus sed velit at orci molestie sollicitudin. Aliquam erat volutpat. Aliquam nec libero non dui rutrum nonummy. Donec at neque quis leo laoreet imperdiet. Etiam a mauris et nisl volutpat aliquet. Nulla tincidunt venenatis nisl.</p>
    <div id="conteudo">
    <h2>Título H2</h2>    
    <p>Etiam laoreet pulvinar sem. Sed massa enim, vulputate eget, feugiat blandit, sollicitudin in, mauris. Fusce vestibulum. Nullam elementum. Etiam erat est, interdum vel, ornare ultricies, dictum sed, elit. Etiam accumsan sem vel nisl. Maecenas vulputate, metus bibendum feugiat egestas, erat lacus rhoncus nisi, dictum placerat leo enim tincidunt justo. Suspendisse pretium. Maecenas malesuada ante ac nisi. Cras porta. Quisque tincidunt bibendum nisl. Etiam libero mauris, sodales in, varius ut, tempus non, nulla. Donec eget quam. Aenean sed leo sit amet nisl lacinia scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor urna ac lectus. Nunc mauris sem, consequat mattis, ultricies in, tincidunt vitae, lectus. Aliquam ornare ultricies diam.</p>
    <h3>Título H3</h3>
    <p>Quisque convallis fringilla tortor. Duis tortor diam, placerat semper, fermentum sed, commodo id, magna. Nulla auctor hendrerit ante. Praesent libero felis, bibendum et, vulputate vitae, accumsan at, leo. Aliquam mauris magna, vehicula a, mollis at, rhoncus ornare, augue. Vivamus porttitor, tortor sodales convallis sollicitudin, orci odio adipiscing neque, non euismod risus velit id arcu. Ut vehicula, libero sed adipiscing scelerisque, nulla urna vulputate justo, ac congue libero nisl quis arcu. Duis non sem. Vivamus ac velit ac urna nonummy volutpat. Maecenas risus erat, ornare vitae, venenatis eget, molestie ut, lacus. Aliquam erat volutpat. Nam vitae sapien eget massa aliquam tincidunt. Aliquam ornare. Duis feugiat, odio sit amet porttitor elementum, augue lectus accumsan quam, sed fermentum felis eros non nisi. Donec auctor urna a nibh.</p>
</div>
</body>
</html>

imprime.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Imprimir</title>

<script type="text/javascript">
	function stIE(){
		document.body.focus(); //  ie
	    window.print();
	}
</script>
</head>
<body>
<div id="visualiza_imp"></div>
</body>
</html>

fsprint.js

// ==================================================
function fechaImp(){
	$id('janela_impressao').style.display="none"; 
	$id('fImp').style.display="none"; 
}
function janelaImpressao(){
	var objBody = $tag("body").item(0);

	//=============================================
	// CRIA DIV "fImp" - Fundo pra area de impressao ter destaque
	$obj.create("div","fImp",objBody);
	$id("fImp").style.display="none";
	
	//=============================================
	// CRIA DIV "janela_impressao" - Janela onde mostrara a area a ser impressa
	$obj.create("div","janela_impressao",objBody);
	$id("janela_impressao").style.display = "none";	
	
	//=============================================
	// CRIA DIV "topo_janela" - Topo da Janela
	$obj.create("div","topo_janela",$id("janela_impressao"));

	//=============================================	
	// CRIA FORM
	$obj.create("form","form_impressao",$id("topo_janela"));

	//=============================================	
	// CRIA H1 "TITULO" - TITULO DA JANELA
	$obj.create("h1","titulo",$id("form_impressao"));
	$id("titulo").innerHTML = "Pré-visualização de Impressão";

	//=============================================	
	// CRIA INPUT "conf_imp" - CONFIRMA IMPRESSAO
	$obj.create("input","conf_imp",$id("form_impressao"),"button");
	
	$id("conf_imp").setAttribute('value','Confirma Impressão');

	if(/Internet Explorer/.test(navigator.appName)){ // IE sempre ele
		$id("conf_imp").setAttribute('onclick',confImpressao);
		$id("conf_imp").setAttribute('className','button');
	}else{ 
		$id("conf_imp").setAttribute('onclick',"confImpressao()");
		$id("conf_imp").setAttribute('class','button');
	}
	
	//=============================================	
	// CRIA INPUT "fechaJanela"
	$obj.create("input","fechaJanela",$id("form_impressao"),"button");
	
	$id("fechaJanela").setAttribute('value','Fechar');
	$id("fechaJanela").setAttribute('type','button');
	$id("fechaJanela").setAttribute('className','button');
	
	if(/Internet Explorer/.test(navigator.appName)){ // IE sempre ele
		$id("fechaJanela").setAttribute('onclick',fechaImp);
		$id("fechaJanela").setAttribute('className','button');
	}else{ 
		$id("fechaJanela").setAttribute('onclick',"fechaImp()");
		$id("fechaJanela").setAttribute('class','button');
	}
	
	//=============================================	
	// CRIA IFRAME "conteudo_impressao" - CONTENUTO
	$obj.create("iframe","conteudo_impressao",$id("janela_impressao"));
	$id("conteudo_impressao").setAttribute('src','imprime.htm');
	//=============================================	
}
function imprime(cont){
	// jogamos a tela pro topo
	scrollTo(0,0);
	
	telaH = document.body.offsetHeight;
	navH = document.documentElement.clientHeight;
	
	if(navH>telaH)
		telaH=navH;
	telaH+= "px";
	$id("fImp").style.height = telaH;
	
	$id("fImp").style.display='block';
	$id("janela_impressao").style.display='block';
	effects.fade(null,"janela_impressao", 0, 100)

	var conteudo = $id(cont).innerHTML;
	
	parent.conteudo_impressao.document.getElementById("visualiza_imp").innerHTML = conteudo;
}
function confImpressao(){
	parent.conteudo_impressao.stIE();
}
addEvent(window,"load",janelaImpressao);

fs.js

// FS Framework - http://
// ALIAS
function $id() {
  var elements = new Array();
  var totArgs = arguments.length;
  for (var i = 0; i < totArgs; i++) {
    if (typeof arguments[i] == 'string') arguments[i] = document.getElementById(arguments[i]);
    if (arguments.length == 1) return arguments[i];
    elements.push(arguments[i]);
  }
  return elements;
}
function fsClass(){
    return function() {
      this.initialize.apply(this, arguments);
	}
}
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
function $tag(t){
	return document.getElementsByTagName(t);
}
// EVENT
function addEvent(object, eventType, doIt){
	if(object.addEventListener){ // ALL BROWSERS
		object.addEventListener(eventType, doIt, false); 
		return true;
	} else if (object.attachEvent){ // IE	
		var r = object.attachEvent('on'+eventType, doIt);
		return r;
	} else 	return false;
}
// ================
var $obj = {
	create: function(type, id, parentObj,formType){
		this.newObj = document.createElement(type);
		if(id) this.newObj.setAttribute('id',id);
		if(formType) this.newObj.type=formType;
		if(type=="form" || type=="iframe" || formType) if(id) this.newObj.setAttribute('name',id);
		
		parentObj.appendChild(this.newObj);
	},
	clone: function(orObj,cloneObj,cloneType){
		this.dimension = Array();
		this.position = Array();
		this.dimension = this.getDimension(orObj);
		this.position = this.getPos(orObj);
		$obj.create(cloneType,cloneObj,$tag("body").item(0));
		$id(cloneObj).style.position='absolute';
		$id(cloneObj).style.left=this.position[1]+"px";
		$id(cloneObj).style.top=this.position[0]+"px";
		$id(cloneObj).style.width=this.dimension[1]+"px";
		$id(cloneObj).style.height=this.dimension[0]+"px";
		$id(cloneObj).style.zIndex=999;
	},
	opacity: function(obj,value){
		var bsv = value/100; 
		$id(obj).style.opacity=bsv;
		$id(obj).style.MozOpacity=bsv;
		$id(obj).style.filter="alpha(opacity="+value+")";
	},
	getPos: function(obj){
		if($id(obj)){
			obj = $id(obj);
			var top=obj.offsetTop;
			objY=obj;
			while((objY=objY.offsetParent) != null) top+=objY.offsetTop;
			var left=obj.offsetLeft;
			objX=obj;
			while((objX=objX.offsetParent)!=null) left+=objX.offsetLeft;
			var position=Array(top,left);
			return position;
		} else return Array("ERROR:","Object '"+obj+"' not found");
	},
	getDimension: function(obj){
		if($id(obj)){
			obj = $id(obj);
			var height=obj.offsetHeight;
			var width=obj.offsetWidth;
			var dimension=Array(height,width);
			return dimension;
		} else return Array("ERROR:","Object '"+obj+"' not found");
	}
}
// ==========================================
// AJAX
function ajax(url, div, info, method, formID, script, func){
	this.url = url; // content url
	this.method = (method) ? method : 'GET'; // method GET or POST, by standard  "GET"
	this.div = div; // content destination
	this.info = (info) ? info : 'loading'; // while loading
	this.formID = formID; // form ID is required for post requests only
	this.script = (script==0 || script==1) ? script : 1;
	this.func = func;
}
ajax.prototype = {
    connect: function(){
		if(!this.url) return;
        this.xmlHttp = null;
		if( window.XMLHttpRequest ) this.xmlHttp = new XMLHttpRequest(); // All browsers
		else if( window.ActiveXObject){ // IE
			try{
				this.xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e){
				try{
					this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
		if(this.xmlHttp != null && this.xmlHttp != undefined ){
			var object = this;
			this.xmlHttp.onreadystatechange = function(){ object.getState.call(object); }
			
			if(this.method=="GET") this.executeGET(); // get request
			else this.executePOST() // post request		
		}
	},
	getState: function(){
		if(this.xmlHttp.readyState == 4 ){
			this.result(this.xmlHttp.responseText);
			if(this.script) this.executeScripts(this.xmlHttp.responseText);
			if(this.func!=null) eval(this.func);
		} else this.loading();
	},
	executeGET: function(){
		this.xmlHttp.open(this.method,this.url, true);
		this.xmlHttp.send(null);
		
	},
	executePOST: function(){
		var fields = "";
		if(!this.formID) alert("Erro: falta indicar FORM")
		for(i=0;i<$id(this.formID).length;i++){
			fields+=$id(this.formID)[i].name+"="+$id(this.formID)[i].value+"&";
		}
		this.xmlHttp.open(this.method,this.url, true);
		this.xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		this.xmlHttp.setRequestHeader('Content-Type',"application/x-www-form-urlencoded; charset=iso-8859-1");
		this.xmlHttp.send(fields);		
	},	
	executeScripts: function(text){
		var ini = 0;
		while (ini!=-1){
			ini = text.indexOf('<script', ini);
			if (ini >=0){
				ini = text.indexOf('>', ini) + 1;
				var fim = text.indexOf('</script>', ini);
				text = text.substring(ini,fim);
				eval(text);
			}
		}
	},
    loading: function(){ this.result(this.info) },           
	result: function(r){ $id(this.div).innerHTML= r; }
}
function fsAjax(url, div, info, method, formID, script,func){
	var requestContent = new ajax(url, div, info, method, formID, script,func);
	requestContent.connect();
}
/* END OF AJAX */ 

// =======================================================

// BELLOW HERE WILL BE IN SEPARETED FILES IN FUTURE

// FORM VALIDATION
var validation = {
	Email: function(mail){
		var er = new RegExp(/^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]{2,}\.[A-Za-z0-9]{2,}(\.[A-Za-z0-9])?/);
		if(typeof(mail) == "string"){
			if(er.test(mail)) return true;
		}else if(typeof(mail) == "object"){
			if(er.test(mail.value)){
				return true;
			}
		}else return false;
	}
}
// EFFECTS

var effects = {
	colorMask: function(color, obj, objOpacity){
		if(!$id("fsMask")) $obj.clone("imagem","fsMask","div");
		$id("fsMask").style.background=color;
		$obj.opacity("fsMask",objOpacity);		
	},
	fade: function(color, obj, from, to, func, nowOpacity){
		from = (!from)?0:from;
		to = (!to)?0:to;
		color = (!color)?null:color=="null"?null:color;
		
		nowOpacity = (!nowOpacity)?from:nowOpacity;
		
		if(!color) $obj.opacity(obj,nowOpacity);
		else this.colorMask(color,obj,nowOpacity);
		if(from>=to){			
			if(nowOpacity>to){
				nowOpacity-=10;
				setTimeout("effects.fade('"+color+"','"+obj+"',"+from+","+to+",'"+func+"','"+nowOpacity+"')",5);
			} else if(func) eval(func);
		} else {
			if(nowOpacity<to){
				nowOpacity+=10;
				setTimeout("effects.fade('"+color+"','"+obj+"',"+from+","+to+",'"+func+"',"+nowOpacity+")",5);
			}else if(func) eval(func);
		}
	}
}

e por fim o arquivo CSS

imprime.css

/*FUNDO*/
div#fImp{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	filter:alpha(opacity=70);
 	-moz-opacity: 0.7; 
	opacity: 0.7;
	z-index:998:
}
/*JANELA PRINCIPAL*/
div#janela_impressao{
	position:absolute;
	left:50%;
	top:50%;
	width:760px;
	height:500px;
	margin: -250px 0  0 -380px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333;
	background:#F2F2F2;
	border:solid 2px #4B4B4B;
	padding:5px;
	z-index:999;
}
/*TOPO DA JANELA*/
div#janela_impressao div#topo_janela{
	background:#333;
	height:25px;
	line-height:25px;
	margin: 0 0 5px 0;
	text-align:right;
}
/*FORMULARIO DO TOPO*/
div#janela_impressao form{
	padding:0;
	margin:0;
}
/*BOTOES DE IMPRIMIR E FECHAR*/
div#janela_impressao .button{
	background:#FFF;
	border:solid 1px #CCC;
	font-size:12px;
	margin:3px;
	width:120px;
}
/*TITULO TOPO*/
div#janela_impressao h1{
	text-transform:uppercase;
	color:#F7F7F7;
	font-size:12px;
	font-weight:bold;
	float:left;
	margin: 0 0 0 10px;
}
/*IFRAME COM O CONTEUDO*/
div#janela_impressao #conteudo_impressao{
	background:#FFF;
	width:99%;
	height:460px;
	overflow:visible;
	border:solid 1px #999;
	padding:2px;
}

e dái só usar..

Damon · Janeiro 21, 2014

Xanburzum

Quero agradecer a sua colaboração em enviar o seu código mais ainda não é isto que estou procurando.

Estou usando uma pagina dinâmica com frame, este frame2 que sito no texto acima é feito somente em php não uso html.

Mas uma vez obrigado pela sua colaboração.

Se alguém tiver mais alguma ideia para solucionar este problema pode ficar a vontade pessoal.

xanburzum · Janeiro 21, 2014

Dentro do frame3 eu tenho um botão para imprimir o conteúdo do frame2, porem ele imprimi somente o conteúdo do frame3 onde esta o botão.

Faz ele abrir em uma outra DIV, tipo uma DIV de visualização, como eu citei acima dai imprimi o que desejar.

Damon · Janeiro 21, 2014

Faz ele abrir em uma outra DIV, tipo uma DIV de visualização, como eu citei acima dai imprimi o que desejar.

Cara não intendi...como que vou passar o parâmetro do frame2 ?

xanburzum · Janeiro 21, 2014

joga ele num txt ou numa variável session

Damon · Janeiro 22, 2014

joga ele num txt ou numa variável session

Tem como você me dar um exemplo ?

xanburzum · Janeiro 22, 2014

leia o conteúdo da sua DIV, você pode usar jquery para pegar o conteúdo da DIV, tipo:

if ($("#idDaDiv").innerHTML == "")
{
alert("Nao tem nada na div!");
}
else
{
alert($("#idDaDiv").innerHTML);
}

atribua ele a uma variável texto, depois abra a variável e coloque no conteúdo da DIV para impressão

Damon · Janeiro 22, 2014

Então como que eu vou atribuir em uma variável de texto?

Tipo $a = pagina.php

isso ?

xanburzum · Janeiro 22, 2014

o conteúdo recuperado da DIV

$("#idDaDiv").innerHTML);

Damon · Janeiro 23, 2014

o conteúdo recuperado da DIV
$("#idDaDiv").innerHTML);

É que eu não estou usando div estou usando frame!

Damon · Janeiro 23, 2014

Alguém tem outra alternativa ?

Fiote · Janeiro 23, 2014

Dentro do frame3 eu tenho um botão para imprimir o conteúdo do frame2, porem ele imprimi somente o conteúdo do frame3 onde esta o botão.

Tente usar esse código dentro do frame3:

<script>
function printFrame2() {
parent.frames['id_do_frame_2'].print();
}
</script>


<input type='button' value='print2' onclick='printFrame2()'/>

xanburzum · Janeiro 23, 2014

ou naquele primeiro code que passei ao invés de DIV use o frame3

Arquivado

Impressão com frameset

Recommended Posts

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

webdevbr 35

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Damon 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fiote 24

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante