js開發打印證書功能

最近突然被加了要打印證書的功能的需求。其實打印功能很簡單，直接調用window.print()就可以打印，只是這是最基本的打印，會打印當前頁面的所有元素，而我們要的是局部打印，實現方法：

1.設置好開頭與結尾，然后進行識別和打印（前邊有介紹），見：https://www.cnblogs.com/ljwsyt/p/9511546.html；

2.使用jqPrint進行打印。jqPrint是對window的打印進行了一些簡單便捷的封裝，其源代碼很少。

地址：https://github.com/MRlijiawei/enroll/blob/master/enroll-webapp/src/main/resources/static/plugins/print/jquery.jqprint-0.3.js

 

項目要求寫一個公共插件，在任何系統都可以使用。但是局限性太大，而且和應用場景有很大關聯。如果是做一個拖拽組件，那就只能管理員的角色進行一一拖拽，比較費時；最終暫時寫了一個用戶自助打印的組件。

思路是使用絕對布局把文字定位到證書圖片上相應的位置，然后打印。

html代碼：

<div>
    <div id="printArea">
        <!--startprint942,631-->
        <div id="toPrint">
        </div>
        <!--endprint-->
    </div>
    <div style="display:none">
        <button onclick="printNotifier()">打印</button>
    </div>
</div>

有效區域只有一個空的div

css代碼：

#toPrint {
    position:absolute;
    /* background:url('/res/img/notifications.png'); */
    left: 50%;
    top: 50%;
}

#toPrint div {
    position:absolute;
}

#toPrint img {
    position:absolute;
}

可以看到只是設置了一個居中和絕對布局。其余樣式在js中動態控制，因為做了自適應和公共化。

js代碼：

myApp.controller('notifierController', function ($rootScope, $scope, services, $sce, $stateParams, $state) {
    $scope.services = services;
    
    //查詢錄取通知書內容
    services["getApplyStatus"] = function (param) {
        return $rootScope.serverAction('/apply/queryDegreeApplyInfo', param, "GET");
    };
    
    //模板
    $scope.printObj = {
        notifierObj:{
            "url": "/res/img/notifications.png",
            "height": "631",
            "width": "942"
        },
        paramList:[{
                "objName":"黃大明",
                "left":"133",
                "top":"189",
                "size": "28"
            },{
                "objName":"SXXX小學",
                "left":"460",
                "top":"270",
                "size": "28"
            },{
                "objName":"2018",
                "left":"195",
                "top":"314",
                "size": "28"
            },{
                "objName":"8",
                "left":"325",
                "top":"314",
                "size": "28"
            },{
                "objName":"31",
                "left":"405",
                "top":"314",
                "size": "28"
            }]
    }
    
    services.getApplyStatus('token').success(function(res) {
        if ('OK' == res.result) {
            if(res.msg) {
                $scope.printObj.paramList[0].objName = res.msg.studentName;
                $scope.printObj.paramList[1].objName = res.msg.applySchoolName;
                
                //屏幕自適應
                suitScreen($scope);                
                //組裝頁面
                assembleHtml($scope);                
                //打印
                printNotifier();
            }
        } else {
            layer.alert(res.msg);
        }
    });
    
    //拖動
    /*$(document).on("mousedown","#toPrint",function(e){
        //webkit內核和火狐禁止文字被選中
        $('body').addClass('select')
        //ie瀏覽器禁止文字選中
        document.body.onselectstart=document.body.ondrag=function(){
            return false;
            }
        $scope.moveBegin = true;  
        $scope.mouseStartPoint = {"left":e.pageX,"top":  e.pageY};  
    });  
    $(document).on("mouseup",function(e){       
        $scope.moveBegin = false;  
    }); 
    $(document).on("mousemove",function(e){
        if(!$scope.moveBegin) {
            return;
        }
        $("#toPrint").css("margin-left", e.pageX - $scope.mouseStartPoint.left - 454 + "px");
        $("#toPrint").css("margin-top", e.pageY - $scope.mouseStartPoint.top - 315 + "px");
    });*/
});

function printNotifier() {   
    try{
        print.portrait = false;//橫向打印 
    }catch(e){
        //alert("不支持此方法");
    }
    var HKEY_RootPath="HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
   /*try{
       var WSc=new ActiveXObject("WScript.Shell"); 
       HKEY_Key="header"; 
       WSc.RegWrite(HKEY_RootPath+HKEY_Key,""); 
       HKEY_Key="footer"; 
       WSc.RegWrite(HKEY_RootPath+HKEY_Key,"");
  }catch(e){
      
  }*/
    $("#printArea").jqprint();   
}

function suitScreen($scope) {
    var effectiveHeight = findParam("#toPrint", "height");
    var effectiveWidth = findParam("#toPrint","width");
    if($scope.printObj.notifierObj.width/effectiveWidth > $scope.printObj.notifierObj.height/effectiveHeight) {
        //取最接近的一個屬性進行自適應，並適當調小一些
        var suitTimes = $scope.printObj.notifierObj.width/effectiveWidth*1.2;
    } else {
        var suitTimes = $scope.printObj.notifierObj.height/effectiveHeight*1.2;
    }
    $scope.printObj.notifierObj.width = $scope.printObj.notifierObj.width/suitTimes;
    $scope.printObj.notifierObj.height = $scope.printObj.notifierObj.height/suitTimes;
    for(i=0;i<$scope.printObj.paramList.length;i++) {
        $scope.printObj.paramList[i].size = $scope.printObj.paramList[i].size/suitTimes;
        $scope.printObj.paramList[i].left = $scope.printObj.paramList[i].left/suitTimes;
        $scope.printObj.paramList[i].top = $scope.printObj.paramList[i].top/suitTimes;
    }
}

