javascript - window.print() 函数不显示单选按钮和复选框的选中值

标签 javascript html css materialize

我尝试了 window.print() 函数来打印页面,但它没有打印单选按钮的选中值

function myFunction() {
  window.print();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="../css/styles.css" media="screen" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>

<form action="#">
  <p><label><input checked name="group1" style="display: block" type="radio"> <span style="color:blue">Red</span></label></p>
  <p><label><input name="group1" type="radio"> <span>Yellow</span></label></p>
  <p><label><input class="with-gap" name="group1" type="radio"> <span>Green</span></label></p>
</form><button class="waves-effect waves-light btn" id='printButton' onclick="myFunction()">&nbsp;Print&nbsp;</button>

单击打印按钮时,打印页面应该选中单选按钮。

最佳答案

我在使用 Angular Material v9、Chrome v81 时遇到了这个问题。问题是如果背景图像被关闭,单选按钮(和复选框)中的“选中”不会显示,这在 Chrome 中似乎是默认设置。

将以下内容添加到您的样式表将解决问题:

 -webkit-print-color-adjust: exact !important;

也应该适用于 Materialise。

关于javascript - window.print() 函数不显示单选按钮和复选框的选中值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56501373/

相关文章:

javascript - 从 jquery 数组中获取特定项目

javascript - Bootstrap数据api方式与javascript方式

javascript - 如何将由一条线链接的锯齿形 block 动画化为滚动上的一条直线

html - CSS 与 <br> 标签冲突

html - 下拉菜单 HTML

javascript - 滚动到页面加载的特定区域并执行 Ajax 查询

JavaScript 以漂亮的格式保存 JSON 响应到其他文件扩展名

javascript - Material 表:如何改变列的宽度?

页面加载时的 CSS3 滑出动画

css - 标记 HTML5 页脚内容的正确方法是什么?