Question

我在IE中打印有jqPlot的页面时遇到问题。我一直试图解决这个问题，并且已经看过几个说明修复的帖子;但是，它们并没有解决我的问题。

我尝试了CanvasHack和编辑excanvas.js注释掉overlayE1逻辑（来自这篇文章 - Print issue with JQplot on IE）。从所有解决方案中，我看到没有任何作用，所以我必须有一个尚未公布的解决方案。

要说明问题，jqPlot在所有浏览器中都是正确的（IE，Chrome，Firefox）;但是，当我预先打印预览或打印（PDF或打印机）时，一些div已经移位。见效

以下是我的HTML。

<!DOCTYPE HTML>
<html>
<head>
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="dist/excanvas.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="dist/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="dist/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="dist/plugins/jqplot.highlighter.min.js"></script>
    <script type="text/javascript" src="dist/plugins/jqplot.cursor.min.js"></script>
    <script type="text/javascript" src="dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <link rel="stylesheet" type="text/css" href="dist/jquery.jqplot.css" />

    <script language="javascript" type="text/javascript">
         (function($) {
         $.fn.CanvasHack = function() {
          var canvases = this.find('canvas').filter(function() {
           return $(this).css('position') == 'absolute';
          });

          canvases.wrap(function() {
           var canvas = $(this);
           var div = $('<div />').css({
            position: 'absolute',
            top: canvas.css('top'),
            left: canvas.css('left')
           });
           canvas.css({
            top: '0',
            left: '0'
           });
           return div;
          });

          return this;
         };
        })(jQuery);

 </script>
 </head>
 <body>
   <div id="displaysection" style="width:400px;height:400px;"></div>
    <script>
       $.jqplot.config.enablePlugins = true;
       $(document).ready(function () {
                        var sinPoints = []; 
                          for (var i=0; i<2*Math.PI; i+=0.1){ 
                             sinPoints.push([i, 2*Math.sin(i-.8)]); 
                        }                            

                        plot = $.jqplot("displaysection", [sinPoints], {
                          title: {
                            text: "Title",
                            textAlign: "center",
                            fontSize: 20
                          },
                          legend: {
                            show: false
                          },
                          axes: {
                            xaxis: {
                              label: "x-Axis",
                              min: 0//,
                              //labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                            },
                            yaxis: {
                              label: "y-Axis"//,
                              //labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                            }
                          },
                          highlighter: {
                            show: true,
                            sizeAdjust: 3
                          },
                          cursor: {
                            show: true,
                            tooltipLocation:"nw",
                            zoom:true
                          },
                          seriesDefaults:{
                            showMarker: false,
                            showLine:true,
                            showLabel: true,
                            shadow: false,
                            lineWidth:3
                          },
                          series:[
                            { 
                              label: "Sin Curve",
                              color: "purple"
                            }                   
                          ]
                        });
            });
    $('body').CanvasHack();
   </script>
</body>
</html>

Answer 1

免责声明：在IE8 IE8浏览器模式下测试。此模式确实存在曲线偏向左侧的问题。

当我调试你的代码时，我发现var canvases = this.find('canvas')...总是返回一个不包含任何内容的jQuery对象，尽管有几个canvas对象可供查找。

查看代码，$('body').CanvasHack();实际上并未在$(document).ready块中执行。我发现移动该调用以便在创建图形后直接执行它似乎可以解决问题。

在上面的代码中，这个：

        });
});
$('body').CanvasHack();

需要：

        });
    $('body').CanvasHack();
});

我还发现不需要修改excanvas.js - 它似乎没有任何区别。

JQplot问题 - 使用IE 8打印

1 个答案: