Skip to content

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

打印增加插件功能

上级 c751592a
显示空白字符变更
内嵌 并排
正在显示 包含 159 行增加 和 155 行删除
zyd_private/DragAndPrint/DragSetting.js
浏览文件 @ 2b51aa31
...@@ -9,8 +9,7 @@ ...@@ -9,8 +9,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import styles from './index.less'; import styles from './index.less';
import { imageStyleAll, A4Height, A4Width } from './ViewPrint/config'; import { imageStyleAll, A4Height, A4Width, styleCount } from './ViewPrint/config';
export default class Index extends Component { export default class Index extends Component {
constructor(props) { constructor(props) {
...@@ -137,7 +136,6 @@ export default class Index extends Component { ...@@ -137,7 +136,6 @@ export default class Index extends Component {
this.handleOnMouseMove(e); this.handleOnMouseMove(e);
}} }}
style={{ style={{
padding: '12px',
...imageStyle, ...imageStyle,
}}> }}>
<img <img
...@@ -166,7 +164,10 @@ export default class Index extends Component { ...@@ -166,7 +164,10 @@ export default class Index extends Component {
top: `${item.y || 20 + index * 40}px`, top: `${item.y || 20 + index * 40}px`,
left: `${item.x || 20}px`, left: `${item.x || 20}px`,
}}> }}>
<span style={{ marginLeft: '10px', marginRight: '10px' }}> <span style={{
...styleCount(item),
fontWeight: 'bold',
}}>
{item.title} {item.title}
</span> </span>
</div> </div>
......
zyd_private/DragAndPrint/ViewPrint/DetailDom.js
浏览文件 @ 2b51aa31
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import JsBarcode from 'jsbarcode'; import JsBarcode from 'jsbarcode';
import styles from '../index.less'; import styles from '../index.less';
import moment from 'moment'; import moment from 'moment';
import { styleCount } from './config';
/** /**
* -2 条形码 * -2 条形码
* -1 常量 * -1 常量
...@@ -11,77 +11,53 @@ import moment from 'moment'; ...@@ -11,77 +11,53 @@ import moment from 'moment';
* 2 照片 * 2 照片
* */ * */
export const fieldTypeList = [
{
key: '-2',
name: '条形码',
},
{
key: '-1',
name: '常量',
},
{
key: '0',
name: '文字',
},
{
key: '1',
name: '时间',
},
{
key: '2',
name: '照片',
},
];
export const fontFamilyList = [
{
key: '宋体',
name: '宋体',
},
{
key: '楷体',
name: '楷体',
},
{
key: '黑体',
name: '黑体',
},
{
key: '隶书',
name: '隶书',
},
{
key: '微软雅黑',
name: '微软雅黑',
},
];
const normalTextRender = (text, config) => { const normalTextRender = (text, config) => {
if (!text || text === 'undefined' || typeof text === 'undefined') { if (!text || text === 'undefined' || typeof text === 'undefined') {
return null; return null;
} }
const style = {
fontSize: `${config.fieldFontSize || 16}px`, // 默认 16px
fontFamily: `${config.fieldFont || '黑体'}`, // 默认黑体 包括 ('宋体','楷体','黑体','隶书','微软雅黑等字体'}
};
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 <span style={style}> return <span style={styleCount(config)}>
{text.map((x, index) => { {text.map((x, index) => {
return <p return <p
key={x} key={x}
style={{ marginBottom: '0' }}> style={{
{x} {length > index + 1 ? config.mark : ''} marginBottom: '0',
width: `${config.wide}cm` || 'auto',
textAlign: 'right',
}}>
{x}{length > index + 1 ? config.mark : ''}
</p>; </p>;
})} })}
</span>; </span>;
} }
return <span style={style}> return (
<div style={{
textAlign: 'justify',
textAlignLast: 'justify',
}}>
<p style={{
/* float:'left',
textAlign:'justify',
textJustify:'inter-word',
textJustify:'inter-ideograph',*/
marginBottom: '0',
width: `${config.wide}cm` || 'auto',
textAlign: 'right',
letterSpacing: '2px',
height: `${config.high}cm` || 'auto',
...styleCount(config),
lineHeight: `${config.high}cm` || 'auto',
}}>
{text} {text}
</span>; </p>
<div></div>
</div>
)
;
}; };
const imageRender = (imageUrl) => { const imageRender = (imageUrl) => {
...@@ -141,8 +117,6 @@ export default function DetailDom({ config, data }) { ...@@ -141,8 +117,6 @@ export default function DetailDom({ config, data }) {
style={{ style={{
position: 'absolute', position: 'absolute',
zIndex: 10, zIndex: 10,
paddingLeft: '10px',
paddingRight: '10px',
fontWeight: 'bold', fontWeight: 'bold',
left: x + 'px', left: x + 'px',
top: y + 'px', top: y + 'px',
......
zyd_private/DragAndPrint/ViewPrint/config.js
浏览文件 @ 2b51aa31
...@@ -9,8 +9,8 @@ export const imageStyleAll = { ...@@ -9,8 +9,8 @@ export const imageStyleAll = {
}; };
export function getCLodopFuncJS() { export function getCLodopFuncJS() {
return new Promise((resolve, reject) =>{ return new Promise((resolve, reject) => {
if(window.LODOP){ if (window.LODOP) {
console.log('打印插件加载成功'); console.log('打印插件加载成功');
resolve(true); resolve(true);
return true; return true;
...@@ -19,6 +19,7 @@ export function getCLodopFuncJS() { ...@@ -19,6 +19,7 @@ export function getCLodopFuncJS() {
sc.src = `http://localhost:18000/CLodopFuncs.js`; sc.src = `http://localhost:18000/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'));
resolve(true); resolve(true);
console.log('打印插件加载成功'); console.log('打印插件加载成功');
}; };
...@@ -35,3 +36,58 @@ export function getCLodopFuncJS() { ...@@ -35,3 +36,58 @@ export function getCLodopFuncJS() {
}); });
} }
export const fieldTypeList = [
{
key: '-2',
name: '条形码',
},
{
key: '-1',
name: '常量',
},
{
key: '0',
name: '文字',
},
{
key: '1',
name: '时间',
},
{
key: '2',
name: '照片',
},
];
export const fontFamilyList = [
{
key: '宋体',
name: '宋体',
},
{
key: '楷体',
name: '楷体',
},
{
key: '黑体',
name: '黑体',
},
{
key: '隶书',
name: '隶书',
},
{
key: '微软雅黑',
name: '微软雅黑',
},
];
export const styleCount = (config) => {
const style = {
fontSize: `${config.fieldFontSize || 16}px`, // 默认 16px
fontFamily: `${config.fieldFont || '黑体'}`, // 默认黑体 包括 ('宋体','楷体','黑体','隶书','微软雅黑等字体'}
lineHeight: `${config.fieldFontSize || 16}px`,
};
return style;
};
zyd_private/DragAndPrint/ViewPrint/index2.js
浏览文件 @ 2b51aa31
...@@ -9,6 +9,14 @@ import router from 'umi/router'; ...@@ -9,6 +9,14 @@ import router from 'umi/router';
import styles from '../index.less'; import styles from '../index.less';
import DetailDom from './DetailDom'; import DetailDom from './DetailDom';
import { imageStyleAll, A4Width, A4Height, getCLodopFuncJS } from './config'; import { imageStyleAll, A4Width, A4Height, getCLodopFuncJS } from './config';
import RenderAuthorized from '@/components/Authorized';
import { getAuthority } from '@/utils/authority';
const Authorized = RenderAuthorized(getAuthority());
const { check } = Authorized;
import { ModalInfo } from '@/baseComponent/Modal';
import replace from '../../../../../config/zydxg/routes/studentAffairs/replace';
export default class ViewPrint extends Component { export default class ViewPrint extends Component {
constructor(props) { constructor(props) {
...@@ -18,6 +26,7 @@ export default class ViewPrint extends Component { ...@@ -18,6 +26,7 @@ export default class ViewPrint extends Component {
viewData: null, viewData: null,
loading: true, loading: true,
minHeight: 0, minHeight: 0,
printIndex: 0,
showWindowPrint: false, showWindowPrint: false,
}; };
this.getConfigInfo = queryConfig.bind(this); this.getConfigInfo = queryConfig.bind(this);
...@@ -56,11 +65,15 @@ export default class ViewPrint extends Component { ...@@ -56,11 +65,15 @@ export default class ViewPrint extends Component {
console.error(`${x.queryUrl}接口报错或者没有返回数据`); console.error(`${x.queryUrl}接口报错或者没有返回数据`);
return false; return false;
} }
let i = 0;
for (const item of viewData) { for (const item of viewData) {
item.name = ['钟是志', '张浩', '古力娜扎', '买买提·阿布扎比','古丽尼帕尔·阿布都黑利力'][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] = '';
} }
//if(item[])
} }
} }
this.setState({ this.setState({
...@@ -71,15 +84,6 @@ export default class ViewPrint extends Component { ...@@ -71,15 +84,6 @@ export default class ViewPrint extends Component {
}); });
}; };
beforePrint = () => {
console.log('beforePrint');
};
afterPrint = () => {
console.log('afterPrint');
};
componentDidMount() { componentDidMount() {
this.getViewData(); this.getViewData();
getCLodopFuncJS().then((response) => { getCLodopFuncJS().then((response) => {
...@@ -107,70 +111,61 @@ export default class ViewPrint extends Component { ...@@ -107,70 +111,61 @@ export default class ViewPrint extends Component {
return res; return res;
}; };
onBeforeGetContent = () => { printOne = () => {
this.setState({ const { printIndex, configAll } = this.state;
loading: true, const { backgroundUrl, wide, high } = configAll;
});
return new Promise((resolve, reject) => { let LODOPObj = window.LODOP;
const { selectedRows } = this.props; let strHTML = document.getElementById(`printDomId_${printIndex}`).innerHTML;
const { configAll } = this.state; strHTML = strHTML.replace('break-after: page;', 'page-break-after: always;');
LODOPObj.PRINT_INIT(`printDomId_${printIndex}`);
// window.LODOP.PRINT_INITA(1, 1, 770, 660, '测试预览功能');
LODOPObj.ADD_PRINT_HTM(0, 0, `${wide}cm`, `${high}cm`, strHTML); // 打印的宽高和 html
LODOPObj.SET_PRINT_PAGESIZE(2, 0, 0); // 纵向打印
LODOPObj.PREVIEW();
if (configAll.callUrl && false) { };
const ids = selectedRows.map((x) => {
return x.id; printOneByOne = () => { // 按队列打印
}); const { configAll, viewData, printIndex } = this.state;
// 暂时关闭调用这个接口 不通知后台是否打印了 if (viewData && viewData.length) {
getInfo({ ids: ids.join(',') }, configAll.callUrl).then((x) => { this.printOne();
if (x) {
this.setState({ showWindowPrint: true }, () => {
resolve(true);
});
} else { } else {
resolve(true); console.error('暂无数据无法打印');
} }
}); const length = viewData.length;
} else { const LODOPObj = window.LODOP;
this.setState({ showWindowPrint: true }, () => { LODOPObj.On_Return = (TaskId, Value) => {
resolve(true); console.log(TaskId, Value === 1 || Value === '1' ? '已发出实际打印命令！' : '放弃打印！');
}); this.setState({
printIndex: this.state.printIndex + 1,
}, () => {
if (this.state.printIndex < length) {
this.printOne();
} }
}); });
}; };
};
printByLodop = () => { printByLodop = () => {
const { configAll } = this.state; if (!window.LODOP || !window.LODOP.PRINT_INIT) {
const { hasPrintBackground, backgroundUrl, wide, high } = configAll; console.error('打印服务未启动');
ModalInfo('打印服务未启动');
this.setState({ return false;
showWindowPrint: true,
}, () => {
let strHTML = this.content.innerHTML;
window.LODOP.PRINT_INIT('');
// window.LODOP.PRINT_INITA(1, 1, 770, 660, '测试预览功能');
// window.LODOP.ADD_PRINT_TEXT(10, 60, 300, 200, '这是测试的纯文本，下面是超文本:');
window.LODOP.ADD_PRINT_HTM(0, 0, `${wide}cm`, `${high}cm`, strHTML);
window.LODOP.PREVIEW();
window.LODOP.On_Return = function(TaskId, Value) {
console.log(TaskId, Value);
if (Value === '1' || Value === 1) {
alert('已发出实际打印命令！');
}
else {
alert('放弃打印！');
} }
}; this.setState(
}); {
showWindowPrint: true,
printIndex: 0,
},
() => {
this.printOneByOne();
},
);
}; };
render() { render() {
const { const { configAll, viewData, showWindowPrint, minHeight } = this.state;
loading,
configAll,
viewData,
showWindowPrint,
minHeight,
} = this.state;
if (!viewData || !minHeight) { if (!viewData || !minHeight) {
return null; return null;
} }
...@@ -179,37 +174,15 @@ export default class ViewPrint extends Component { ...@@ -179,37 +174,15 @@ export default class ViewPrint extends Component {
return null; return null;
} }
const { hasPrintBackground, backgroundUrl, wide, high } = configAll; const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
const imageStyle = { let imageStyle = {
height: `${high}cm` || A4Height, height: `${high}cm` || A4Height,
width: `${wide}cm` || A4Width, width: `${wide}cm` || A4Width,
}; };
return ( return (
<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 name={'打印'} handleClick={this.printByLodop}/>
handleClick={this.printByLodop}
/>
{/* <ReactToPrint
trigger={() => (
<Button
shape="round"
type="primary"
loading={loading}
style={{ marginRight: '20px' }}>
打印
</Button>
)}
content={() => this.content}
onBeforeGetContent={this.onBeforeGetContent}
onAfterPrint={() => {
this.setState({
showWindowPrint: false,
loading: false,
});
}}
/>*/}
<ButtonDiy <ButtonDiy
name={'返回'} name={'返回'}
handleClick={() => { handleClick={() => {
...@@ -219,7 +192,7 @@ export default class ViewPrint extends Component { ...@@ -219,7 +192,7 @@ export default class ViewPrint extends Component {
</div> </div>
</Shell> </Shell>
{/** 预览的dom **/} {/** 预览的dom */}
{viewData && viewData.length ? ( {viewData && viewData.length ? (
<div> <div>
{viewData.map((info, index) => { {viewData.map((info, index) => {
...@@ -249,19 +222,20 @@ export default class ViewPrint extends Component { ...@@ -249,19 +222,20 @@ export default class ViewPrint extends Component {
<div <div
ref={(node) => (this.content = node)} ref={(node) => (this.content = node)}
style={{ style={{
display: showWindowPrint ? 'block' : 'none', display: showWindowPrint && false ? 'block' : 'none',
}}> }}>
{viewData.map((info, index) => { {viewData.map((info, index) => {
return ( return (
<div <div
key={`${index}divKey`} key={`${index}divKey`}
id={`printDomId_${index}`}
style={{ style={{
position: 'relative', position: 'relative',
width: 'auto', width: 'auto',
pageBreakAfter: 'always', pageBreakAfter: 'always',
...imageStyle, ...imageStyle,
}}> }}>
{hasPrintBackground && false ? ( {hasPrintBackground || true ? (
<img <img
src={backgroundUrl} src={backgroundUrl}
draggable={false} draggable={false}
...@@ -274,7 +248,6 @@ export default class ViewPrint extends Component { ...@@ -274,7 +248,6 @@ export default class ViewPrint extends Component {
}} }}
/> />
) : null} ) : null}
{this.detailDom(info)} {this.detailDom(info)}
</div> </div>
); );
......
zyd_private/DragAndPrint/index.less
浏览文件 @ 2b51aa31
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
position: absolute; position: absolute;
cursor: move; cursor: move;
z-index: 10; z-index: 10;
color: #000; // color: #000;
user-select: none; user-select: none;
// padding-left: 10px; // padding-left: 10px;
// padding-right: 10px; // padding-right: 10px;
font-size: 14px; // font-size: 14px;
// line-height: 28px; // line-height: 28px;
border: 1px solid gray; border: 1px solid gray;
background-color: #CCC; // background-color: #CCC;
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论