js window.print() 打印TD背景色

js window.print() 打印TD背景色,客户需要在打印的label固定文字增加浅灰色背景色,页面样式调整如下:
全局CSS样式设置如下:

@media print {
	body {
	    -webkit-print-color-adjust:exact;
        -moz-print-color-adjust:exact;
        -ms-print-color-adjust:exact;
        print-color-adjust:exact;
    }
}

TD元素 的样式background-color属性增加 !important

 <tr>
	<td height="15px" width="15%" colspan="2" align="center" style="background-color:#e0e0e0 !important"><strong>公司名称</strong></td>
    <td colspan="3" width="35%" th:text="*{comName}"></td>
    <td colspan="2" width="15%" align="center" style="background-color:#e0e0e0 !important"><strong>项目名称</strong></td>
    <td colspan="2" width="35%" th:text="*{projectName}"></td>
</tr>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: window.print()是JavaScript中的一个方法,用于在浏览器中打印当前页面。它不需要任何参数设置,只需要在需要打印的页面中调用即可。但是,可以通过CSS样式来设置打印时的一些参数,例如打印页眉、页脚、背景颜色等。具体的设置方法可以参考CSS的@media print规则。 ### 回答2: 在网页中使用 window.print() 方法可以快速实现页面的打印,但是如何设置打印参数呢?下面我们来详细介绍一下。 首先,可以在 window.print() 方法中传入一个参数,该参数是一个对象,包含各种打印参数的设置。 以下是一些可用的参数及其作用: 1. mediaType:设置打印输出的介质类型,可以是 all、print、screen 等。 2. orientation:设置打印页面的方向,可以是 landscape(横向)或 portrait(纵向)。 3. pageSize:设置打印页面的大小,可以是 A4、Letter 或其他自定义大小。 4. printBackground:设置是否打印网页中的背景图和颜色,默认为 false,不打印。 5. scale:设置打印页面的缩放比例。 示例代码如下: ``` window.print({ mediaType: 'print', orientation: 'landscape', pageSize: 'A4', printBackground: true, scale: 0.5 }); ``` 除了在 window.print() 方法中传入参数进行打印参数的设置外,也可以通过 CSS 样式来设置。 以下是一些常用的打印 CSS 样式: 1. @page:设置打印页面的属性,如大小、方向等。 2. @media print:设置在打印页上显示或隐藏的元素。 示例代码如下: ``` @page { size: A4; margin: 1cm; orientation: landscape; } @media print { body { visibility: hidden; } .printable-area { visibility: visible; } } ``` 以上就是关于 window.print 打印参数设置的介绍。需要注意的是,不同浏览器可能存在兼容性问题,具体使用时需要进行测试。 ### 回答3: window.print() 是一个 JavaScript 方法,用于在浏览器中打印当前页面。该方法不需要任何参数,但是可以通过设置浏览器的一些打印属性来实现打印效果的更改。 一般来说,我们可以通过 CSS 来设置打印效果,包括字体大小、颜色、背景、间距等。CSS 打印属性与常规网页样式有所不同,它们只在打印时有效,不会影响常规浏览。 以下是一些常用的 CSS 打印属性: 1. page-break-before / page-break-after: 设置打印页面的换页方式,可选值为 auto(自动分页)、always(总是分页)和 avoid(禁止分页)。 2. @page: 这是一个 CSS at-rule,用于定义打印页面的一些属性,包括大小、边距、背景、头部、尾部等。例如: @page { size: A4; /* 打印尺寸 */ margin: 2cm; /* 页边距 */ padding: 1cm; /* 内边距 */ footer: "Page " counter(page); /* 页脚 */ } 3. @media print: 这是另一个 CSS at-rule,用于指定在打印模式下应用的样式。例如: @media print { body { font-size: 14pt; /* 字体大小 */ color: black; /* 字体颜色 */ } img { max-width: 100%; /* 图片宽度 */ height: auto; /* 图片高度自适应 */ } } 除此之外,我们还可以使用 JavaScript 来设置打印页面的一些属性,例如修改页面标题、隐藏或显示特定元素等。例如: window.document.title = "My Printed Page"; // 修改页面标题 var elem = document.getElementById("logo"); // 获取元素 if (window.matchMedia("print").matches) { // 判断打印模式 elem.style.display = "none"; // 隐藏元素 } else { elem.style.display = "block"; // 显示元素 } 总之,通过设置 CSSJavaScript 参数,我们可以轻松地定制页面的打印效果,以满足不同的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未去

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值