AngularJS实现Div仅单次打印需求：禁止重复打印

嘿，这事儿好办！我们只需要加一个状态标记来追踪打印是否已经触发过，就能轻松实现单次打印的需求。下面是修改后的完整代码和思路解析：

基础实现（全局单次打印） #

首先在你的AngularJS控制器里，初始化一个状态变量来记录是否已经执行过打印，然后修改printDiv函数，每次触发前先检查这个状态：

// 在控制器内初始化状态变量
$scope.hasPrinted = false;

$scope.printDiv = function(divName) {
    // 先判断是否已经打印过，若是则直接返回
    if ($scope.hasPrinted) {
        return;
    }

    var printContents = document.getElementById(divName).innerHTML;
    var popupWin = window.open('', '_blank', 'width=300,height=300');
    popupWin.document.open();
    popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
    popupWin.document.close();

    // 打印触发后，将状态标记为已打印
    $scope.hasPrinted = true;
};

进阶实现（针对不同Div分别控制单次打印） #

如果你的页面有多个需要单独控制单次打印的Div，我们可以用一个对象来存储每个Div的打印状态，这样每个Div都能独立限制仅打印一次：

// 初始化存储Div打印状态的对象
$scope.printedDivs = {};

$scope.printDiv = function(divName) {
    // 检查当前Div是否已经打印过
    if ($scope.printedDivs[divName]) {
        return;
    }

    var printContents = document.getElementById(divName).innerHTML;
    var popupWin = window.open('', '_blank', 'width=300,height=300');
    popupWin.document.open();
    popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
    popupWin.document.close();

    // 标记当前Div已打印
    $scope.printedDivs[divName] = true;
};

关键逻辑说明 #

• 状态变量hasPrinted或printedDivs用来记录打印状态，避免重复触发打印操作
• 在打印逻辑执行前先做状态检查，已打印则直接终止函数
• 打印操作完成后更新状态标记，确保后续触发不再执行打印

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