javascript - 如何在打印时对齐文本

Question

我正在尝试打印一个我成功完成的 HTML 表格，但我面临的问题是我想在打印时将两列的数据右对齐，但那没有发生

我正在使用 CSS @media print 来实现这个但没有得到结果

我有 2 列 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 .