Imprimir un PDF oculto, en un Iframe
Tengo una página "1.html" que muestra una imagen "1.jpg" en un iFrame
<iframe id="iframeContenido" name="iframeContenido" height="1115px" width="95%" frameborder="0" scrolling="no"></iframe>
La siguiente página "2.html" muestra la imagen "2.jpg"
Lo que quiero hacer es que las imágenes mostradas en el iFrame también impriman el PDF respectivo de dichas imágenes (1.pdf, 2.pdf... Etc) o en su defecto un DIV oculto lo haga, todo mediante un JavaScript.
¿Será posible? ¿Cómo hacerlo?
Muchas gracias
<iframe id="iframeContenido" name="iframeContenido" height="1115px" width="95%" frameborder="0" scrolling="no"></iframe>
La siguiente página "2.html" muestra la imagen "2.jpg"
Lo que quiero hacer es que las imágenes mostradas en el iFrame también impriman el PDF respectivo de dichas imágenes (1.pdf, 2.pdf... Etc) o en su defecto un DIV oculto lo haga, todo mediante un JavaScript.
¿Será posible? ¿Cómo hacerlo?
Muchas gracias
1 Respuesta
Respuesta de krlosnow
1
1
krlosnow, Mas de 15 años de experiencia en Java, Javascript y HTML
Prueba con esto:
<html>
<head>
<style>
.linkNavegacion{
font-weight:bold;
margin: 10px;
color:blue;
background-color:yellow;
border:solid 1px yellow;
}
.linkNavegacion:hover{
border:solid 1px red;
}
.linkNavegacionDisabled{
font-weight:bold;
margin: 10px;
color:silver;
background-color:white;
border:solid 1px white;
}
.footer{
font-style:italic;
color:green;
}
.spanPaginaActual{
font-size:15px;
margin: 10px;
}
</style>
<script>
var NUM_PAGINAS = 26;
var paginaActual;
var paginas;
var pdfs;
function init(){
paginas = new Array(NUM_PAGINAS);
pdfs = new Array(NUM_PAGINAS);
paginaActual=0;
var temp;
//Inicialización del array de páginas
for (ix=0; ix<paginas.length; ix++){
temp = "" + (ix +1);
while (temp.length < 3){
temp = "0" + temp;
}
paginas[ix] = "arm" + temp + ".html";
pdfs[ix] = "arm" + temp + ".pdf";
}
actualizaIframeContenido();
}
function actualizaIframeContenido(){
actualizaLinks();
document.getElementById("iframeContenido").src = paginas[paginaActual];
//document.getElementById("iframePDF").src = pdfs[paginaActual];
//document.getElementById("objPDF").src = pdfs[paginaActual];
document.getElementById("divPDF").innerHTML = "<object height='0' width='0' id='objPDF' type='application/pdf' data='" + pdfs[paginaActual] + "'></object>";
}
function actualizaLinks(){
document.getElementById("linkPrimera").className = "linkNavegacion";
document.getElementById("linkAnterior").className = "linkNavegacion";
document.getElementById("linkSiguiente").className = "linkNavegacion";
document.getElementById("linkUltima").className = "linkNavegacion";
if (paginaActual == 0){
document.getElementById("linkPrimera").className = "linkNavegacionDisabled";
document.getElementById("linkAnterior").className = "linkNavegacionDisabled";
}
else if (paginaActual == (NUM_PAGINAS-1)){
document.getElementById("linkSiguiente").className = "linkNavegacionDisabled";
document.getElementById("linkUltima").className = "linkNavegacionDisabled";
}
document.getElementById("spanPaginaActual").innerHTML = paginas[paginaActual];
}
function primera(){
paginaActual = 0;
actualizaIframeContenido();
}
function siguiente(){
if (paginaActual>=NUM_PAGINAS) return;
paginaActual++;
actualizaIframeContenido();
}
function anterior(){
if (paginaActual<=0) return;
paginaActual--;
actualizaIframeContenido();
}
function ultima(){
paginaActual = NUM_PAGINAS -1;
actualizaIframeContenido();
}
function imprimir(){
printIframe("iframeContenido");
}
function printIframe(id){
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.print();
return false;
}
function printPDF(){
var objPDF = document.getElementById("objPDF");
try{
objPDF.focus();
objPDF.print();
}catch (e){
alert("Su navegador no permite imprimir automaticamente la imagen en PDF. Debe imprimir directamente desde Acrobat Reader");
var ventana = window.open("", "PDF", "toolbar=no");
ventana.location.href=pdfs[paginaActual];
}
}
</script>
</head>
<body onload="init()">
<div id="div_header">
<a class="linkNavegacion" id="linkPrimera" href="javascript:primera()">Primera</a>
<a class="linkNavegacion" id="linkAnterior" href="javascript:anterior()">Anterior</a>
<span id="spanPaginaActual" class="spanPaginaActual"></span>
<a class="linkNavegacion" id="linkSiguiente" href="javascript:siguiente()">Siguiente</a>
<a class="linkNavegacion" id="linkUltima" href="javascript:ultima()">Ultima</a>
<a class="linkNavegacion" id="linkImprimir" href="javascript:imprimir()">Imprimir</a>
<a class="linkNavegacion" id="linkImprimirPDF" href="javascript:printPDF()">Imprimir PDF</a>
</div>
<div id="div_content">
<iframe id="iframeContenido" name="iframeContenido" height="500px" width="95%"></iframe>
</div>
<div id="div_footer" class="footer">Pié de página</div>
<div id="divPDF" style="height:0px;width:0px"></div>
</body>
</html>
Pruébalo en varios navegadores. Verás que el comportamiento es distinto, pero es que no se puede hacer más con browsers que no son iexplore.
<html>
<head>
<style>
.linkNavegacion{
font-weight:bold;
margin: 10px;
color:blue;
background-color:yellow;
border:solid 1px yellow;
}
.linkNavegacion:hover{
border:solid 1px red;
}
.linkNavegacionDisabled{
font-weight:bold;
margin: 10px;
color:silver;
background-color:white;
border:solid 1px white;
}
.footer{
font-style:italic;
color:green;
}
.spanPaginaActual{
font-size:15px;
margin: 10px;
}
</style>
<script>
var NUM_PAGINAS = 26;
var paginaActual;
var paginas;
var pdfs;
function init(){
paginas = new Array(NUM_PAGINAS);
pdfs = new Array(NUM_PAGINAS);
paginaActual=0;
var temp;
//Inicialización del array de páginas
for (ix=0; ix<paginas.length; ix++){
temp = "" + (ix +1);
while (temp.length < 3){
temp = "0" + temp;
}
paginas[ix] = "arm" + temp + ".html";
pdfs[ix] = "arm" + temp + ".pdf";
}
actualizaIframeContenido();
}
function actualizaIframeContenido(){
actualizaLinks();
document.getElementById("iframeContenido").src = paginas[paginaActual];
//document.getElementById("iframePDF").src = pdfs[paginaActual];
//document.getElementById("objPDF").src = pdfs[paginaActual];
document.getElementById("divPDF").innerHTML = "<object height='0' width='0' id='objPDF' type='application/pdf' data='" + pdfs[paginaActual] + "'></object>";
}
function actualizaLinks(){
document.getElementById("linkPrimera").className = "linkNavegacion";
document.getElementById("linkAnterior").className = "linkNavegacion";
document.getElementById("linkSiguiente").className = "linkNavegacion";
document.getElementById("linkUltima").className = "linkNavegacion";
if (paginaActual == 0){
document.getElementById("linkPrimera").className = "linkNavegacionDisabled";
document.getElementById("linkAnterior").className = "linkNavegacionDisabled";
}
else if (paginaActual == (NUM_PAGINAS-1)){
document.getElementById("linkSiguiente").className = "linkNavegacionDisabled";
document.getElementById("linkUltima").className = "linkNavegacionDisabled";
}
document.getElementById("spanPaginaActual").innerHTML = paginas[paginaActual];
}
function primera(){
paginaActual = 0;
actualizaIframeContenido();
}
function siguiente(){
if (paginaActual>=NUM_PAGINAS) return;
paginaActual++;
actualizaIframeContenido();
}
function anterior(){
if (paginaActual<=0) return;
paginaActual--;
actualizaIframeContenido();
}
function ultima(){
paginaActual = NUM_PAGINAS -1;
actualizaIframeContenido();
}
function imprimir(){
printIframe("iframeContenido");
}
function printIframe(id){
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.print();
return false;
}
function printPDF(){
var objPDF = document.getElementById("objPDF");
try{
objPDF.focus();
objPDF.print();
}catch (e){
alert("Su navegador no permite imprimir automaticamente la imagen en PDF. Debe imprimir directamente desde Acrobat Reader");
var ventana = window.open("", "PDF", "toolbar=no");
ventana.location.href=pdfs[paginaActual];
}
}
</script>
</head>
<body onload="init()">
<div id="div_header">
<a class="linkNavegacion" id="linkPrimera" href="javascript:primera()">Primera</a>
<a class="linkNavegacion" id="linkAnterior" href="javascript:anterior()">Anterior</a>
<span id="spanPaginaActual" class="spanPaginaActual"></span>
<a class="linkNavegacion" id="linkSiguiente" href="javascript:siguiente()">Siguiente</a>
<a class="linkNavegacion" id="linkUltima" href="javascript:ultima()">Ultima</a>
<a class="linkNavegacion" id="linkImprimir" href="javascript:imprimir()">Imprimir</a>
<a class="linkNavegacion" id="linkImprimirPDF" href="javascript:printPDF()">Imprimir PDF</a>
</div>
<div id="div_content">
<iframe id="iframeContenido" name="iframeContenido" height="500px" width="95%"></iframe>
</div>
<div id="div_footer" class="footer">Pié de página</div>
<div id="divPDF" style="height:0px;width:0px"></div>
</body>
</html>
Pruébalo en varios navegadores. Verás que el comportamiento es distinto, pero es que no se puede hacer más con browsers que no son iexplore.
Hola Carlos tienes razón, no imprime en IE8, ni en Mozilla3. +
En este caso tengo la página "printthisPDF.html" que contiene unos "thumbnails" que a su vez abren los PDF a imprimir:
<p><a href="pdf/arm001.pdf"><img src="images/thumbs/arm_1.jpg" alt="Page one" width="105" height="148" class="thumb"></a></p>
He visto una función que al hacer click sobre dichos "thumbnails" (son varios) muestran el PDF respectivo y abren la función "Imprimir" Esto permite dos cosas: visualizar el PDF y la función imprimir en un pop up.
Es lo mismo que hace este link:
http://216.139.227.101/interactive/k2008/pf/page_001.pdf?print_pages=true
Gracias nuevamente
En este caso tengo la página "printthisPDF.html" que contiene unos "thumbnails" que a su vez abren los PDF a imprimir:
<p><a href="pdf/arm001.pdf"><img src="images/thumbs/arm_1.jpg" alt="Page one" width="105" height="148" class="thumb"></a></p>
He visto una función que al hacer click sobre dichos "thumbnails" (son varios) muestran el PDF respectivo y abren la función "Imprimir" Esto permite dos cosas: visualizar el PDF y la función imprimir en un pop up.
Es lo mismo que hace este link:
http://216.139.227.101/interactive/k2008/pf/page_001.pdf?print_pages=true
Gracias nuevamente
Seguro que la valoro de todos modos! Solo quería saber si conoces de una función similar en JavaScript.
De antemano, te reitero mi agradecimiento.
De antemano, te reitero mi agradecimiento.
Este código funciona bien para firefox, pero para chrome no del todo, y no se por qué. Posiblemente algún bug con el plugin de adobe para chrome:
Se espera tres segundos para asegurarse de que el pdf está cargado. Si necesitas más segundos, modifica el parámetro "3000" en la función setTimeout():
<html>
<head>
<style>
.linkNavegacion{
font-weight:bold;
margin: 10px;
color:blue;
background-color:yellow;
border:solid 1px yellow;
}
.linkNavegacion:hover{
border:solid 1px red;
}
.linkNavegacionDisabled{
font-weight:bold;
margin: 10px;
color:silver;
background-color:white;
border:solid 1px white;
}
.footer{
font-style:italic;
color:green;
}
.spanPaginaActual{
font-size:15px;
margin: 10px;
}
</style>
<script>
var NUM_PAGINAS = 26;
var paginaActual;
var paginas;
var pdfs;
function init(){
paginas = new Array(NUM_PAGINAS);
pdfs = new Array(NUM_PAGINAS);
paginaActual=0;
var temp;
//Inicialización del array de páginas
for (ix=0; ix<paginas.length; ix++){
temp = "" + (ix +1);
while (temp.length < 3){
temp = "0" + temp;
}
paginas[ix] = "arm" + temp + ".html";
pdfs[ix] = "arm" + temp + ".pdf";
}
actualizaIframeContenido();
}
function actualizaIframeContenido(){
actualizaLinks();
document.getElementById("iframeContenido").src = paginas[paginaActual];
//document.getElementById("iframePDF").src = pdfs[paginaActual];
//document.getElementById("objPDF").src = pdfs[paginaActual];
document.getElementById("divPDF").innerHTML = "<object height='0' width='0' id='objPDF' type='application/pdf' data='" + pdfs[paginaActual] + "'></object>";
}
function actualizaLinks(){
document.getElementById("linkPrimera").className = "linkNavegacion";
document.getElementById("linkAnterior").className = "linkNavegacion";
document.getElementById("linkSiguiente").className = "linkNavegacion";
document.getElementById("linkUltima").className = "linkNavegacion";
if (paginaActual == 0){
document.getElementById("linkPrimera").className = "linkNavegacionDisabled";
document.getElementById("linkAnterior").className = "linkNavegacionDisabled";
}
else if (paginaActual == (NUM_PAGINAS-1)){
document.getElementById("linkSiguiente").className = "linkNavegacionDisabled";
document.getElementById("linkUltima").className = "linkNavegacionDisabled";
}
document.getElementById("spanPaginaActual").innerHTML = paginas[paginaActual];
}
function primera(){
paginaActual = 0;
actualizaIframeContenido();
}
function siguiente(){
if (paginaActual>=NUM_PAGINAS) return;
paginaActual++;
actualizaIframeContenido();
}
function anterior(){
if (paginaActual<=0) return;
paginaActual--;
actualizaIframeContenido();
}
function ultima(){
paginaActual = NUM_PAGINAS -1;
actualizaIframeContenido();
}
function imprimir(){
printIframe("iframeContenido");
}
function printIframe(id){
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.print();
return false;
}
var ventanaPDF;
function printPDF(){
var objPDF = document.getElementById("objPDF");
try{
objPDF.focus();
objPDF.print();
}catch (e){
alert("Su navegador no permite imprimir automaticamente la imagen en PDF. Debe imprimir directamente desde Acrobat Reader");
ventanaPDF = window.open(pdfs[paginaActual], "PDF", "toolbar=no");
setTimeout("imprimePDFdeVerdad()", 3000);
}
}
function imprimePDFdeVerdad(){
ventanaPDF.print();
}
</script>
</head>
<body onload="init()">
<div id="div_header">
<a class="linkNavegacion" id="linkPrimera" href="javascript:primera()">Primera</a>
<a class="linkNavegacion" id="linkAnterior" href="javascript:anterior()">Anterior</a>
<span id="spanPaginaActual" class="spanPaginaActual"></span>
<a class="linkNavegacion" id="linkSiguiente" href="javascript:siguiente()">Siguiente</a>
<a class="linkNavegacion" id="linkUltima" href="javascript:ultima()">Ultima</a>
<a class="linkNavegacion" id="linkImprimir" href="javascript:imprimir()">Imprimir</a>
<a class="linkNavegacion" id="linkImprimirPDF" href="javascript:printPDF()">Imprimir PDF</a>
</div>
<div id="div_content">
<iframe id="iframeContenido" name="iframeContenido" height="500px" width="95%"></iframe>
</div>
<div id="div_footer" class="footer">Pié de página</div>
<div id="divPDF" style="height:0px;width:0px"></div>
</body>
</html>
Se espera tres segundos para asegurarse de que el pdf está cargado. Si necesitas más segundos, modifica el parámetro "3000" en la función setTimeout():
<html>
<head>
<style>
.linkNavegacion{
font-weight:bold;
margin: 10px;
color:blue;
background-color:yellow;
border:solid 1px yellow;
}
.linkNavegacion:hover{
border:solid 1px red;
}
.linkNavegacionDisabled{
font-weight:bold;
margin: 10px;
color:silver;
background-color:white;
border:solid 1px white;
}
.footer{
font-style:italic;
color:green;
}
.spanPaginaActual{
font-size:15px;
margin: 10px;
}
</style>
<script>
var NUM_PAGINAS = 26;
var paginaActual;
var paginas;
var pdfs;
function init(){
paginas = new Array(NUM_PAGINAS);
pdfs = new Array(NUM_PAGINAS);
paginaActual=0;
var temp;
//Inicialización del array de páginas
for (ix=0; ix<paginas.length; ix++){
temp = "" + (ix +1);
while (temp.length < 3){
temp = "0" + temp;
}
paginas[ix] = "arm" + temp + ".html";
pdfs[ix] = "arm" + temp + ".pdf";
}
actualizaIframeContenido();
}
function actualizaIframeContenido(){
actualizaLinks();
document.getElementById("iframeContenido").src = paginas[paginaActual];
//document.getElementById("iframePDF").src = pdfs[paginaActual];
//document.getElementById("objPDF").src = pdfs[paginaActual];
document.getElementById("divPDF").innerHTML = "<object height='0' width='0' id='objPDF' type='application/pdf' data='" + pdfs[paginaActual] + "'></object>";
}
function actualizaLinks(){
document.getElementById("linkPrimera").className = "linkNavegacion";
document.getElementById("linkAnterior").className = "linkNavegacion";
document.getElementById("linkSiguiente").className = "linkNavegacion";
document.getElementById("linkUltima").className = "linkNavegacion";
if (paginaActual == 0){
document.getElementById("linkPrimera").className = "linkNavegacionDisabled";
document.getElementById("linkAnterior").className = "linkNavegacionDisabled";
}
else if (paginaActual == (NUM_PAGINAS-1)){
document.getElementById("linkSiguiente").className = "linkNavegacionDisabled";
document.getElementById("linkUltima").className = "linkNavegacionDisabled";
}
document.getElementById("spanPaginaActual").innerHTML = paginas[paginaActual];
}
function primera(){
paginaActual = 0;
actualizaIframeContenido();
}
function siguiente(){
if (paginaActual>=NUM_PAGINAS) return;
paginaActual++;
actualizaIframeContenido();
}
function anterior(){
if (paginaActual<=0) return;
paginaActual--;
actualizaIframeContenido();
}
function ultima(){
paginaActual = NUM_PAGINAS -1;
actualizaIframeContenido();
}
function imprimir(){
printIframe("iframeContenido");
}
function printIframe(id){
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.print();
return false;
}
var ventanaPDF;
function printPDF(){
var objPDF = document.getElementById("objPDF");
try{
objPDF.focus();
objPDF.print();
}catch (e){
alert("Su navegador no permite imprimir automaticamente la imagen en PDF. Debe imprimir directamente desde Acrobat Reader");
ventanaPDF = window.open(pdfs[paginaActual], "PDF", "toolbar=no");
setTimeout("imprimePDFdeVerdad()", 3000);
}
}
function imprimePDFdeVerdad(){
ventanaPDF.print();
}
</script>
</head>
<body onload="init()">
<div id="div_header">
<a class="linkNavegacion" id="linkPrimera" href="javascript:primera()">Primera</a>
<a class="linkNavegacion" id="linkAnterior" href="javascript:anterior()">Anterior</a>
<span id="spanPaginaActual" class="spanPaginaActual"></span>
<a class="linkNavegacion" id="linkSiguiente" href="javascript:siguiente()">Siguiente</a>
<a class="linkNavegacion" id="linkUltima" href="javascript:ultima()">Ultima</a>
<a class="linkNavegacion" id="linkImprimir" href="javascript:imprimir()">Imprimir</a>
<a class="linkNavegacion" id="linkImprimirPDF" href="javascript:printPDF()">Imprimir PDF</a>
</div>
<div id="div_content">
<iframe id="iframeContenido" name="iframeContenido" height="500px" width="95%"></iframe>
</div>
<div id="div_footer" class="footer">Pié de página</div>
<div id="divPDF" style="height:0px;width:0px"></div>
</body>
</html>
The print function it doesnt works at all.
NO error message, no pop up, in Firefox 3.6.3v and explorer 8v
:(
NO error message, no pop up, in Firefox 3.6.3v and explorer 8v
:(
El tema del print() para páginas que contienen un PDF depende mucho del plugin de acrobat que tenga el navegador, por tanto siempre vas a tener problemas de compatibilidad si quieres imprimir de forma automática, sin que el usuario pulse en el botón de la impresora del AcroReader. Para que el pdf se imprima automáticamente, lo mejor es que dentro del pdf se meta código javascript para la auto-impresión. De eso no tengo ni idea, la verdad. Seguramente haga falta tener el el adobe acrobat professional, u otro software como este
- Compartir respuesta
- Anónimo
ahora mismo