web打印的最佳解決方案

web打印的痛點

winform打印的方案比較多，實現也比較容易，而且效果也非常炫；但現在越來越多的系統是web系統，甚至是移動端。網上也有非常的web打印方案，但各式各樣的問題非常多，比如js兼容性，穩定性等一直纏繞著眾多的程序員，或者就是web 打印需要瀏覽器安裝 ActiveX 組件，ActiveX安裝不容易成功等等問題。Lodop等插件還是收費的。

新的解決方案 HttpPrinter

對各種方案分析之后，對web在重業務場景的打印需求（比如直接打印，無預覽直接打印，特定格式打印）梳理之后，確定了一個生產環節最佳的WEB打印方案，純JS通過post提交數據到打印伺服器的方案。

js可以脫離語言環境更通用，不管你是java，還是php，甚至只是個前端都毫無障礙；
使用http協議 post模式更簡單，門檻更低，幾行代碼搞定；其實使用webSocket協議也可以，但是在不需要長連接的情況下沒有必要。

web頁面實現源代碼 HttpPrinter web端

{
"ReportType": "gridreport", /報表類型 支持 gridreport fastreport 為空 默認 gridreport/
"ReportName": "test.grf", /報表文件名 需要以英文字母開頭/
"ReportVersion": 1, /可選。報表版本, 為空則默認1 如果本地報表的版本過低 將從 ReportUrl 地址進行下載更新/
"ReportUrl": "http://111.67.202.157:9099/report/test.grf", /可選。為空 將不更新本地報表 , 如果本地報表不存在可以從該地址自動下載/
"Copies": 1, /可選。打印份數，支持指定打印份數。默認1份,如果為零,不打印,只返回報表生成的pdf,jpg等文件/
"PrinterName": "", /可選。指定打印機，為空的話 使用默認打印機, 請在 控制面板 -> 設備和打印機 中查看您的打印機的名稱 /
"PrintOffsetX": 0, /可選。打印右偏移，單位厘米。報表的水平方向上的偏移量，向右為正，向左為負。/
"PrintOffsetY": 0, /可選。打印下偏移，單位厘米。 報表的垂直方向上的偏移量，向下為正，向上為負。/
"Preview": 0, /可選。是否預覽，和主界面設置的效果一樣 為空默認不預覽, 0：不預覽，1：預覽(彈出導出的pdf,jpg等文件)。/
"token": "aa", /可選。只要token值在列表中 方可打印
"taskId": "1234567", /可選。多個打印任務同時打印時，根據該id確定返回的是哪個打印任務。 /
"exportfilename": "", /可選。自定義 導出 文件名稱 例如 test 會 導出 http://127.0.0.1:12345/gridreport/test.pdf 格式為 ip+port+報表類型+名稱+文件類型 */

  "Control": '['  ///*部件框，可選值：AsStaticBox ,AsMemoBox,AsRichTextBox,AsPictureBox (base64格式),AsBarcode*/
    +'{"type": "AsStaticBox", "name": "姓名","value": "高文杰","required": false},'
    +'{"type": "AsStaticBox", "name": "性別","value": "男","required": false},'
    +'{"type": "AsStaticBox", "name": "電話","value": "13165191728","required": false},'
    +'{"type": "AsBarcode", "name": "二維碼","value": "5520002701774727","required": false},'
    +'{"type": "AsPictureBox", "name": "圖片","value": "/9j/4AAQSkZJA/9k=","required": false},'  //base64格式
    +']'),

  "Parameter": '['  ///*參數，type 默認為空即可,已經在報表端設置了 備用字段  
    +'{"type": "", "name": "單號","value": "5520002701774727","required": false},'
    +'{"type": "", "name": "日期","value": "2019-09-09 12:21:12","required": false},'
    +'{"type": "", "name": "year","value": "2018","required": false},'
    +']'),

  "Field": '['  ///*字段， type ftBlob (base64格式) ,ftString ftInteger ftBoolean, ftFloat, ftCurrency,ftDateTime,  size (ftString 設置為實際長度,其他的設置為0,例如 ftInteger ftBlob 等設置為0 )
    +'{"type": "ftString", "name": "快遞單號","size": 255,"required": true},'
    +'{"type": "ftString", "name": "發件人","size": 255,"required": false},'
    +'{"type": "ftString", "name": "發件人電話","size": 255,"required": false},'
    +'{"type": "ftBlob", "name": "圖像","size": 0,"required": false},'
    +']'),

  "Data": '['  ///*數據行  
    +'{"快遞單號": "1234567890", "發件人": "易橋智能","發件人電話": "13165191728","圖像": "/9j/4AAx="},'
    +'{"快遞單號": "1234567890", "發件人": "易橋智能","發件人電話": "13165191728","圖像": "/9j/4AAx="},'
    +'{"快遞單號": "1234567890", "發件人": "易橋智能","發件人電話": "13165191728","圖像": "/9j/4AAx="},'
    +'{"快遞單號": "1234567890", "發件人": "易橋智能","發件人電話": "13165191728","圖像": "/9j/4AAx="},'
    +'{"快遞單號": "1234567890", "發件人": "易橋智能","發件人電話": "13165191728","圖像": "/9j/4AAx="},'
    +'{"快遞單號": "1234567890", "發件人": "易橋智能","發件人電話": "13165191728","圖像": "/9j/4AAx="},'
    +'{"快遞單號": "1234567890", "發件人": "易橋智能","發件人電話": "13165191728","圖像": "/9j/4AAx="},'
    +'{"快遞單號": "1234567890", "發件人": "易橋智能","發件人電話": "13165191728","圖像": "/9j/4AAx="},'
    +']'),

}

打印效果