1

我正在尝试打印我的图表，它可以通过 Firefox 和 Chrome 正确打印。

但如果我尝试用 IE 打印它，它会显示图形背后的图形画布 HTML 标签。正如你在图片中看到的那样。并且它还把图轴文本放在了整个图上.. :(

我尝试了下面的解决方案，它说它解决了这个问题，但它对我有用:(

http://blog.muonlab.com/2010/06/02/getting-position-absolute-canvas-elements-to-print-correctly-in-ie/

下面是问题的截图。

打印 jqplot 时的 IE 问题

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>

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 "}

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
            }

        });
    }
4

2 回答 2

1

我遇到了这个烦人的问题的解决方案。它实际上与 StackOverflow 上类似问题的另一个答案相关联。

解决方案的直接链接在这里。

我已经验证过了，效果很好。以下是我为展示 hack 的实际操作而构建的示例。IE以适当的版本（7、8 或 9，浏览器模式设置为 IE7 或 IE8）打开示例，然后尝试打印预览，您将看到不同之处：

PS：请不要犹豫，给@user1065335 +1，我做到了，为了找到它，干得好伙伴:)

于 2012-07-13T12:02:01.777 回答
1

好吧，我们在我们的站点中使用了Mordernizr来支持 HTML5。并优化代码而不是获取整个 mordernizr 文件。我们创建了一个自定义的 Mordernizr 文件。

那就是问题所在，我们忘记从那里包含 PRINTSHIV 复选框，这就是 wat 搞砸了 :)

好吧，这是有效并解决了这个问题的链接。

这件事搁置了很长时间。昨天刚刚解决，很高兴。

还要感谢 BORO 的回答，这有助于防止您使用 Mordernizr。

有效的CUSTOM MORDERNIZR

于 2012-09-27T07:03:56.200 回答