Skip to content

W
WebPublic
提交 2b3865f5 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

打印插件开发

上级 dc1c42d4
隐藏空白字符变更
内嵌 并排
正在显示 包含 296 行增加 和 67 行删除
zyd_private/DragAndPrint/ViewPrint/DetailDom.js
浏览文件 @ 2b3865f5
......@@ -17,32 +17,32 @@ const normalTextRender = (text, config) => {
if (!text || text === 'undefined' || typeof text === 'undefined') {
return null;
}
const width = config.wide ? config.wide + 'px' : 'auto';
const width = config.wide ? config.wide + 'px' : 'auto';
const height = config.high ? config.high + 'px' : 'auto';
if (config.mark && text.indexOf(config.mark) > -1) { // 换行分隔符
text = text.split(config.mark);
let length = text.length;
return text.map((x, index) => {
return <div
key={x}
style={{
...styleCount(config),
marginBottom: '0',
width,
textAlign: 'right',
}}>
{x}{length > index + 1 ? config.mark : ''}
</div>;
});
return <div
key={x}
style={{
...styleCount(config),
marginBottom: '0',
width,
textAlign: 'right',
}}>
{x}{length > index + 1 ? config.mark : ''}
</div>;
});
}
return (
<div style={{
...styleCount(config),
marginBottom: '0',
width,
height,
lineHeight: height,
lineHeight: 'normal',
verticalAlign: 'top',
textAlign: 'right',
letterSpacing: '2px',
}}>
......@@ -102,17 +102,22 @@ class BarCode extends React.Component {
export default function DetailDom({ config, data }) {
const { x, y, fieldCode, transform } = config;
const { x, y, transform } = config;
const styleOutSide = {
position: 'absolute',
zIndex: 10,
fontWeight: 'bold',
left: x + 'px',
top: y + 'px',
};
if (transform) {
styleOutSide.transform = `rotate(${transform}deg)`;
}
const outSideDom = (children) => {
return (
<div
style={{
position: 'absolute',
zIndex: 10,
fontWeight: 'bold',
left: x + 'px',
top: y + 'px',
transform: transform ? `rotate(${transform}deg)` : 'none',
...styleOutSide,
}}
key={`filed${config.id}`}>
{children}
......
zyd_private/DragAndPrint/ViewPrint/LodopFuncs.js 0 → 100644
浏览文件 @ 2b3865f5
var CreatedOKLodop7766 = null;
var LODOP;
//====获取工程路径:====
//isPath True表示获取的是路径（如：http://localhost:8080/ips/）,false则返回上下文路径（如：/ips/），默认为false
function getContextOrPath(isPath) {
var isPath = isPath || false;
var href = window.location.pathname;
var path = window.location.protocol + '//' + window.location.host;
var index = 0, j = 0;
for (var i = 0; i < href.length; i++) {
if (href.charAt(i) == '/') {
index = i;
j++;
if (j == 2) {
break;
}
}
}
var context = href.substr(0, index + 1);
if (isPath)
return context;
else
return path + context;
}
//====判断是否需要安装CLodop云打印服务器:====
function needCLodop() {
return true;
};
//====页面引用CLodop云打印必须的JS文件：====暂不启用该方式
if (needCLodop()) {
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
var oscript = document.createElement('script');
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=0';
head.insertBefore(oscript, head.firstChild);
}
//====获取LODOP对象的主过程：====
export function getLodop(dir, oOBJECT, oEMBED) {
console.log(dir, oOBJECT, oEMBED);
var basePath = '';
if (typeof (basePath) == 'undefined') {
basePath = getContextOrPath(false);
}
var path = basePath + '/common/Lodop/';
var strHtmInstall = '<br><font color=\'#FF00FF\'>打印控件未安装!点击这里<a href=\'' + path + 'install_lodop32.exe\' target=\'_self\'>执行安装</a>,安装后请刷新页面或重新进入。</font>';
var strHtmUpdate = '<br><font color=\'#FF00FF\'>打印控件需要升级!点击这里<a href=\'' + path + 'install_lodop32.exe\' target=\'_self\'>执行升级</a>,升级后请重新进入。</font>';
var strHtm64_Install = '<br><font color=\'#FF00FF\'>打印控件未安装!点击这里<a href=\'' + path + 'install_lodop64.exe\' target=\'_self\'>执行安装</a>,安装后请刷新页面或重新进入。</font>';
var strHtm64_Update = '<br><font color=\'#FF00FF\'>打印控件需要升级!点击这里<a href=\'' + path + '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 = '<br><font color=\'#FF00FF\'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href=\'' + path + 'CLodop_Setup_for_Win32NT.exe\' target=\'_self\'>执行安装</a>,安装后请刷新页面。</font>';
var strCLodopUpdate = '<br><font color=\'#FF00FF\'>CLodop云打印服务需升级!点击这里<a href=\'' + path + 'CLodop_Setup_for_Win32NT.exe\' target=\'_self\'>执行升级</a>,升级后请刷新页面。</font>';
var LODOP;
try {
var isIE = (navigator.userAgent.indexOf('MSIE') >= 0) || (navigator.userAgent.indexOf('Trident') >= 0);
if (needCLodop()) {
try {
LODOP = getCLodop();
} catch (err) {
}
;
if (!LODOP && document.readyState !== 'complete') {
//alert("C-Lodop没准备好，请稍后再试！"+(!LODOP)); return;
}
;
if (!LODOP) {
if (isIE) document.write(strCLodopInstall); else
document.documentElement.innerHTML = strCLodopInstall;
return;
} else {
if (CLODOP.CVERSION < '3.0.0.2') {
if (isIE) document.write(strCLodopUpdate); else
document.documentElement.innerHTML = strCLodopUpdate;
}
;
if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
}
;
} else {
var is64IE = isIE && (navigator.userAgent.indexOf('x64') >= 0);
//=====如果页面有Lodop就直接使用，没有则新建:==========
if (oOBJECT != undefined || oEMBED != undefined) {
if (isIE) LODOP = oOBJECT; else LODOP = oEMBED;
} else if (CreatedOKLodop7766 == null) {
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);
CreatedOKLodop7766 = LODOP;
} else LODOP = CreatedOKLodop7766;
//=====Lodop插件未安装时提示下载地址:==========
if ((LODOP == null) || (typeof (LODOP.VERSION) == 'undefined')) {
if (navigator.userAgent.indexOf('Chrome') >= 0)
document.documentElement.innerHTML = strHtmChrome + document.documentElement.innerHTML;
if (navigator.userAgent.indexOf('Firefox') >= 0)
document.documentElement.innerHTML = strHtmFireFox + document.documentElement.innerHTML;
if (is64IE) document.write(strHtm64_Install); else if (isIE) document.write(strHtmInstall); else
document.documentElement.innerHTML = strHtmInstall + document.documentElement.innerHTML;
return LODOP;
}
;
}
;
if (LODOP.VERSION < '6.2.1.8') {
if (!needCLodop()) {
if (is64IE) document.write(strHtm64_Update); else if (isIE) document.write(strHtmUpdate); else
document.documentElement.innerHTML = strHtmUpdate + document.documentElement.innerHTML;
}
;
return LODOP;
}
;
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
LODOP.SET_SHOW_MODE('LANGUAGE', 0);
LODOP.SET_LICENSES('成都市知用科技有限公司', '649677881727389907689190562356', '', '');
//===========================================================
return LODOP;
} catch (err) {
alert('getLodop出错:' + err);
}
;
};
/*
加载script标签
urlArr：加载路径的队列
callback：回调函数
*/
var loadScript = function(urlArr, callback) {
if (urlArr && Object.prototype.toString.call(urlArr) === '[object Array]') {
var src = urlArr.pop();
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.reload = 1;
//借鉴了jQuery的script跨域方法
script.onload = script.onreadystatechange = function() {
console.log('打印插件加载成功');
if ((!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
script.onload = script.onreadystatechange = null;
if (urlArr.length > 0) {
loadScript(urlArr, callback);
} else {
if (typeof callback == 'function') {
callback && callback();
}
}
}
};
script.onerror = function() {
callback && callback();
};
head.insertBefore(script, head.firstChild);
}
};
var urlArr = [];
if (window.location.protocol === 'http:') {
urlArr[0] = `http://localhost:18000/CLodopFuncs.js?priority=0`;
} else {
urlArr[0] = `https://localhost:8443/CLodopFuncs.js?priority=0`;
}
loadScript(urlArr, function() {
LODOP = getLodop();
});
zyd_private/DragAndPrint/ViewPrint/config.js
浏览文件 @ 2b3865f5
import { message } from 'antd';
import { ModalConfirm, ModalInfo } from '@/baseComponent/Modal';
import * as lo from './LodopFuncs';
export const A4Height = '29.6cm';
export const A4Width = '20.9cm';
......@@ -9,6 +10,10 @@ export const imageStyleAll = {
};
export function getCLodopFuncJS() {
return new Promise((resolve, reject) => {
resolve(true);
});
return new Promise((resolve, reject) => {
if (window.LODOP) {
console.log('打印插件加载成功');
......@@ -16,10 +21,15 @@ export function getCLodopFuncJS() {
return true;
}
let sc = document.createElement('script');
sc.src = `http://localhost:18000/CLodopFuncs.js`;
if(window.location.protocol === 'http:'){
sc.src = `http://localhost:18000/CLodopFuncs.js`;
}else{
sc.src = `https://localhost:8443/CLodopFuncs.js`;
}
document.querySelector('body').appendChild(sc);
sc.onload = function() {
// window.LODOP = window.getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
console.log(window.LODOP);
// getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
resolve(true);
console.log('打印插件加载成功');
};
......
zyd_private/DragAndPrint/ViewPrint/index2.js
浏览文件 @ 2b3865f5
......@@ -47,10 +47,10 @@ export default class ViewPrint extends Component {
console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false;
}
// let i = 0;
// let i = 0;
for (const item of viewData) {
// item.name = ['张浩', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][i] || '钟是志';
// i++;
// item.name = ['黎处', '王昊楠', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][i] || '钟是志';
// i++;
for (let z in item) {
if (item[z] === null || item[z] === 'null') {
item[z] = '';
......@@ -68,12 +68,17 @@ export default class ViewPrint extends Component {
componentDidMount() {
this.getViewData();
getCLodopFuncJS().then((response) => {
window.On_CLodop_Opened = function(){
console.log('On_CLodop_Opened');
window.On_CLodop_Opened = null;
};
if (response) {
this.setState({
loading: false,
});
}
});
}
detailDom = (data) => {
......@@ -94,38 +99,49 @@ export default class ViewPrint extends Component {
printOne = () => {
const { printIndex, configAll, viewData } = this.state;
const { wide, high } = configAll;
const { wide, high } = configAll;
let LODOPObj = window.LODOP;
let strHTML = document.getElementById(`printDomId_${printIndex}`).innerHTML;
strHTML = strHTML.replace('break-after: page;', 'page-break-after: always;');
strHTML = `<!DOCTYPE html>${strHTML}`;
strHTML = strHTML.replace(
'break-after: page;',
'page-break-after: always;',
);
strHTML = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"></head><body>${strHTML}</body></html>`;
// console.log(strHTML);
LODOPObj.PRINT_INIT(`printDomId_${printIndex}`);
// window.LODOP.PRINT_INITA(1, 1, 770, 660, '测试预览功能');
LODOPObj.ADD_PRINT_HTM(0, 0, `${wide + 0.1}cm`, `${high + 0.1}cm`, strHTML); // 打印的宽高和 html
LODOPObj.SET_PRINT_PAGESIZE(2, 0, 0); // 纵向打印
LODOPObj.PREVIEW();
//LODOPObj.PRINT();
// LODOPObj.PRINT_SETUP();
const { length } = viewData;
LODOPObj.On_Return = (TaskId, Value) => {
console.log(TaskId, Value === 1 || Value === '1' ? '已发出实际打印命令！' : '放弃打印！');
this.setState({
printIndex: this.state.printIndex + 1,
}, () => {
if (this.state.printIndex < length) {
this.printOne();
} else {
this.setState({
loading: false,
});
}
});
};
};
printOneByOne = () => { // 按队列打印
printOneByOne = () => {
// 按队列打印
const { configAll, viewData, printIndex } = this.state;
if (viewData && viewData.length) {
message.info(`正在打印第${printIndex + 1}张奖状`);
this.printOne();
const { length } = viewData;
let LODOPObj = window.LODOP;
LODOPObj.On_Return_Remain = true;
LODOPObj.On_Return = (TaskId, Value) => {
console.log(TaskId, Value === 1 || Value === '1' ? '已发出实际打印命令！' : '放弃打印！');
this.setState({
printIndex: this.state.printIndex + 1,
}, () => {
if (this.state.printIndex < length) {
message.info(`正在打印第${this.state.printIndex + 1}张奖状`);
this.printOne();
} else {
this.setState({
loading: false,
});
}
},
);
};
} else {
console.error('暂无数据无法打印');
}
......@@ -149,7 +165,7 @@ export default class ViewPrint extends Component {
};
render() {
const { configAll, viewData, showWindowPrint, loading } = this.state;
const { configAll, viewData, showWindowPrint, loading, printBg } = this.state;
if (!viewData) {
return null;
}
......@@ -166,9 +182,32 @@ export default class ViewPrint extends Component {
<Fragment>
<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ButtonDiy name={'打印'}
handleClick={this.printByLodop}
loading={loading}
<ButtonDiy
name={'打印设备选择'}
handleClick={() => {
window.LODOP.SELECT_PRINTER();
}}
loading={loading}
/>
<ButtonDiy
name={'打印背景图'}
handleClick={() => {
this.setState({
printBg: true,
}, () => {
this.printByLodop();
});
}}
loading={loading}
/>
<ButtonDiy
name={'打印'}
handleClick={this.setState({
printBg: false,
}, () => {
this.printByLodop();
})}
loading={loading}
/>
<ButtonDiy
name={'返回'}
......@@ -216,24 +255,27 @@ export default class ViewPrint extends Component {
<div
key={`${index}divKey`}
id={`printDomId_${index}`}
style={{
position: 'relative',
width: 'auto',
pageBreakAfter: 'always',
...imageStyle,
}}>
{hasPrintBackground || true ? (
<img
src={backgroundUrl}
draggable={false}
alt={'背景图'}
style={{
zIndex: 1,
...imageStyleAll,
}}
/>
) : null}
{this.detailDom(info)}
style={{}}>
<div
style={{
position: 'relative',
width: 'auto',
pageBreakAfter: 'always',
...imageStyle,
}}>
{hasPrintBackground || printBg ? (
<img
src={backgroundUrl}
draggable={false}
alt={'背景图'}
style={{
zIndex: 1,
...imageStyleAll,
}}
/>
) : null}
{this.detailDom(info)}
</div>
</div>
);
})}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论