Skip to content

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

打印增加插件功能

上级 c751592a
显示空白字符变更
内嵌 并排
正在显示 包含 159 行增加 和 155 行删除
zyd_private/DragAndPrint/DragSetting.js
浏览文件 @ 2b51aa31
......@@ -9,8 +9,7 @@
import React, { Component } from 'react';
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 {
constructor(props) {
......@@ -137,7 +136,6 @@ export default class Index extends Component {
this.handleOnMouseMove(e);
}}
style={{
padding: '12px',
...imageStyle,
}}>
<img
......@@ -166,7 +164,10 @@ export default class Index extends Component {
top: `${item.y || 20 + index * 40}px`,
left: `${item.x || 20}px`,
}}>
<span style={{ marginLeft: '10px', marginRight: '10px' }}>
<span style={{
...styleCount(item),
fontWeight: 'bold',
}}>
{item.title}
</span>
</div>
......
zyd_private/DragAndPrint/ViewPrint/DetailDom.js
浏览文件 @ 2b51aa31
......@@ -2,7 +2,7 @@ import React from 'react';
import JsBarcode from 'jsbarcode';
import styles from '../index.less';
import moment from 'moment';
import { styleCount } from './config';
/**
* -2 条形码
* -1 常量
......@@ -11,77 +11,53 @@ import moment from 'moment';
* 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) => {
if (!text || text === 'undefined' || typeof text === 'undefined') {
return null;
}
const style = {
fontSize: `${config.fieldFontSize || 16}px`, // 默认 16px
fontFamily: `${config.fieldFont || '黑体'}`, // 默认黑体 包括 ('宋体','楷体','黑体','隶书','微软雅黑等字体'}
};
if (config.mark && text.indexOf(config.mark) > -1) { // 换行分隔符
text = text.split(config.mark);
let length = text.length;
return <span style={style}>
return <span style={styleCount(config)}>
{text.map((x, index) => {
return <p
key={x}
style={{ marginBottom: '0' }}>
{x} {length > index + 1 ? config.mark : ''}
style={{
marginBottom: '0',
width: `${config.wide}cm` || 'auto',
textAlign: 'right',
}}>
{x}{length > index + 1 ? config.mark : ''}
</p>;
})}
</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}
</span>;
</p>
<div></div>
</div>
)
;
};
const imageRender = (imageUrl) => {
......@@ -141,8 +117,6 @@ export default function DetailDom({ config, data }) {
style={{
position: 'absolute',
zIndex: 10,
paddingLeft: '10px',
paddingRight: '10px',
fontWeight: 'bold',
left: x + 'px',
top: y + 'px',
......
zyd_private/DragAndPrint/ViewPrint/config.js
浏览文件 @ 2b51aa31
......@@ -9,8 +9,8 @@ export const imageStyleAll = {
};
export function getCLodopFuncJS() {
return new Promise((resolve, reject) =>{
if(window.LODOP){
return new Promise((resolve, reject) => {
if (window.LODOP) {
console.log('打印插件加载成功');
resolve(true);
return true;
......@@ -19,6 +19,7 @@ export function getCLodopFuncJS() {
sc.src = `http://localhost:18000/CLodopFuncs.js`;
document.querySelector('body').appendChild(sc);
sc.onload = function() {
// window.LODOP = window.getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
resolve(true);
console.log('打印插件加载成功');
};
......@@ -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';
import styles from '../index.less';
import DetailDom from './DetailDom';
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 {
constructor(props) {
......@@ -18,6 +26,7 @@ export default class ViewPrint extends Component {
viewData: null,
loading: true,
minHeight: 0,
printIndex: 0,
showWindowPrint: false,
};
this.getConfigInfo = queryConfig.bind(this);
......@@ -56,11 +65,15 @@ export default class ViewPrint extends Component {
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] = '';
}
//if(item[])
}
}
this.setState({
......@@ -71,15 +84,6 @@ export default class ViewPrint extends Component {
});
};
beforePrint = () => {
console.log('beforePrint');
};
afterPrint = () => {
console.log('afterPrint');
};
componentDidMount() {
this.getViewData();
getCLodopFuncJS().then((response) => {
......@@ -107,70 +111,61 @@ export default class ViewPrint extends Component {
return res;
};
onBeforeGetContent = () => {
this.setState({
loading: true,
});
printOne = () => {
const { printIndex, configAll } = this.state;
const { backgroundUrl, wide, high } = configAll;
return new Promise((resolve, reject) => {
const { selectedRows } = this.props;
const { configAll } = this.state;
let LODOPObj = window.LODOP;
let strHTML = document.getElementById(`printDomId_${printIndex}`).innerHTML;
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;
});
// 暂时关闭调用这个接口 不通知后台是否打印了
getInfo({ ids: ids.join(',') }, configAll.callUrl).then((x) => {
if (x) {
this.setState({ showWindowPrint: true }, () => {
resolve(true);
});
};
printOneByOne = () => { // 按队列打印
const { configAll, viewData, printIndex } = this.state;
if (viewData && viewData.length) {
this.printOne();
} else {
resolve(true);
console.error('暂无数据无法打印');
}
});
} else {
this.setState({ showWindowPrint: true }, () => {
resolve(true);
});
const length = viewData.length;
const LODOPObj = window.LODOP;
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();
}
});
};
};
printByLodop = () => {
const { configAll } = this.state;
const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
this.setState({
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('放弃打印！');
if (!window.LODOP || !window.LODOP.PRINT_INIT) {
console.error('打印服务未启动');
ModalInfo('打印服务未启动');
return false;
}
};
});
this.setState(
{
showWindowPrint: true,
printIndex: 0,
},
() => {
this.printOneByOne();
},
);
};
render() {
const {
loading,
configAll,
viewData,
showWindowPrint,
minHeight,
} = this.state;
const { configAll, viewData, showWindowPrint, minHeight } = this.state;
if (!viewData || !minHeight) {
return null;
}
......@@ -179,37 +174,15 @@ export default class ViewPrint extends Component {
return null;
}
const { hasPrintBackground, backgroundUrl, wide, high } = configAll;
const imageStyle = {
let imageStyle = {
height: `${high}cm` || A4Height,
width: `${wide}cm` || A4Width,
};
return (
<Fragment>
<Shell styleShell={{ marginTop: '0', marginBottom: '20px' }}>
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ButtonDiy name={'打印'}
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 name={'打印'} handleClick={this.printByLodop}/>
<ButtonDiy
name={'返回'}
handleClick={() => {
......@@ -219,7 +192,7 @@ export default class ViewPrint extends Component {
</div>
</Shell>
{/** 预览的dom **/}
{/** 预览的dom */}
{viewData && viewData.length ? (
<div>
{viewData.map((info, index) => {
......@@ -249,19 +222,20 @@ export default class ViewPrint extends Component {
<div
ref={(node) => (this.content = node)}
style={{
display: showWindowPrint ? 'block' : 'none',
display: showWindowPrint && false ? 'block' : 'none',
}}>
{viewData.map((info, index) => {
return (
<div
key={`${index}divKey`}
id={`printDomId_${index}`}
style={{
position: 'relative',
width: 'auto',
pageBreakAfter: 'always',
...imageStyle,
}}>
{hasPrintBackground && false ? (
{hasPrintBackground || true ? (
<img
src={backgroundUrl}
draggable={false}
......@@ -274,7 +248,6 @@ export default class ViewPrint extends Component {
}}
/>
) : null}
{this.detailDom(info)}
</div>
);
......
zyd_private/DragAndPrint/index.less
浏览文件 @ 2b51aa31
......@@ -11,14 +11,14 @@
position: absolute;
cursor: move;
z-index: 10;
color: #000;
// color: #000;
user-select: none;
// padding-left: 10px;
// padding-right: 10px;
font-size: 14px;
// font-size: 14px;
// line-height: 28px;
border: 1px solid gray;
background-color: #CCC;
// background-color: #CCC;
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论