Question

我正在尝试打印成功完成的HTML表，但是我面临的问题是我想在打印时将两列的数据对齐到正确的位置，但那不会发生

我正在使用CSS @media print来达到目的，但没有得到结果

我有两列TO Qty和AcceptedQty，他们给了我一个类，在打印时我给出了一些样式。

这是我正在使用的CSS：

.show-on-print {
    display: none;
}

@media print {
  .show-on-print {
    display: block;
    text-align: right;
  }
  .test {
    text-align: right;
  }
}

js打印表格

function printData() {
    var divToPrint = document.getElementById("printFull");
    newWin = window.open("");
    newWin.document.write(divToPrint.outerHTML);
    newWin.print();
    newWin.close();
}

$('#print').on('click', function() {
  printData();
})

这里是my fiddle，我已经在我给班级名称的那一行中发表了评论，

请检查我在做什么错

Answer 1

之所以会这样，是因为您要将html输出到一个新文档中，该文档不会将CSS复制到该文档中。

您需要添加内联CSS或将其附加到html上，如下所示：

  var style = "<style> .text-right{text-align:right}</style>";
  newWin.document.write(divToPrint.outerHTML + style);

这里是fiddle。

Answer 2

在$(tabCell).css('text-align', 'right');之后添加tabCell.classList.add("test");

打印时如何对齐文本

2 个答案: