Browse Source

lodop打印/页面table高度自适应

master
[li_she] 5 years ago
parent
commit
9678e95f4e
  1. 146
      src/assets/js/LodopFuncs.js
  2. 45
      src/utils/LodopFuncs.js
  3. 2
      src/views/common/home.vue
  4. 41
      src/views/modules/sys/language/common.vue
  5. 11
      src/views/modules/sys/log.vue

146
src/assets/js/LodopFuncs.js

@ -1,146 +0,0 @@
//==本JS是加载Lodop插件及CLodop服务的综合示例,可直接使用,建议看懂后融进自己页面程序==
var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
//==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {
try {
var ua = navigator.userAgent;
if (ua.match(/Windows\sPhone/i))
return true;
if (ua.match(/iPhone|iPod|iPad/i))
return true;
if (ua.match(/Android/i))
return true;
if (ua.match(/Edge\D?\d+/i))
return true;
var verTrident = ua.match(/Trident\D?\d+/i);
var verIE = ua.match(/MSIE\D?\d+/i);
var verOPR = ua.match(/OPR\D?\d+/i);
var verFF = ua.match(/Firefox\D?\d+/i);
var x64 = ua.match(/x64/i);
if ((!verTrident) && (!verIE) && (x64))
return true;
else if (verFF) {
verFF = verFF[0].match(/\d+/);
if ((verFF[0] >= 41) || (x64))
return true;
} else if (verOPR) {
verOPR = verOPR[0].match(/\d+/);
if (verOPR[0] >= 32)
return true;
} else if ((!verTrident) && (!verIE)) {
var verChrome = ua.match(/Chrome\D?\d+/i);
if (verChrome) {
verChrome = verChrome[0].match(/\d+/);
if (verChrome[0] >= 41)
return true;
}
}
return false;
} catch (err) {
return true;
}
}
//==加载引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
function loadCLodop() {
if (CLodopJsState == "loading" || CLodopJsState == "complete") return;
CLodopJsState = "loading";
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
var JS1 = document.createElement("script");
var JS2 = document.createElement("script");
JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
JS2.src = "http://localhost:18000/CLodopfuncs.js";
JS1.onload = JS2.onload = function() {CLodopJsState = "complete";}
JS1.onerror = JS2.onerror = function(evt) {CLodopJsState = "complete";}
head.insertBefore(JS1, head.firstChild);
head.insertBefore(JS2, head.firstChild);
CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
}
if (needCLodop()){loadCLodop();}//加载
//==获取LODOP对象主过程,判断是否安装、需否升级:==
function getLodop(oOBJECT, oEMBED) {
var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
var strHtmFireFox = "<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>";
var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>";
var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动,点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
var strCLodopInstall_2 = "<br>(若此前已安装过,可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>)";
var strCLodopInstall_3 = ",成功后请刷新本页面。</font>";
var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
var LODOP;
try {
var ua = navigator.userAgent;
var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
if (needCLodop()) {
try {
LODOP = getCLodop();
} catch (err) {}
if (!LODOP && CLodopJsState !== "complete") {
if (CLodopJsState == "loading") alert("网页还没下载完毕,请稍等一下再操作."); else alert("没有加载CLodop的主js,请先调用loadCLodop过程.");
return;
}
if (!LODOP) {
document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
return;
} else {
if (CLODOP.CVERSION < "4.1.2.7") {
document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
}
if (oEMBED && oEMBED.parentNode)
oEMBED.parentNode.removeChild(oEMBED); //清理旧版无效元素
if (oOBJECT && oOBJECT.parentNode)
oOBJECT.parentNode.removeChild(oOBJECT);
}
} else {
var is64IE = isIE && !!(ua.match(/x64/i));
//==如果页面有Lodop就直接使用,否则新建:==
if (oOBJECT || oEMBED) {
if (isIE)
LODOP = oOBJECT;
else
LODOP = oEMBED;
} else if (!CreatedOKLodopObject) {
LODOP = document.createElement("object");
LODOP.setAttribute("width", 0);
LODOP.setAttribute("height", 0);
LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
if (isIE)
LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
else
LODOP.setAttribute("type", "application/x-print-lodop");
document.documentElement.appendChild(LODOP);
CreatedOKLodopObject = LODOP;
} else
LODOP = CreatedOKLodopObject;
//==Lodop插件未安装时提示下载地址:==
if ((!LODOP) || (!LODOP.VERSION)) {
if (ua.indexOf('Chrome') >= 0)
document.body.innerHTML = strHtmChrome + document.body.innerHTML;
if (ua.indexOf('Firefox') >= 0)
document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
return LODOP;
}
}
if (LODOP.VERSION < "6.2.2.6") {
if (!needCLodop())
document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
}
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):==
//=======================================================
return LODOP;
} catch (err) {
alert("getLodop出错:" + err);
}
}
export default getLodop

45
src/utils/LodopFuncs.js

@ -0,0 +1,45 @@
import { MessageBox } from 'element-ui'
// ====页面动态加载C-Lodop云打印必须的文件CLodopfuncs.js====
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
// 让本机的浏览器打印(更优先一点):
oscript = document.createElement('script')
oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=2'
head.insertBefore(oscript, head.firstChild)
// 加载双端口(8000和18000)避免其中某个端口被占用:
oscript = document.createElement('script')
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=1'
head.insertBefore(oscript, head.firstChild)
// 下载loadLodop
function loadLodop() {
window.open('../../static/Lodop/CLodop_Setup_for_Win32NT.exe')
}
// ====获取LODOP对象的主过程:====
function getLodop() {
var LODOP
try {
LODOP = getCLodop()
if (!LODOP && document.readyState !== 'complete') {
MessageBox.alert('C-Lodop打印控件还没准备好,请稍后再试!')
return
}
return LODOP
} catch (err) {
MessageBox({
title: '温馨提示',
type: 'warning',
showCancelButton: true,
message: '您还未安装打印控件,点击确定下载打印控件,安装成功后刷新页面即可进行打印',
callback: res => {
if (res === 'confirm') {
loadLodop()
}
}
})
}
}
export default getLodop

2
src/views/common/home.vue

@ -2,7 +2,7 @@
<div class="mod-home">
<h3>项目介绍</h3>
<ul>
<li>xujie-fast-vue基于vueelement-ui构建开发实现<a href="https://gitee.com/gaotaoio/gaotao-fast" target="_blank">xujie-fast</a>后台管理前端功能提供一套更优的前端解决方案
<li>xujie-fast-vue基于vueelement-ui构建开发实现 xujie-fast后台管理前端功能提供一套更优的前端解决方案
</li>
<li>前后端分离通过token进行数据交互可独立部署</li>
<li>主题定制通过scss变量统一一站式定制</li>

41
src/views/modules/sys/language/common.vue

@ -48,10 +48,13 @@
</el-button>
</el-form-item>
<el-button type="primary" plain @click="printReport">打印报表</el-button>
</el-form>
<el-table
height="500"
id="commmon"
:height="height"
:data="dataList"
border
v-loading="dataListLoading"
@ -196,6 +199,7 @@
searchLanguageListByLanguageCode,
saveSysLanguageOne
} from "@/api/sysLanguage.js"
import getLodop from '@/utils/LodopFuncs.js'
import {
saveTableDefaultList,
saveTableUser,
@ -206,6 +210,8 @@
export default {
data() {
return {
// table
height:450,
//
favorite: false,
addLanguage: false,
@ -509,11 +515,39 @@
addOrUpdateVisible: false
}
},
mounted() {
this.$nextTick(()=>{
this.height = window.innerHeight - 255;
})
},
activated() {
this.getDataList()
this.getLanguageList()
},
methods: {
//
printReport(){
const LODOP = getLodop()
if (LODOP) {
var strBodyStyle = '<style>'
strBodyStyle += 'table { border-top: 1 solid #000000; border-left: 1 solid #000000; border-collapse:collapse; border-spacing:0;}'
strBodyStyle += 'caption { line-height:2em; }'
strBodyStyle += 'td { border-right: 1 solid #000000; border-bottom: 1 solid #000000; text-align:center; padding:2px 3px; font-size:11px;}'
strBodyStyle += '</style>' //
var strFormHtml = strBodyStyle + '<body>' + document.getElementById('commmon').innerHTML + '</body>' //
LODOP.PRINT_INIT('') //
LODOP.PRINT_DESIGN();
LODOP.PREVIEW();
LODOP.PRINT();
LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') //
LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //
LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '') //
LODOP.PREVIEW()
}
},
//
favoriteIsOk(){
let userFavorite ={
@ -804,7 +838,10 @@
}
}
</script>
<style >
<style scoped >
.wrapper {
height: calc(100% - 40px);
}
.sl-input {
background-color: transparent;
border: 0 !important;

11
src/views/modules/sys/log.vue

@ -10,6 +10,8 @@
</el-form>
<el-table
:data="dataList"
:height="tableHeight"
border
v-loading="dataListLoading"
style="width: 100%">
@ -93,12 +95,19 @@
pageSize: 10,
totalPage: 0,
dataListLoading: false,
selectionDataList: []
selectionDataList: [],
tableHeight: 0
}
},
created () {
this.getDataList()
},
mounted() {
this.$nextTick(() => {
this.tableHeight = window.innerHeight - 255;
//50
})
},
methods: {
//
getDataList () {

Loading…
Cancel
Save