5

印刷レイアウトで svg の一部を非表示にする可能性はありますか。

特に、ハイストックの範囲セレクターとナビゲーターがページを印刷するのを非表示にするのが好きです。

これは、js トリガー ボタンなしで機能するはずです。ブラウザの印刷ボタンが使用されたときに機能するはずです。

css media=print を使用して要素を表示/非表示にし、このイベントを jquery にバインドする可能性はありますか?

印刷レイアウトの黄色い部分を隠す必要があります: http://i49.tinypic.com/24mbxop.png

この例では:

$(function() {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

});

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/

4

2 に答える 2

7

@ボンダイが言ったこと。

次のようなクラスを作成します

@media print {
    .unprintable {
        visibility: hidden;
    }
}

そして、印刷したくないsvg要素にクラスを適用します

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="50"  cy="50"  r="40" fill="red" />
   <circle cx="150" cy="50"  r="40" fill="red" />
   <circle cx="50"  cy="150" r="40" fill="blue" class="unprintable" />
   <circle cx="150" cy="150" r="40" fill="red" />
</svg>

印刷しようとすると、青い円が見えなくなります。

http://jsfiddle.net/EqDGQ/

visibility: hidden;うまくいかない場合は、同様に試してdisplay: none;ください。

編集済み

描画時にクラスを追加できない場合は、ページの読み込み後に Javascript を使用してそのクラスを追加します。

画面からも要素が削除されるため、hide() は使用できません。新しいタブ/ウィンドウを開いて hide() を呼び出す必要がありますが、質問に記載されているように、ユーザーはブラウザー メニューを使用して印刷できます。次に、新しいタブ/ウィンドウを開いて hide() を呼び出す機会がありません。

そのため、ページの読み込み時に .unprintable クラスを追加する必要があります。次に、画面にはすべてが表示されますが、印刷時に .unprintable 要素は印刷されません。

サイトへのリンクを投稿して、何を隠したいか教えていただければ、JS コードの作成をお手伝いできますが、次のようになります: http://jsfiddle.net/EqDGQ/1/

$(function() {
    $('svg circle[fill="blue"]').attr('class', 'unprintable');
});

----------------

再編集！:)

長方形の領域内のすべての svg 要素に「.unprintable」クラスを追加するこの JS 関数 (jQuery が必要) を作成しました。

setUnprintableArea = function(id, xMin, yMin, xMax, yMax, rightAligned) {
    if (rightAligned) {
        svgWidth = $('#'+id+' .highcharts-container svg')[0].getBoundingClientRect().width;
        xMin += svgWidth;
        xMax += svgWidth;
    }
    $('#'+id+' .highcharts-container svg *').filter(function() {
        rect = this.getBoundingClientRect();
        return (xMin <= rect.left && rect.right  <= xMax &&
                yMin <= rect.top  && rect.bottom <= yMax);
    }).attr('class', 'unprintable');
};

この関数を次のように呼び出すことができます。

setUnprintableArea('container', 15, 45, 240, 70); // Zoom
setUnprintableArea('container', -55, 15, 0, 40, true); // Top-right Buttons
setUnprintableArea('container', 0, 430, Number.MAX_VALUE, Number.MAX_VALUE); // Horiz Scroll Bar

右揃えのものを非表示にする必要がある場合は、rightAlignedparam をtrueに設定して y 軸を svg の右端 (右端で x=0 を意味します) に設定し、それに応じて xMin と xMax を調整します。

私はこれをフィドルに置きました：http://jsfiddle.net/DXYne/1/

これは解決策になりますか？

于 2013-03-15T11:49:27.060 に答える
2

上記は当てはまりますが、新しい css クラス、Javascript (私は大好きですが)、またはランタイム ロジックを導入しないアプローチの場合:

@media print {
    svg circle[fill="blue"] { 
       display:none; 
    }
}

それが役に立てば幸い。

于 2013-03-15T14:59:47.237 に答える