최신 MVC4+ EasyUI Web Development Framework에서 온라인 쇼핑 웨이 빌 프로세싱에 모듈을 통합하여 고객 주문 가이드, 웨이 빌 합병, 도착 스캔, 공제, 창고 출력 및 쿼리와 같은 다양한 모듈의 운영을 통합합니다. 어떤 웨이 빌 세트가 포함됩니다. 그러나 Lodop은 전에 Chrome 및 기타 브라우저와 호환되지 않았기 때문에이 제어의 인쇄 과정을 포기하고 싶었습니다. 그러나 그들은 "클라우드 인쇄 제어 C-로드"를 적시에 출시했으며, 이전 인터페이스와 거의 완전히 호환됩니다. 따라서이 제어는 기존 인쇄 및 웨이 빌 정보 세트를 포함하여 관련 인쇄 처리를위한 프레임 워크에서 계속 사용됩니다.
1. 컨트롤 설치
이 클라우드 컨트롤 C-Lodop (http://www.lodop.net/)은 실제로 로컬로 설치되며 상주 서비스는 JS 서비스를 제공합니다. 프로그램이 시작된 후 설치 후 인터페이스가 시작됩니다.
서버를 통해 JS 서비스를 제공하는 이러한 방법은 플러그인 방법보다 훨씬 낫습니다. 크롬 브라우저를 테스트 한 후에는 원활하게 인쇄 할 수 있습니다. 원래 Lodop 플러그인 메소드는 호환되지 않습니다.
자체 JS 초기화 코드를 통해 컨트롤이 현재 비 플루그 인 메소드를 사용하여 인쇄 작업을 처리한다는 것을 이해할 수 있습니다.
// 로컬 (해당 예제)을 통해 다른 컴퓨터 브라우저를 인쇄하게하십시오 : var script = document.createElement ( "script"); script.src = "/clodopFuncs.js";var head = document.head || document.getElementsByTagName ( "Head") [0] || document.documentElement; head.insertbefore (script, head.firstchild); // 네이티브 브라우저를 인쇄하기 (더 선호) : script = document.createElement ( "script"); script.src = "http : // localhost : 8000/clodopfuncs.js? priority = 1"; var head. document.getElementsByTagName ( "Head") [0] || document.documentElement; head.insertbefore (script, head.firstchild); // 네이티브 브라우저의 포스트 컨트롤 포트 8001 (이 접근법은 오류를 유발하고 무시할 수 있음) : script = document.createElement ( "script"); script.src = "http : // localhost : 8001/clodopfunc.js prierity = 2"; document.getElementsByTagName ( "Head") [0] || document.documentElement; head.insertbefore (script, head.firstchild);
공식 예제는 lodopfuncs.js 파일을 제공하여 인쇄 제어를 구축 할 수 있습니다. 여기서 getLodop 함수는 lodopfuncs.js 파일에 정의되어 인쇄 제어 객체를 얻습니다.
클라우드 프린트 제어가 설치되어 있는지 확인하십시오. 클라우드 프린트 제어가 설치되어 있는지 확인하기위한 JS 코드는 다음과 같습니다.
<script language = "javaScript"type = "text/javaScript"> function checkisInstall () {try {var lodop = getLodop (); if (lodop.version) {if (lodop.cversion) Alert ( "현재 C-Lodop 클라우드 인쇄 가능!/n C-lodop 버전 :"+lodop.cversion+"(lodop"+lodop.version+"); Elsealert ( "Lodop Control 이이 컴퓨터에 성공적으로 설치되었습니다!/n 버전 번호 :"+lodop.version); };} catch (err) {}}; </스크립트>2. 클라우드 인쇄 제어 C-로드 사용
이 컨트롤은 원래 Lodop의 사용과 일치합니다. 원래 코드를 수정하지 않고 직접 최신 인쇄 방법을 사용할 수 있습니다. 아주 좋습니다. 이 컨트롤의 사용과 관련하여, 나는 이전에 많은 관련 사용 프로세스를 도입했습니다.
예를 들어, Winform에서는 웹 페이지 패키지를 사용하여 문서를 작성하는 경우 "Nvelocity를 기반으로 여러 컨텐츠 생성 방법의 요약".
웹 페이지의 "문서 설정을위한 웹 인쇄 솔루션 구현"및 "웹 인쇄용 웹 인쇄 솔루션의 일반 보고서 인쇄"뿐만 아니라 제어의 사용 및 작동은 매우 상세하게 도입됩니다.
이 컨트롤은 다양한 상세한 사례 (http://www.lodop.net/demo.html)를 제공하며 참조로 사용할 수 있습니다.
앞에서 언급 했듯이이 컨트롤을 계속 사용하여 프레임 워크에서 온라인 쇼핑 청구서 처리를 처리했습니다. 예를 들어, 이와 같은 인터페이스 컨텐츠를 적용해야합니다.
아래 그림과 같이 페이지의 내용을 설계했습니다.
설계된 컨텐츠의 경우 아래와 같이 페이지 내부의 JS 코드로 변환 할 수 있습니다.
<script src = "/content/jqueryTools/lodop/checkActivx.js"> </script> <script type = "text/javaScript"> var lodop; // 글로벌 변수 함수 preview () {// print preview lodop = getLodop (); getLodop (); lodop.print_inita (-1, -1, -1, 824, 1129, "way bill set"); createlicensedata (); lodop.set_preview_window (2, 0, 0, 800, 600, "; "a4"); lodop.preview ();}; function setup () {// 유지 보수 lodop = getLodop (); lodop.print_inita (-1, -1, 824, 1129, "way bill set"); CreateLicensedata (); lodop.print_setup ();}; getLodop (); lodop.print_inita (-1, -1, 824, 1129, "waybox set"); createlicensedata (); lodop.print_design ();}; function createlicensedata () {if (printid! = undefined && printid! = ') $ .ajaxsettings.async = false; // 먼저 사용자는 메소드를 구현하기 위해 비동기 요청을 보냅니다. template.png '// "); lodop.set_show_mode ("bkimg_in_preview ", true); // preview는 배경 lodop.set_show_mode ("bkimg_print ", true)를 포함합니다. // 인쇄 컨텐츠는 배경 lodop.add_print_barcode (78, 441, 262, 56,"128c "," info.fenyundanhao); lodop.add_print_barcode (684, 441, 262, 56, "128c", info.fenyundanhao); lodop.add_print_text (186, 287, 277, 39, info.shou_com); lodop.set_print_stylea (0, fontize ", 12); lodop.add_print_text (236, 378, 186, 28, info.shou_name); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (276, 283, 284, 67, info.shou_dizhi); Lodprint_print_stylea (0) 12); lodop.add_print_text (362, 306, 254, 30, info.shou_phone); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (404, 319, 51, 30, info.jianshu); lodop.set_stylea (0, fontsize ", 12); lodop.add_print_text (404, 319, 51, 30, info.jianshu); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (400, 476, 95, 31, info.zhongliang); lodsc.set_print_stylea (0, fontsize " 12); lodop.add_print_text (187, 33, 227, 39, info.fa_gongsi); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (277, 33, 230, 65, info.fa_dizhi); fa_dizhi (01print_) 12); lodop.add_print_text (364, 37, 227, 25, info.fa_phone); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (410, 37, 226, 26, info.pinming); lodop.set_print_stylea (0, ","Fontsize ", 12); lodop.add_print_text (410, 37, 226, 26, info.pinming); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (803, 34, 234, 39, info.fa_gongsi); lodsc.set_stylea (0, fontsize " 12); lodop.add_print_text (895, 32, 238, 66, info.fa_dizhi); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (979, 33, 234, 25, info.fa_phen 12); lodop.add_print_text (1024, 35, 35, 228, 25, info.pinming); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (802, 285, 287, 39, info.shou_com); lodstylea (0, fontsize ", 12); lodop.add_print_text (802, 285, 287, 39, info.shou_com); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (849, 373, 198, 28, Info.shou_name) 12); lodop.add_print_text (894, 285, 287, 67, info.shou_dizhi); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (980, 287, 281, 26, info.shou_phone); lodop.set_stylea (0.1pone) 12); lodop.add_print_text (1021, 317, 317, 59, 29, info.jianshu); lodop.set_print_stylea (0, "fontsize", 12); lodop.add_print_text (1017, 477, 95, 30, info.zhongliang); Lodprint.set_stylea (0.1pprint., godop.sets) 12);});}} // print preview var printid; function printail () {var row = $ ( "#gridDetail"). Datagrid ( "getSelected"); if (row) {var index = $ ( '#gridDetail'). {$ .messager.alert ( "팁", "레코드를 선택하십시오");}} // 배치 인쇄 함수 batchprint () {// get idvar rows = $ ( "#gridDetail"). Datagrid ( "getSelections"); 그런 다음 (rows.length> = 1) {// 데이터를 보내는 정보가 소송이 제시되는 경우, 배경이 적어지면 확인합니다. $ .messager.confirm ( "배치 인쇄 확인", "선택한 레코드가 배치로 인쇄되어 있습니까?", function (action) {for (var i = 0; i <rows.length; length; i ++) {lodop = getLodop (); lodop.print_init ( ""); lodop.set_pagesize (1, 0, 0, 0, 0, ");" = rows [i] .id; createlicensedata (); lodop.print ();}}});} else {$ .messager.alert ( "Prompt", "Batches에서 인쇄하려는 데이터를 선택하십시오");}} // MAINTETUP () {var row = $ ( "#GRIDDETEATE"); {var index = $ ( '#gridDetail'). Datagrid ( 'getRowIndex', row); printId = row.id; setup ();}} </script>이 인쇄 인터페이스에서 QR 코드 인쇄 작업도 사용되며 다음과 같이 바코드 건을 사용하여 직접 읽는 것이 매우 편리합니다.
lodop.add_print_barcode (78, 441, 262, 56, "128c", info.fenyundanhao); lodop.add_print_barcode (684, 441, 262, 56, "128c", info.fenyundanhao);
그런 다음 처리를 위해 메인 페이지에서 인쇄 작업 기능 버튼을 설정하십시오. 다음은 EasyUI 기반 웹 프레임 워크 인터페이스 효과입니다.
인쇄 미리보기 인터페이스는 다음과 같습니다. 실제로 인쇄 할 때는 배경 이미지를 인쇄하지 않도록 설정할 수 있습니다.
일반 인쇄 인 경우 인터페이스는 아래와 같이 볼 수 있듯이 페이지의 내용에 매우 가깝습니다.
참조 코드는 다음과 같습니다.
@*lodop 컨트롤에 대한 지원 추가*@<script type = "text/javascript"> var lodop; // 글로벌 변수 함수 preview () {// 원본 print createlicensedata (); lodop.set_show_mode ( "preview_in_browse", 1); lodop.preview ();}; function printa () {Createlicensedata (); lodop.printa (); createlicensedata (); lodop.print_setup ();}; function design () {// 원래 인쇄 디자인 createlicensedata (); lodop.print_design ();}; function createlicensedata () {lodop = getLodop (); lodop.print_init (introcies and Regulations "); rel = 'stylesheet'href = '/content/treess/default/style.css'/> <style> <!-테이블 {테이블 {back strformhtml = strodystyle + "<bod>" + document.getElementById ( "printContent"). innerHtml + "</body>"; lodop.add_print_htm (20, 40, 610, 900, strformhtml); lodop.preview ();} var id = {var id = $ ( '#id2'). val (); window.open ( '/Information/ExportwordByid? id =' + id);} </script>