daily roster - print 功能

[lxm218]

请给daily roster 增加print 的功能，就是把页面直接做成pdf然后print出来

[liyangwood]

可以请一凡先研究下。

[lxm218]

@ivanrex 你能不能研究一下，如果print页面，不是export到excel，是直接在页面加一个print button，可以把页面print出来

[jinli]

This link has some information about priting background color:
http://stackoverflow.com/questions/5110833/css-how-to-print-a-table-with-background-color-without-print-settings-changes

[haoling-m]

Here is a solution
link

The HTML:

<div class="redBox">
  <div class="content">Black on red</div>
</div>

The css:

.redBox {
  /* o no, does not work with print */
  background-color: red;
}

@media print {
  .redBox {
     position: relative;
     overflow: hidden; /* this might not work well in all situations */
  }
  .redBox:before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     /* and here it is, the background color */
     border: 99999px red solid;
     z-index: 0; /* was required in my situation */
  }
  .redBox * {
    /* was required in my situation */
    position: relative;
    z-index: 1;
  }
}

"

[haoling-m]

@jinli
The idea is browser independent: using box shadow as background color.
I am still working on how to convert to React JSX format.

let titleStyles = [{
            textAlign:"center",
            background: "unset",
            box-shadow: "inset 0 0 0 1000px red"            
        }, {
            textAlign:"center"
        }] 

currently the code is in dailyRoster.jsx

let titleStyles = [{
            textAlign:"center",
            background: programTitleColor
        }, {
            textAlign:"center"
        }]

Thanks.

[jinli]

@haoling-m sounds good. When you make change, make sure you create a new git hub branch.

thanks