5

これには本当に簡単な解決策があるはずですが、これまでのところ私はそれを見つけることができませんでした.

私は Zurb Foundation を使用しています。基本的には、フォーム (上) から入力を取得し、angular.js を使用してコンテンツ (下) を入力するライブ フォームを作成しています。その後、ユーザーはページを PDF に印刷します。以下のコンテンツのレイアウトを維持したいのですが、印刷時に上のフォームを非表示にしたいと考えています。Zurb には細かい「印刷用に隠す」CSS ルールがあり、上記のフォームに適用すると問題なく動作するように見えますが、印刷用スタイルシートを切り替えると、基本的にすべての CSS が取り除かれ、醜い状態に戻ります。

提案？

4

3 に答える 3

1

これらのタイプの状況で私が行ったことは、print.css.

<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

ブラウザが印刷中の場合、global.cssファイルが最初にロードされ、その後print.cssファイルが上書きされます。

ただし、background: *印刷時にデフォルトですべてのブラウザですべてのルールがオフになるため、一部のスタイルは関係なく損なわれることに注意してください.

于 2013-03-28T16:21:43.340 に答える
1

メディアに CSS メディア クエリを使用してみましたprintか?

.foo {
    height:150px;
    width:150px;
    background-color:#F00  // see what I did there?
}

.bar {
    height:10px;
    width:50%;
    border-radius:5px;
    background-color:#000
}

.baz {
    width:100px;
    height:150px;
    background-color:#FFF;
}

@media screen {
    .baz {
        display:block;
    }
}

@media print {
    .baz {
        display:none;
    }
}

これで、 の一部.bazのプロパティのみがメディア クエリの対象になります。.bazクエリ自体の内部または外部に のプロパティを自由に配置できます。同様に、すべてののプロパティをメディア クエリに入れることもできますが.baz、それはあなたが探しているものではないと思います。

于 2013-03-28T05:35:00.090 に答える
0

zurb の印刷スタイル シートについての idk です。例がないと、答えるのがかなり難しいですが、オープン ソース ライブラリの weasyprint を使用して、html/css を pdf に変換できますhttps://github.com/Kozea/WeasyPrint

于 2013-03-28T07:08:44.557 に答える