51964933 by 任超

style:打印模板

1 parent c9cf77e6
...@@ -5,4 +5,4 @@ NODE_ENV=development ...@@ -5,4 +5,4 @@ NODE_ENV=development
5 VUE_APP_BASE_API = '/dev-api' 5 VUE_APP_BASE_API = '/dev-api'
6 6
7 # 演示,正式后端 7 # 演示,正式后端
8 VUE_APP_API_BASE_URL = 'http://192.168.2.88:8009' 8 VUE_APP_API_BASE_URL = 'http://192.168.2.38:8018'
......
1 //==本JS是加载Lodop插件及CLodop服务的综合示例,可直接使用,建议看懂后融进自己页面程序==
2
3 var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
4
5 //==判断是否需要CLodop(那些不支持插件的浏览器):==
6 function needCLodop () {
7 try {
8 var ua = navigator.userAgent;
9 if (ua.match(/Windows\sPhone/i))
10 return true;
11 if (ua.match(/iPhone|iPod|iPad/i))
12 return true;
13 if (ua.match(/Android/i))
14 return true;
15 if (ua.match(/Edge\D?\d+/i))
16 return true;
17
18 var verTrident = ua.match(/Trident\D?\d+/i);
19 var verIE = ua.match(/MSIE\D?\d+/i);
20 var verOPR = ua.match(/OPR\D?\d+/i);
21 var verFF = ua.match(/Firefox\D?\d+/i);
22 var x64 = ua.match(/x64/i);
23 if ((!verTrident) && (!verIE) && (x64))
24 return true;
25 else if (verFF) {
26 verFF = verFF[0].match(/\d+/);
27 if ((verFF[0] >= 41) || (x64))
28 return true;
29 } else if (verOPR) {
30 verOPR = verOPR[0].match(/\d+/);
31 if (verOPR[0] >= 32)
32 return true;
33 } else if ((!verTrident) && (!verIE)) {
34 var verChrome = ua.match(/Chrome\D?\d+/i);
35 if (verChrome) {
36 verChrome = verChrome[0].match(/\d+/);
37 if (verChrome[0] >= 41)
38 return true;
39 }
40 }
41 return false;
42 } catch (err) {
43 return true;
44 }
45 }
46
47 //==加载引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
48 function loadCLodop () {
49 if (CLodopJsState == "loading" || CLodopJsState == "complete") return;
50 CLodopJsState = "loading";
51 var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
52 var JS1 = document.createElement("script");
53 var JS2 = document.createElement("script");
54 JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
55 JS2.src = "http://localhost:18000/CLodopfuncs.js";
56 JS1.onload = JS2.onload = function () { CLodopJsState = "complete"; }
57 JS1.onerror = JS2.onerror = function (evt) { CLodopJsState = "complete"; }
58 head.insertBefore(JS1, head.firstChild);
59 head.insertBefore(JS2, head.firstChild);
60 CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
61 }
62
63 if (needCLodop()) { loadCLodop(); }//加载
64
65 //==获取LODOP对象主过程,判断是否安装、需否升级:==
66
67 export function getLodop (oOBJECT, oEMBED) {
68 var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.zip' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
69 var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.zip' target='_self'>执行升级</a>,升级后请重新进入。</font>";
70 var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.zip' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
71 var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.zip' target='_self'>执行升级</a>,升级后请重新进入。</font>";
72 var strHtmFireFox = "<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>";
73 var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>";
74 var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动,点击这里<a href='CLodop_Setup_for_Win32NT.zip' target='_self'>下载执行安装</a>";
75 var strCLodopInstall_2 = "<br>(若此前已安装过,可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>)";
76 var strCLodopInstall_3 = ",成功后请刷新本页面。</font>";
77 var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.zip' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
78 var LODOP;
79 try {
80 var ua = navigator.userAgent;
81 var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
82 if (needCLodop()) {
83 try {
84 LODOP = getCLodop();
85 } catch (err) { }
86 if (!LODOP && CLodopJsState !== "complete") {
87 if (CLodopJsState == "loading") alert("网页还没下载完毕,请稍等一下再操作."); else alert("没有加载CLodop的主js,请先调用loadCLodop过程.");
88 return;
89 }
90 if (!LODOP) {
91 document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
92 return;
93 } else {
94 if (CLODOP.CVERSION < "4.0.9.9") {
95 document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
96 }
97 if (oEMBED && oEMBED.parentNode)
98 oEMBED.parentNode.removeChild(oEMBED);
99 if (oOBJECT && oOBJECT.parentNode)
100 oOBJECT.parentNode.removeChild(oOBJECT);
101 }
102 } else {
103 var is64IE = isIE && !!(ua.match(/x64/i));
104 //==如果页面有Lodop就直接使用,否则新建:==
105 if (oOBJECT || oEMBED) {
106 if (isIE)
107 LODOP = oOBJECT;
108 else
109 LODOP = oEMBED;
110 } else if (!CreatedOKLodopObject) {
111 LODOP = document.createElement("object");
112 LODOP.setAttribute("width", 0);
113 LODOP.setAttribute("height", 0);
114 LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
115 if (isIE)
116 LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
117 else
118 LODOP.setAttribute("type", "application/x-print-lodop");
119 document.documentElement.appendChild(LODOP);
120 CreatedOKLodopObject = LODOP;
121 } else
122 LODOP = CreatedOKLodopObject;
123 //==Lodop插件未安装时提示下载地址:==
124 if ((!LODOP) || (!LODOP.VERSION)) {
125 if (ua.indexOf('Chrome') >= 0)
126 document.body.innerHTML = strHtmChrome + document.body.innerHTML;
127 if (ua.indexOf('Firefox') >= 0)
128 document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
129 document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
130 return LODOP;
131 }
132 }
133 if (LODOP.VERSION < "6.2.2.6") {
134 if (!needCLodop())
135 document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
136 }
137 //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
138 LODOP.SET_LICENSES("", "13528A153BAEE3A0254B9507DCDE2839", "EDE92F75B6A3D917F65910", "");
139 //=======================================================
140 return LODOP;
141 } catch (err) {
142 alert("getLodop出错:" + err);
143 }
144 }
1 <template>
2 <dialogBox title="证明模板" @submitForm="submitForm" width="60%" @closeDialog="closeDialog" v-model="value">
3
4 </dialogBox>
5 </template>
6
7 <script>
8 export default {
9 components: {
10 },
11 props: {
12 value: { type: Boolean, default: false },
13 },
14 data () {
15 return {
16 }
17 },
18 methods: {
19 submitForm () {
20 this.$emit('input', false)
21 },
22 closeDialog () {
23 this.$emit('input', false)
24 }
25 }
26 }
27 </script>
28 <style scoped lang="scss">
29 @import "~@/styles/mixin.scss";
30 </style>
1 <template> 1 <template>
2 <div class="dymbgl from-clues-content"> 2 <div class="dymbgl from-clues-content">
3 <lb-table :page-size="pageData.size" :current-page.sync="pageData.current" heightNum="215" :total="tableData.total" 3 <lb-table :page-size="pageData.size" :current-page.sync="pageData.current" :heightNum="215" :total="tableData.total"
4 @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns" 4 @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
5 :data="tableData.data"> 5 :data="tableData.data">
6 </lb-table> 6 </lb-table>
7 <editDialog v-model="isDialog" /> 7 <textarea rows="0" id="S1" cols="0" v-show="false"></textarea>
8 </div> 8 </div>
9 </template> 9 </template>
10 <script> 10 <script>
11 import { getLodop } from "@/utils/LodopFuncs"
11 import table from "@/utils/mixin/table" 12 import table from "@/utils/mixin/table"
12 import { datas, sendThis } from "./dymbgl" 13 import { datas, sendThis } from "./dymbgl"
13 import editDialog from "./components/editDialog.vue"
14 export default { 14 export default {
15 name: "djbcx", 15 name: "djbcx",
16 components: {
17 editDialog
18 },
19 mixins: [table], 16 mixins: [table],
20 mounted () { 17 mounted () {
21 sendThis(this); 18 sendThis(this);
...@@ -23,6 +20,7 @@ export default { ...@@ -23,6 +20,7 @@ export default {
23 data () { 20 data () {
24 return { 21 return {
25 isDialog: false, 22 isDialog: false,
23 images: require("../../../image/lodapbg.png"),
26 tableData: { 24 tableData: {
27 total: 0, 25 total: 0,
28 columns: datas.columns(), 26 columns: datas.columns(),
...@@ -31,15 +29,71 @@ export default { ...@@ -31,15 +29,71 @@ export default {
31 slsj: "2022-5-12", 29 slsj: "2022-5-12",
32 } 30 }
33 ] 31 ]
34 } 32 },
33 printList: {
34 year: '',
35 month: '',
36 day: '',
37 bh: '', // 编号
38 xzq: '',
39 xh: '',
40 d: '',
41 h: '',
42
43 qlr: '',
44 ywr: '',
45 zl: '',
46 bdcdyh: '',
47 qt: '',
48 fj: '',
49 zmsx: "证明事项",
50 },
35 } 51 }
36 }, 52 },
37 methods: { 53 methods: {
38 // 初始化数据
39 fetchData () { 54 fetchData () {
40 }, 55 },
41 editClick () { 56 editClick () {
42 this.isDialog = true 57 let LODOP = getLodop();
58 LODOP.SET_PRINT_MODE("PRINT_SETUP_PROGRAM", true);
59 LODOP.PRINT_INITA(0, 0, 850, 560, "不动产证明");
60 LODOP.ADD_PRINT_SETUP_BKIMG("<img border='1' src=" + this.images + ">");
61 LODOP.ADD_PRINT_TEXT(403, 220, 39, 25, this.printList.year); //year
62 LODOP.ADD_PRINT_TEXT(403, 278, 25, 25, this.printList.month); //month
63 LODOP.ADD_PRINT_TEXT(403, 309, 25, 25, this.printList.day); //day
64 LODOP.ADD_PRINT_TEXT(493, 205, 160, 25, this.printList.bh); //编号
65 // 头部信息
66 LODOP.ADD_PRINT_TEXT(78, 419, 39, 25, this.printList.xzq); //陕
67 LODOP.ADD_PRINT_TEXT(78, 466, 39, 25, this.printList.xh); //
68 LODOP.ADD_PRINT_TEXT(78, 520, 60, 25, this.printList.d); //
69 LODOP.ADD_PRINT_TEXT(78, 670, 60, 25, this.printList.h); //
70
71 LODOP.ADD_PRINT_TEXT(119, 555, 190, 25, this.printList.zmsx); //然后多个ADD语句及SET语句
72 LODOP.ADD_PRINT_TEXT(152, 557, 190, 25, this.printList.qlr); //权利人
73 LODOP.ADD_PRINT_TEXT(186, 557, 190, 25, this.printList.ywr); //义务人
74 LODOP.ADD_PRINT_TEXT(219, 557, 190, 25, this.printList.zl); //坐落
75 LODOP.ADD_PRINT_TEXT(254, 557, 190, 25, this.printList.bdcdyh); //不动产单元号
76 LODOP.ADD_PRINT_TEXT(318, 557, 190, 67, this.printList.qt); //其他
77 LODOP.ADD_PRINT_TEXT(426, 557, 190, 67, this.printList.fj); //附记
78 LODOP.SET_SHOW_MODE("BKIMG_PRINT", 1);
79 LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW", 1);
80 //窗口关闭后,回调函数中保存的设计代码
81 if (LODOP.CVERSION)
82 CLODOP.On_Return = function (TaskID, printList) {
83 if (LODOP.CVERSION)
84 LODOP.On_Return = function (TaskID, Value) {
85 document.getElementById("S1").value = Value;
86 };
87 document.getElementById("S1").value = LODOP.GET_VALUE(
88 "ProgramData",
89 0
90 );
91 setTimeout(() => {
92 let printValue = document.getElementById("S1").value;
93 console.log("value", printValue);
94 }, 1000);
95 };
96 LODOP.PRINT_DESIGN(); //打印设计或者打印维护需要放到最后
43 } 97 }
44 }, 98 },
45 }; 99 };
......