​

最近接到一個需求，要求實現自動列印功能，一般網頁列印pdf需要藉助瀏覽器的pdf元件，而且還要彈出列印視窗，再點選列印才能實現。

那麼如何實現自動列印了，從點選自己網頁上3次縮減到點選一次了？

一.實現思路：

1.讀取本地印表機服務

2. 服務端列印肯定不行需要一個客戶端

3.應用程式需要和本地列印服務通訊，傳送不同的列印指令

本想自己用Python寫一個列印控制元件的，但是時間來不及啊。。

二.採用技術知識

(以自動列印pdf為例)

1. java操作檔案流
2. javascripte
3. pdfjs
4. Lodop列印控制元件 http://www.lodop.net/

三.技術細節

1. 關於lodop預覽列印是開源免費，但是靜默列印是需要收費的，直接使用靜默列印會在列印紙張最下面出現水印，我們只需要將印表機紙張大小就可以將水印列印在無效位置，這樣在列印的結果上就不會出現水印了
2. pdfjs使用版本不能太高，我這裡使用 1.4.137。ps:如果找不到對應版本請與評論與我聯絡，我分享給大家

​

四.上程式碼

一.後端核心方法主要是將pdf檔案轉成base64編碼

 public static String encodeBase64File(File file) throws Exception {
        FileInputStream inputFile 
 
= new FileInputStream(file);
        byte[] buffer = new byte[(int)file.length()];
        inputFile.read(buffer);
        inputFile.close();
        return new BASE64Encoder().encode(buffer);
    }

二.前端核心程式碼

1.在html檔案body需要插入

<canvas id="thepdfcanvas2" style="display:none;"></canvas>
 

2. 需要在html頁面引入lodop列印js,pdfjs

<script type="text/javascript" src="../static/js/print/LodopFuncs.js"></script>
<script type="text/javascript" src="../static/js/pdfjs-dist/build/pdf.js"></script>
<script type="text/javascript">
var LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
</script>

3.傳送ajax請求向後端返回pdf檔案流,通過pdfjs繪製pdf成圖片可以進行屬性調節，進而呼叫print靜默列印

function printOneURL(pdfUrl,preview){
    var params = {"path": pdfUrl};
    $.sendDefaultAjax(jsPPath + "/printModel/print.do", params,function (data) {
        if (data.code === 0) {
            var  pdfData = atob(data.msg);
            PDFJS.workerSrc =
                '../static/js/pdfjs-dist/build/pdf.worker.js';
            //從pdf檔案物件逐頁獲取page，並呼叫toImageAndPrint函式列印內容
            PDFJS.getDocument({data: pdfData}).then(function getPdfHelloWorld(pdf) {
                //此適用pdf只有一個page情況
                pdf.getPage(1).then(function getPageHelloWorld(page) {
                    //scale調節生成的畫布圖片大小，與清晰度有關，需要調整。
                    var scale = 5.5;
                    var viewport = page.getViewport(scale);
                    //將生成的page物件載入到canvas中
                    var canvas = document.getElementById('thepdfcanvas2');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    //此處開始畫畫布
                    page.render(renderContext).promise.then(function(){
                        //回撥函式，此處畫布已載入完，呼叫後續的列印或預覽函式
                        simplePrint(preview); //直接列印
                    });
                });
            });
        }else {
            layer.msg(data.msg, {icon: 2});
        }
    });

};


//preview為true就是預覽列印，預設是直接列印

function simplePrint(preview) {
    var canvasEle = document.getElementById("thepdfcanvas2");
    var dataURL = canvasEle.toDataURL();
    LODOP.PRINT_INIT();
    LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A6");
    LODOP.SET_PRINT_STYLE("Stretch", 2);
    LODOP.ADD_PRINT_IMAGE("0mm", "0mm", "RightMargin:0mm", "BottomMargin:0mm", dataURL);
    if (preview) {
        LODOP.PREVIEW();
    } else {
        LODOP.PRINT();
    }
}

如果大家有什麼問題可以提出來，一起交流，學習。有什麼不對的地方也指出來，我也虛心學習。

自己也是又開始寫部落格了，您們的贊是我寫部落格的動力，謝謝大家。

​