style:打印模板
Showing
5 changed files
with
208 additions
and
40 deletions
src/image/lodapbg.png
0 → 100644
1.05 MB
src/utils/LodopFuncs.js
0 → 100644
| 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 | }; | ... | ... |
-
Please register or sign in to post a comment