Skip to content

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

打印预览修改

上级 9a26e2aa
隐藏空白字符变更
内嵌 并排
正在显示 包含 297 行增加 和 251 行删除
zyd_private/DragAndPrint/ViewPrint/index2.js
浏览文件 @ 077b2cf3
......@@ -19,268 +19,314 @@ import { ModalInfo } from '@/baseComponent/Modal';
import replace from '../../../../../config/zydxg/routes/studentAffairs/replace';
export default class ViewPrint extends Component {
constructor(props) {
super(props);
this.state = {
configAll: null,
viewData: null,
loading: true,
printIndex: 0,
showWindowPrint: false,
};
this.getConfigInfo = queryConfig.bind(this);
}
constructor(props) {
super(props);
this.state = {
configAll: null,
viewData: null,
loading: true,
printIndex: 0,
showWindowPrint: false,
};
this.getConfigInfo = queryConfig.bind(this);
}
getViewData = () => {
const { selectedRows } = this.props;
const ids = selectedRows.map((x) => x.id);
this.getConfigInfo().then((x) => {
if (x && x.queryUrl) {
getInfo(
{
ids: ids.join(','),
},
x.queryUrl,
).then((viewData) => {
if (!viewData || !viewData.length) {
message.warning('未查询到可打印的奖状数据');
console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false;
}
// let i = 0;
for (const item of viewData) {
// item.name = ['黎处', '王昊楠', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][i] || '钟是志';
// i++;
for (let z in item) {
if (item[z] === null || item[z] === 'null') {
item[z] = '';
}
}
}
this.setState({
viewData,
});
});
}
});
};
getViewData = () => {
const { selectedRows } = this.props;
const ids = selectedRows.map((x) => x.id);
this.getConfigInfo().then((x) => {
if (x && x.queryUrl) {
getInfo(
{
ids: ids.join(','),
},
x.queryUrl,
).then((viewData) => {
if (!viewData || !viewData.length) {
message.warning('未查询到可打印的奖状数据');
console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false;
}
// let i = 0;
for (const item of viewData) {
// item.name = ['黎处', '王昊楠', '古力娜扎', '古丽尼帕尔·阿布都黑利力'][i] || '钟是志';
// i++;
for (let z in item) {
if (item[z] === null || item[z] === 'null') {
item[z] = '';
}
}
}
this.setState({
viewData,
});
});
}
});
};
componentDidMount() {
this.getViewData();
getCLodopFuncJS().then((response) => {
window.On_CLodop_Opened = function(){
console.log('打印插件准备就绪,随时可以打印');
window.On_CLodop_Opened = null;
};
if (response) {
this.setState({
loading: false,
});
}
});
componentDidMount() {
this.getViewData();
getCLodopFuncJS().then((response) => {
window.On_CLodop_Opened = function() {
console.log('打印插件准备就绪,随时可以打印');
window.On_CLodop_Opened = null;
};
if (response) {
this.setState({
loading: false,
});
}
});
}
}
detailDom = (data) => {
const {
configAll: { config },
} = this.state;
const res = [];
for (const item of config) {
res.push(
DetailDom({
config: item,
data: data[item.fieldCode],
}),
);
}
return res;
};
detailDom = (data) => {
const {
configAll: { config },
} = this.state;
const res = [];
for (const item of config) {
res.push(
DetailDom({
config: item,
data: data[item.fieldCode],
}),
);
}
return res;
};
printOne = () => {
const { printIndex, configAll, viewData } = this.state;
const { printMeth } = configAll;
const { wide, high } = configAll;
const { LODOP } = window;
let strHTML = document.getElementById(`printDomId_${printIndex}`).innerHTML;
strHTML = strHTML.replace(
printOne = () => {
const { printIndex, configAll, viewData } = this.state;
const { printMeth } = configAll;
const { wide, high } = configAll;
const { LODOP } = window;
let strHTML = document.getElementById(`djfgkjdlfjg`).innerHTML;
/*strHTML = strHTML.replace(
'break-after: page;',
'page-break-after: always;',
);
strHTML = `${strHTML}`;
// strHTML = 'http://scjoyedu.eicp.net:53005/config/23333.pdf';
LODOP.PRINT_INITA(0, 0, `100%`, `100%`, "printDomId_" + printIndex);
LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true);
LODOP.SET_PRINT_PAGESIZE(printMeth, 0, 0, "A4");
LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strHTML); // HTML 打印
// LODOP.ADD_PRINT_URL(0, 0, '100%', '100%', strHTML); // URL 打印
// LODOP.PRINT(); // 直接打印
LODOP.PREVIEW(); // 打印预览
};
strHTML = `<div style="
page-break-after: always;
background-color: red;
position: relative;
/!*background-image: url('http://zysoft.cdzhiyong.com:53003/dsf/u/upload/202006/05182802hzom.jpg');*!/
width: 29.6cm;
height: 21cm; "><div style="position: absolute;top: 10.5cm>123123
</div>
</div>`;
console.log(strHTML);*/
LODOP.PRINT_INITA(0, '-0.3cm', `100%`, `100%`, 'printDomId_' + printIndex);
// LODOP.SET_PRINT_MODE('POS_BASEON_PAPER', true);
// LODOP.SET_PRINT_STYLEA('All', 'VOrient', 2);
// LODOP.SET_PRINT_STYLEA('All', 'HOrient', 2);
LODOP.SET_PRINT_PAGESIZE(printMeth, 0, 0, 'A4'); // 纵向打印
//LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4'); // 纵向打印
LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strHTML); // HTML 打印
// LODOP.ADD_PRINT_URL(0, 0, '100%', '100%', strHTML); // URL 打印
// LODOP.PRINT(); // 直接打印
LODOP.PREVIEW(); // 打印预览
};
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('暂无数据无法打印');
}
};
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('暂无数据无法打印');
}
};
printByLodop = () => {
if (!window.LODOP || !window.LODOP.PRINT_INIT) {
console.error('打印服务未启动');
ModalInfo('打印服务未启动');
return false;
}
this.setState(
{
showWindowPrint: true,
printIndex: 0,
},
() => {
this.printOneByOne();
},
);
};
printByLodop = () => {
if (!window.LODOP || !window.LODOP.PRINT_INIT) {
console.error('打印服务未启动');
ModalInfo('打印服务未启动');
return false;
}
this.setState(
{
showWindowPrint: true,
printIndex: 0,
},
() => {
this.printOneByOne();
},
);
};
render() {
const { configAll, viewData, showWindowPrint, loading, printBg } = this.state;
if (!viewData) {
return null;
}
if (!configAll.backgroundUrl) {
console.error('没有设置模版图片无法使用');
return null;
}
const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
let imageStyle = {
height: high ? `${high}cm` : A4Height,
width: wide ? `${wide}cm` : A4Width,
textAlign: 'center',
};
return (
<Fragment>
<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ButtonDiy
name={'打印设备选择'}
handleClick={() => {
window.LODOP.SELECT_PRINTER();
}}
loading={loading}
/>
<ButtonDiy
name={'打印'}
handleClick={() => {
this.setState({
printBg: false,
}, () => {
this.printByLodop();
});
}}
loading={loading}
/>
<ButtonDiy
name={'返回'}
handleClick={() => {
router.goBack();
}}
/>
</div>
</Shell>
render() {
const {
configAll,
viewData,
showWindowPrint,
loading,
printBg,
} = this.state;
if (!viewData) {
return null;
}
if (!configAll.backgroundUrl) {
console.error('没有设置模版图片无法使用');
return null;
}
const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
let imageStyle = {
height: high ? `${high}cm` : A4Height,
width: wide ? `${wide}cm` : A4Width,
textAlign: 'center',
};
return (
<Fragment>
<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ButtonDiy
name={'打印设备选择'}
handleClick={() => {
window.LODOP.SELECT_PRINTER();
}}
loading={loading}
/>
<ButtonDiy
name={'打印'}
handleClick={() => {
this.setState(
{
printBg: false,
},
() => {
this.printByLodop();
},
);
}}
loading={loading}
/>
<ButtonDiy
name={'返回'}
handleClick={() => {
router.goBack();
}}
/>
</div>
</Shell>
{/** 预览的dom */}
{viewData && viewData.length ? (
<div>
{viewData.map((info, index) => {
return (
<div
className={styles.outSideDivPrint}
key={index + 'divKey'}
style={{
...imageStyle,
}}>
{ hasPrintBackground ? (
<img
src={backgroundUrl}
draggable={false}
alt={'背景图'}
style={{
zIndex: 1,
...imageStyleAll,
// border: '1px solid red',
}}
/>
) : null}
{this.detailDom(info)}
</div>
);
})}
</div>
) : null}
{/** 预览的dom */}
{viewData && viewData.length ? (
<div>
{viewData.map((info, index) => {
return (
<div
className={styles.outSideDivPrint}
key={index + 'divKey'}
style={{
...imageStyle,
}}>
{hasPrintBackground ? (
<img
src={backgroundUrl}
draggable={false}
alt={'背景图'}
style={{
zIndex: 1,
...imageStyleAll,
// border: '1px solid red',
}}
/>
) : null}
{this.detailDom(info)}
</div>
);
})}
</div>
) : null}
<div id={'djfgkjdlfjg'}>
{/** 打印的dom */}
{viewData && viewData.length ? (
<div
ref={(node) => (this.content = node)}
style={{
display: showWindowPrint ? 'block' : 'none',
}}>
{viewData.map((info, index) => {
return (
<div
key={`${index}divKey`}
id={`printDomId_${index}`}
style={{}}>
<div
style={{
position: 'relative',
pageBreakAfter: 'always',
// border: '1px solid red',
...imageStyle,
}}>
{ hasPrintBackground ? (
<img
src={backgroundUrl}
draggable={false}
alt={'背景图'}
style={{
zIndex: 1,
...imageStyleAll,
// border: '1px solid red',
}}
/>
) : null}
{this.detailDom(info)}
</div>
</div>
);
})}
</div>
) : null}
</Fragment>
);
}
<div
style={{
pageBreakAfter: 'always',
// backgroundColor: 'red',
position: 'relative',
width: '100%',
height: '100%',
}}>
<img
src={backgroundUrl}
width={'1000px'}
height={'800px'}
style={{
// position: 'absolute',
// top: '-0.2cm',
}}
/>
</div>
</div>
{/** 打印的dom */}
{viewData && viewData.length ? (
<div
ref={(node) => (this.content = node)}
style={{
display: showWindowPrint ? 'block' : 'none',
}}>
{viewData.map((info, index) => {
return (
<div
key={`${index}divKey`}
id={`printDomId_${index}`}
style={{}}>
<div
style={{
position: 'relative',
pageBreakAfter: 'always',
// border: '1px solid red',
...imageStyle,
}}>
{hasPrintBackground ? (
<img
src={backgroundUrl}
draggable={false}
alt={'背景图'}
style={{
zIndex: 1,
...imageStyleAll,
// border: '1px solid red',
}}
/>
) : null}
{this.detailDom(info)}
</div>
</div>
);
})}
</div>
) : null}
</Fragment>
);
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论