Tranform.Rotate css打印窗口无法正常工作? JS

时间:2017-07-26 07:20:17

标签: javascript asp.net html5 css3 rotatetransform

我想以90度打印我的数据,但是我的transform.rotate css样式在这里不起作用我的html

   <div id="content">
        <div id="dvRef"  class="divSquare">1</div>
        <div  id ="dvDate"  class="divSquare">2</div>
        <div style='clear:both'></div>
        <div id="dvWords" class="divSquare">3</div>
        <div id="dvAmount" class="divSquare">4</div>
  </div>

JS for print window

        var win = window.open('', 'printwindow','height=600,width=800');
        var str = '<html><head><title> alflah</title>';
        str = str + '<style> #content  {     position: relative;   top: 90px;   -webkit-transform: rotate(90deg);  -moz-transform: rotate(90deg);  -o-transform: rotate(90deg);   -ms-transform: rotate(90deg);  transform: rotate(90deg);    }      div#dvAmount { position: relative;  left: 218px; } .divSquare{     width:20%; height:10px; margin:4px;  float: left  } div#dvDate {  left: 218px;   position: relative;   top: -16px;  }  </style>';
        str = str + '   </head>';
        $(win.document.head).html(str);
        $(win.document.body).html('<body>' + $("#content").html() + '</body></html>'); 
        win.document.close();
        win.focus(); // necessary for IE >= 10
        win.print();
        win.close();

我的css顶部和对齐工作,但我需要transform.rotate也工作,但它没有任何想法。我正在添加js小提琴链接

Link to problem JS Fiddle

0 个答案:

没有答案