function assembleHtml($scope) {
    var htmlStr = "<img src='" + $scope.printObj.notifierObj.url+"' style='width:"+$scope.printObj.notifierObj.width+"px;height:"+
        $scope.printObj.notifierObj.height+"px'>";
    for(i=0;i<$scope.printObj.paramList.length;i++) {
        var nowObj = $scope.printObj.paramList[i];
        htmlStr += "<div style='font-size:"+nowObj.size+"px;top:"+nowObj.top+"px;left:"+nowObj.left+"px'>"+nowObj.objName+"</div>";
    }
    $("#toPrint").css("margin-left", (0-$scope.printObj.notifierObj.width)/2+"px");
    $("#toPrint").css("margin-top", (0-$scope.printObj.notifierObj.height)/2+"px");
    $("#toPrint").css("height", $scope.printObj.notifierObj.height+"px");
    $("#toPrint").css("width", $scope.printObj.notifierObj.width+"px");
    $("#toPrint").append(htmlStr);
}

//獲取有效區域
function findParam(targetObj, attribute) {
    //取數字
    if($(targetObj).css(attribute) && $(targetObj).css(attribute).replace(/[^0-9]/ig,"") != '0') {
        return $(targetObj).css(attribute).replace(/[^0-9]/ig,"");
    } else {
        //遞歸
        return findParam($(targetObj).parent(), attribute);
    }
}

angular1的框架。

其中有幾個關鍵思路：

（1）模板結構定義，及根據參數長度動態生成頁面。

（2）屏幕自適應，選取比較接近的（寬或高），然后計算倍數，並做了1.2倍的縮小，使其不至於都挨着頁面邊界不美觀。取有效寬度時，從需要打印的元素往上層parent一層層遞歸取，直到取到有效的寬和高。遞歸時，由於已開始沒有return，導致一直取不到最終值

return findParam($(targetObj).parent(), attribute);

（3）拖動實現，已注掉的那段mouse事件，思路是點擊目標元素時開始計算坐標，放開時停止，中間移動的動作根據坐標偏移量來調整目標的left和top。有個小瑕疵就是有時候放開之后再點擊就回到頁面中間去了，由於后來做了頁面大小的自適應就沒有管了。

（4）打印的時候一些設置。由於是自動打印，不能要求用戶手動我改設置，主要是兩個，一個是基本上證書都是橫向，所有打印要改成默認橫向，然后去掉頁眉頁腳，實現的代碼是

try{
print.portrait = false;//橫向打印
}catch(e){
//alert("不支持此方法");
}

下邊注釋掉的網上說的是去掉頁眉頁腳用的，但是實測加上之后反而去不掉了。

 

開發完成之后，基本功能也都OK了，然后就是考慮兼容性的問題了。自適應解決了很大程度上的兼容性問題，但是對於瀏覽器的兼容性和移動端的兼容性還需要再進行測試。

經測試，在移動端的時候，如果屏幕分辨率較小，那么就會出現子題比較小的情況。而谷歌對於小於12px的字體，大小始終固定在12不會再變小，這就出現了兼容性問題。

解決思路是按比例縮放，使用屬性是-webkit-transform。而縮放默認是以中心為原點進行縮放，而我們畫圖填充是以左上角為原點的，所有縮放的同時還必須使用transform-origin:0 0設置以左上角為基准進行縮放。

最后就是，如果大於12px而又進行了縮放，那么就會變得更大，所有我們給這兩個樣式設置一個條件，那就是以12px作為臨界點。

代碼如下：

function assembleHtml($scope) {
    var htmlStr = "<img src='" + $scope.printObj.notifierObj.url+"' style='width:"+$scope.printObj.notifierObj.width+"px;height:"+
        $scope.printObj.notifierObj.height+"px'>";
    for(i=0;i<$scope.printObj.paramList.length;i++) {
        var nowObj = $scope.printObj.paramList[i];
        if(nowObj.size < 12) {
            htmlStr += "<div style='font-size:"+nowObj.size+"px;top:"+nowObj.top+"px;left:"+nowObj.left+
            //谷歌瀏覽器字體小於12px時會不再變小，使用-webkit-transform兼容，並設置已左上角作為變換原點
                "px;-webkit-transform:scale("+nowObj.size/12+","+nowObj.size/12+");transform-origin:0 0'>"+nowObj.objName+"</div>";
        } else {
            htmlStr += "<div style='font-size:"+nowObj.size+"px;top:"+nowObj.top+"px;left:"+nowObj.left+
                "px'>"+nowObj.objName+"</div>";
        }
    }
    $("#toPrint").css("margin-left", (0-$scope.printObj.notifierObj.width)/2+"px");
    $("#toPrint").css("margin-top", (0-$scope.printObj.notifierObj.height)/2+"px");
    $("#toPrint").css("height", $scope.printObj.notifierObj.height+"px");
    $("#toPrint").css("width", $scope.printObj.notifierObj.width+"px");
    $("#toPrint").append(htmlStr);
}

附上效果對比圖，更容易理解些

其中“類好啊”是未變換未設置原點的最終效果，“北門小學”是都設置后的效果，下邊的日期是設置了縮放但是沒有設置原點的效果。

 

還有一個很關鍵的步驟就是定義好模板之后獲取數據並替換掉模板中的值。原本設計要做一個通用的，但是就要存庫，而且一個模板一張圖片就要存一次，而且對於值的獲取后台也不好處理，所有暫時就直接js中定義模板了。

 

整個流程很簡潔也很實用，希望大家喜歡。感謝大家支持，求關注，求紅包獎勵金。