internet explorer - vista - Problema de impresión con JQplot en IE
porque no puedo imprimir directamente de internet (2)
Bueno, estábamos usando un Mordernizr para el soporte de HTML5 en nuestro sitio. y para optimizar el código en lugar de tomar todo el archivo mordernizr. Creamos un archivo Mordernizr personalizado.
Esa es la razón por la cual se olvidó incluir la casilla PRINTSHIV desde allí, eso es lo que hizo wat :)
Bueno, este es el enlace que funcionó y resolvió este problema.
Esto estuvo en espera por un largo tiempo. Acabo de resolverlo ayer y estoy muy contento.
También me gustaría agradecer a BORO por su respuesta, eso funciona en caso de que no utilices Mordernizr.
CUSTOM MORDERNIZR que funcionó
Estoy tratando de imprimir mi gráfico y se imprime correctamente a través de Firefox y Chrome.
Pero si trato de imprimirlo con IE, me muestra las etiquetas HTML del lienzo gráfico detrás del gráfico. como se ve en la imagen. y también colocó el texto del eje del gráfico en todo el gráfico ... :(
Probé la siguiente solución que dice que resuelve el problema, pero me va mal :(
debajo de la captura de pantalla del problema.
HTML
<!doctype html>
<html lang="en" class="no-js master">
<head>
<!-- jQuery Flot Graph Widget. exCanvas.js needed for IE -->
<link class="include" rel="stylesheet" type="text/css" href="/css/jquery.jqplot.css" />
<!-- End additional plugins --><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/js/excanvas.min.js"></script><![endif]-->
<script class="include" type="text/javascript" src="/js/jquery.jqplot.min.js"></script>
<!-- Additional plugins go here -->
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.canvasAxisTickRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="/js/jqplot/jqplot.barRenderer.min.js"></script>
</head>
<body>
<div id="mainCont"> </div>
</body>
</html>
Datos JSON
{
"graphData":[["06-2011",20.0],["07-2011",0.0],["09-2011",0.0],["10-2011",0.0],["11-2011",100.0],["12-2011",0.0],["01-2012",0.0],["02-2012",0.0],["03-2012",0.0],["04-2012",0.0],["05-2012",0.0]], "yAxisLabel" : "Data per month", "graphTitle" : "12 month "}
Código JS
$(''.print'', context).live("click", function(e) {
printGraph(data.graphData, data.yAxisLabel, data.graphTitle);
}
function printGraph(graphData, yAxisLabel, graphTitle){
var graphWrapper = $(document.createElement(''div''));
graphWrapper.attr(''id'', ''edd-graph'').css(''width'',''490px'');
var graphID = graphWrapper.attr(''id'');
$(''#mainCont'').append(graphWrapper);
var plot = $.jqplot(graphID, [graphData], {
series:[{renderer:$.jqplot.BarRenderer}],
seriesDefaults: {shadow: false,
rendererOptions: {barWidth:20}
},
seriesColors: [ "rgba(255, 81, 82, 1)" ],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
label: '''',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
max:90,
min:10,
tickOptions: {
angle: -45,
fontFamily: ''arial'',
fontSize: ''7.2pt''
}
},
yaxis: {
label: yAxisLabel,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: ''arial'',
fontSize: ''8.5pt''
},
tickOptions: {
fontFamily: ''arial'',
fontSize: ''7.2pt''
}
}
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: ''#efefef'', // *Color of the grid lines.
background: ''#ffffff'', // CSS color spec for background color of grid.
borderColor: ''#999999'', // CSS color spec for border around grid.
borderWidth: 0.2, // pixel width of border around grid.
shadow: false
}
});
}
Encontré una solución para este problema molesto. De hecho, se vinculó en otra respuesta a un problema similar en .
El enlace directo a la solución está aquí.
Lo he verificado y funciona muy bien. Aquí están las muestras que construí para mostrar el truco en acción. Abra las muestras en la versión adecuada de IE (7, 8 o 9 con el modo de navegador configurado en IE7 o IE8) y luego pruebe la vista previa de impresión y verá la diferencia:
PD: Por favor no dudes en darle a @usue1065335 un +1, lo hice, por encontrarlo, buen compañero de trabajo :)