AngularJS打印时隐藏文本框，仅展示输入内容的解决方法

我来帮你搞定这个打印时文本框影响UI的问题，下面是两种实用的解决方案：

方法一：使用CSS打印媒体查询（推荐） #

这种方法不需要修改JavaScript代码，直接通过CSS控制打印时的样式，让文本框隐藏，同时显示它的输入值。

在页面的<head>里添加这段CSS：

@media print {
    .printText {
        display: none;
    }
    .printText::before {
        content: attr(value);
        display: inline;
    }
}

这样当触发打印时，浏览器会自动应用这个样式，隐藏文本框元素，并用伪元素显示它的value属性值。

方法二：修改JavaScript中的打印内容 #

如果你需要在生成打印框架时直接替换掉文本框，可以修改PrintDiv函数，把获取到的contents里的input元素替换成对应的文本。

修改后的JavaScript代码如下：

function PrintDiv() {
    var contents = document.getElementById("dvContents").innerHTML;
    // 替换所有带printText类的input为它的value值
    contents = contents.replace(/<input[^>]+class="[^"]*printText[^"]*"[^>]+value="([^"]*)"[^>]*>/g, '$1');
    
    var frame1 = document.createElement('iframe');
    frame1.name = "frame1";
    frame1.style.position = "absolute";
    frame1.style.top = "-1000000px";
    document.body.appendChild(frame1);
    var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
    frameDoc.document.open();
    frameDoc.document.write('<html><head><title>DIV Contents</title>');
    frameDoc.document.write('</head><body>');
    frameDoc.document.write(contents);
    frameDoc.document.write('</body></html>');
    frameDoc.document.close();
    setTimeout(function () {
        window.frames["frame1"].focus();
        window.frames["frame1"].print();
        document.body.removeChild(frame1);
    }, 500);
    return false;
}

这段代码用正则表达式匹配带有printText类的input元素，然后把整个input标签替换成它的value属性值，这样打印框架里就只会显示纯文本了。

两种方法都能解决你的问题，第一种更简洁易维护，第二种适合需要对打印内容做更多动态处理的场景，你可以根据自己的需求选择~

内容的提问来源于stack exchange，提问作者sathish kumar