Question

我有一张需要打印的表格。但是，可能会有一些字段留空，我希望它们完全从我的打印视图中排除。我在谈论JavaScript window.print();函数及其打开的打印窗口。

有没有办法可以做到这样的事情？有没有办法让我在这样的事件中处理逻辑（即在打印之前？）。

Answer 1

您可以使用CSS @media结合一些javascript来根据字段是否为空来更改类。像这样......

＆＃13;

var fields = document.getElementsByClassName("field");
for(var i=0; i < fields.length; i++){
    fields[i].addEventListener('keyup', function() {
    	if(this.value.length) {
    	    this.parentElement.className = "";
    	} else {
    	 	this.parentElement.className = "empty";   
    	}
    });
}

＆＃13;

@media print {
    .empty {
        display: none;
    }
}

＆＃13;

<div class="empty">Name: <input class="field"></div>
<div class="empty">Field: <input class="field"></div>
<div class="empty">Foo: <input class="field"></div>

＆＃13;

（在片段中，向某个字段添加内容但不是全部，然后点击ctrl + p。您将看不到打印预览中的空字段）

如果使用jQuery，你可以清理选择器并循环使js像这样

$(".field").on("keyup", function () {
    $this = $(this);
    if ($this.val().length) {
        $this.parent().removeClass("empty");
    } else {
        $this.parent().addClass("empty");
    }
});

Answer 2

您可以查看window.print事件，并使用一些jquery或javascript来检查空输入并隐藏它们。

(function() {
    var beforePrint = function() {
        $('input').each(function(i,el){
          if($(el).val() == ''){
            $(el).hide();
          }
        });
    };
    var afterPrint = function() {
      $('input').show();
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

https://jsbin.com/gacikezulo/edit?html,js,console,output

阅读这篇文章here。但我采用了组合脚本，除了Opera

之外，它应该可以工作

使用JavaScript隐藏打印视图中的空白字段

2 个答案: