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="},'
    +']'),

}

打印效果