HTML/CSS Progessバーはブラウザに表示されますが、文書を印刷しようとしたときに表示されません

Question

友人が履歴書を作成し、スキル部分にクールな進行状況バーを組み込むのを手助けします。

プログレスバーを作成しました。ブラウザに完全に表示されます。ただし、ページをPDFとして保存しようとすると、プログレスバーは表示されず、空白が表示されます。

私はプログレスバーを持っているコード：

私はPDFとして保存する際、なぜそのレンダリングではない上の任意のアイデア

.w3-progress-container{ 
    width:90%; 
    height:1.5em; 
    position:relative; 
    background-color:#f1f1f1; 
    border-radius:7px; 
    height:12px; 
    margin-top: 5px; 
    background-color: #d5d4d4; 
} 
.w3-progressbar{ 
    background-color: #0060A6; 
    height:100%; 
    position:absolute; 
    line-height:inherit; 
    border-radius:7px; 
} 

.management{ 
    width:93%; 
} 

https://jsfiddle.net/w8kaw4y1/

？

ありがとうございます！

Answer 1

あなたのスタイルにCSSを次のように追加します。

@page { 
    size: A4; 
    margin: 0; 
    box-shadow: initial; 
    -webkit-print-color-adjust: exact; 
} 
@media print { 
    html, body { 
     width: initial; 
     height: initial; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     -webkit-print-color-adjust: exact; 
     -webkit-box-shadow: initial; 
     box-shadow: initial; 
    } 
} 

ライブチェック：https://jsfiddle.net/w8kaw4y1/4/

Answer 2

あなたのスタイルタグ内にこのコードを追加

-webkit-印刷カラー調整：正確。

例

@page { 
     size: A4; 
     margin: 0; 
     box-shadow: 0; 
     -webkit-print-color-adjust: exact; 
    } 
    @media print { 
     html, body { 
      width: 210mm; 
      height: 297mm; 
      margin: 0; 
      padding: 0; 
      overflow: hidden; 
      -webkit-print-color-adjust: exact; 
      -webkit-box-shadow: none; 
      box-shadow: none; 
     } 
    }