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) => { ...@@ -17,32 +17,32 @@ const normalTextRender = (text, config) => {
if (!text || text === 'undefined' || typeof text === 'undefined') { if (!text || text === 'undefined' || typeof text === 'undefined') {
return null; 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'; const height = config.high ? config.high + 'px' : 'auto';
if (config.mark && text.indexOf(config.mark) > -1) { // 换行分隔符 if (config.mark && text.indexOf(config.mark) > -1) { // 换行分隔符
text = text.split(config.mark); text = text.split(config.mark);
let length = text.length; let length = text.length;
return text.map((x, index) => { return text.map((x, index) => {
return <div return <div
key={x} key={x}
style={{ style={{
...styleCount(config), ...styleCount(config),
marginBottom: '0', marginBottom: '0',
width, width,
textAlign: 'right', textAlign: 'right',
}}> }}>
{x}{length > index + 1 ? config.mark : ''} {x}{length > index + 1 ? config.mark : ''}
</div>; </div>;
}); });
} }
return ( return (
<div style={{ <div style={{
...styleCount(config), ...styleCount(config),
marginBottom: '0',
width, width,
height, height,
lineHeight: height, lineHeight: 'normal',
verticalAlign: 'top',
textAlign: 'right', textAlign: 'right',
letterSpacing: '2px', letterSpacing: '2px',
}}> }}>
...@@ -102,17 +102,22 @@ class BarCode extends React.Component { ...@@ -102,17 +102,22 @@ class BarCode extends React.Component {
export default function DetailDom({ config, data }) { 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) => { const outSideDom = (children) => {
return ( return (
<div <div
style={{ style={{
position: 'absolute', ...styleOutSide,
zIndex: 10,
fontWeight: 'bold',
left: x + 'px',
top: y + 'px',
transform: transform ? `rotate(${transform}deg)` : 'none',
}} }}
key={`filed${config.id}`}> key={`filed${config.id}`}>
{children} {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 { message } from 'antd';
import { ModalConfirm, ModalInfo } from '@/baseComponent/Modal'; import { ModalConfirm, ModalInfo } from '@/baseComponent/Modal';
import * as lo from './LodopFuncs';
export const A4Height = '29.6cm'; export const A4Height = '29.6cm';
export const A4Width = '20.9cm'; export const A4Width = '20.9cm';
...@@ -9,6 +10,10 @@ export const imageStyleAll = { ...@@ -9,6 +10,10 @@ export const imageStyleAll = {
}; };
export function getCLodopFuncJS() { export function getCLodopFuncJS() {
return new Promise((resolve, reject) => {
resolve(true);
});
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (window.LODOP) { if (window.LODOP) {
console.log('打印插件加载成功'); console.log('打印插件加载成功');
...@@ -16,10 +21,15 @@ export function getCLodopFuncJS() { ...@@ -16,10 +21,15 @@ export function getCLodopFuncJS() {
return true; return true;
} }
let sc = document.createElement('script'); 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); document.querySelector('body').appendChild(sc);
sc.onload = function() { 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); resolve(true);
console.log('打印插件加载成功'); console.log('打印插件加载成功');
}; };
......
zyd_private/DragAndPrint/ViewPrint/index2.js
浏览文件 @ 2b3865f5
...@@ -47,10 +47,10 @@ export default class ViewPrint extends Component { ...@@ -47,10 +47,10 @@ export default class ViewPrint extends Component {
console.error(`${x.queryUrl}接口报错或者没有返回数据`); console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false; return false;
} }
// let i = 0; // let i = 0;
for (const item of viewData) { for (const item of viewData) {
// item.name = ['张浩', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][i] || '钟是志'; // item.name = ['黎处', '王昊楠', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][i] || '钟是志';
// i++; // i++;
for (let z in item) { for (let z in item) {
if (item[z] === null || item[z] === 'null') { if (item[z] === null || item[z] === 'null') {
item[z] = ''; item[z] = '';
...@@ -68,12 +68,17 @@ export default class ViewPrint extends Component { ...@@ -68,12 +68,17 @@ export default class ViewPrint extends Component {
componentDidMount() { componentDidMount() {
this.getViewData(); this.getViewData();
getCLodopFuncJS().then((response) => { getCLodopFuncJS().then((response) => {
window.On_CLodop_Opened = function(){
console.log('On_CLodop_Opened');
window.On_CLodop_Opened = null;
};
if (response) { if (response) {
this.setState({ this.setState({
loading: false, loading: false,
}); });
} }
}); });
} }
detailDom = (data) => { detailDom = (data) => {
...@@ -94,38 +99,49 @@ export default class ViewPrint extends Component { ...@@ -94,38 +99,49 @@ export default class ViewPrint extends Component {
printOne = () => { printOne = () => {
const { printIndex, configAll, viewData } = this.state; const { printIndex, configAll, viewData } = this.state;
const { wide, high } = configAll; const { wide, high } = configAll;
let LODOPObj = window.LODOP; let LODOPObj = window.LODOP;
let strHTML = document.getElementById(`printDomId_${printIndex}`).innerHTML; let strHTML = document.getElementById(`printDomId_${printIndex}`).innerHTML;
strHTML = strHTML.replace('break-after: page;', 'page-break-after: always;'); strHTML = strHTML.replace(
strHTML = `<!DOCTYPE html>${strHTML}`; '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}`); LODOPObj.PRINT_INIT(`printDomId_${printIndex}`);
// window.LODOP.PRINT_INITA(1, 1, 770, 660, '测试预览功能'); // 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.ADD_PRINT_HTM(0, 0, `${wide + 0.1}cm`, `${high + 0.1}cm`, strHTML); // 打印的宽高和 html
LODOPObj.SET_PRINT_PAGESIZE(2, 0, 0); // 纵向打印 LODOPObj.SET_PRINT_PAGESIZE(2, 0, 0); // 纵向打印
LODOPObj.PREVIEW(); LODOPObj.PREVIEW();
//LODOPObj.PRINT();
// LODOPObj.PRINT_SETUP(); // 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; const { configAll, viewData, printIndex } = this.state;
if (viewData && viewData.length) { if (viewData && viewData.length) {
message.info(`正在打印第${printIndex + 1}张奖状`);
this.printOne(); 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 { } else {
console.error('暂无数据无法打印'); console.error('暂无数据无法打印');
} }
...@@ -149,7 +165,7 @@ export default class ViewPrint extends Component { ...@@ -149,7 +165,7 @@ export default class ViewPrint extends Component {
}; };
render() { render() {
const { configAll, viewData, showWindowPrint, loading } = this.state; const { configAll, viewData, showWindowPrint, loading, printBg } = this.state;
if (!viewData) { if (!viewData) {
return null; return null;
} }
...@@ -166,9 +182,32 @@ export default class ViewPrint extends Component { ...@@ -166,9 +182,32 @@ export default class ViewPrint extends Component {
<Fragment> <Fragment>
<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}> <Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}> <div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ButtonDiy name={'打印'} <ButtonDiy
handleClick={this.printByLodop} name={'打印设备选择'}
loading={loading} 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 <ButtonDiy
name={'返回'} name={'返回'}
...@@ -216,24 +255,27 @@ export default class ViewPrint extends Component { ...@@ -216,24 +255,27 @@ export default class ViewPrint extends Component {
<div <div
key={`${index}divKey`} key={`${index}divKey`}
id={`printDomId_${index}`} id={`printDomId_${index}`}
style={{ style={{}}>
position: 'relative', <div
width: 'auto', style={{
pageBreakAfter: 'always', position: 'relative',
...imageStyle, width: 'auto',
}}> pageBreakAfter: 'always',
{hasPrintBackground || true ? ( ...imageStyle,
<img }}>
src={backgroundUrl} {hasPrintBackground || printBg ? (
draggable={false} <img
alt={'背景图'} src={backgroundUrl}
style={{ draggable={false}
zIndex: 1, alt={'背景图'}
...imageStyleAll, style={{
}} zIndex: 1,
/> ...imageStyleAll,
) : null} }}
{this.detailDom(info)} />
) : null}
{this.detailDom(info)}
</div>
</div> </div>
); );
})} })}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论