{
39 | constructor(props: IProps) {
40 | super(props);
41 |
42 | (this as any).printComponent = React.createRef();
43 | }
44 |
45 | public handlePrint = () => {
46 | hiprintTemplate.printByHtml(document.getElementById('previewDiv'));
47 | };
48 |
49 | render() {
50 | const { printList } = this.props;
51 | const printData = converResDataToPrintData(printList);
52 | return (
53 |
54 | {hiprint.getReactDom(orderPandel, printData)}
55 |
56 | );
57 | }
58 | }
59 |
60 | export default Print;
61 |
--------------------------------------------------------------------------------
/example/reatc-demo/Print/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import hiprint from "easy-print";
3 |
4 | import orderPandel from './panel';
5 | import CODImg from './cod.jpg';
6 |
7 | const { useState, useEffect, useImperativeHandle } = React;
8 |
9 | const hiprintTemplate = new hiprint.PrintTemplate({ template: orderPandel });
10 |
11 | const testData = new Array(10).fill({
12 | customer_name: 'fangxu',
13 | project: '打印项目/P000014',
14 | station: '打印项目站点/P0000156',
15 | service_type: 'fangxu',
16 | start_station: '站点',
17 | start_station_name: 'fangxu-站点-1',
18 | start_station_address: 'fangxu-站点1地址',
19 | end_station: '站点',
20 | end_station_name: 'fangxu-站点-2',
21 | end_station_address: 'fangxu-站点2地址',
22 | order_id: '订单ID:XXXXXXXXXXXX',
23 | box_type: 'test',
24 | is_scatter: '散',
25 | barcode: '51995314782232-0001',
26 | qrcode: '51995314782232-0001',
27 | remark: '备注',
28 | cod: CODImg,
29 | table: [
30 | { weight: '230', name: 'dfx' }
31 | ]
32 | });
33 |
34 | const Print = () => {
35 | // printList 是业务返回回来的需要打印的数据，需要经过一层适配器转换，转换称打印真正接收的数据。
36 | const { printList } = props;
37 | // printData 打印接受的数据
38 | const [printData, setPrintData] = useState([]);
39 | const [previewDiv, setPreviewDiv] = useState(null);
40 |
41 | useImperativeHandle(ref, () => ({
42 | handlePrint: () => {
43 | hiprintTemplate.printByHtml(previewDiv);
44 | },
45 | }));
46 |
47 | // useEffect(() => {
48 | // setPrintData(converResDataToPrintData(printList));
49 | // }, [printList]);
50 |
51 | // 测试数据
52 | useEffect(() => {
53 | setPrintData(testData);
54 | }, []);
55 |
56 | useEffect(() => {
57 | const previewDom = hiprintTemplate.getSimpleHtml(printData);
58 | setPreviewDiv(previewDom);
59 | }, [printData]);
60 |
61 | return (
62 |
63 | )
64 | };
65 |
66 | export default Print;
--------------------------------------------------------------------------------
/lib/dom/barcodeReactDom.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import JsBarcode from 'jsbarcode';
3 |
4 | import {
5 | getbarcodeMode,
6 | getColor,
7 | toPx,
8 | getPaddingTop,
9 | getPaddingBottom,
10 | getPaddingLeft,
11 | getPaddingRight,
12 | getTextAlign,
13 | getWidth,
14 | getHeight,
15 | getTop,
16 | getLeft,
17 | } from '../utils';
18 |
19 | const barcodeReactDom = function (options, item) {
20 | const svgDom = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
21 | JsBarcode(svgDom, item[options.field], {
22 | format: getbarcodeMode(options),
23 | width: 1.5,
24 | textMargin: -1,
25 | lineColor: getColor(options) || "#000000",
26 | margin: 0,
27 | height: parseInt(toPx(options.height || 10) - (options.contentPaddingTop || 0) - (options.contentPaddingBottom || 0)),
28 | displayValue: !1
29 | });
30 | svgDom.setAttribute('width', '100%');
31 | svgDom.setAttribute('height', '100%');
32 | svgDom.setAttribute('display', 'block');
33 | svgDom.setAttribute('preserveAspectRatio', 'none slice');
34 |
35 | const barcodeContentDom = React.createElement('div', {
36 | className: 'hiprint-printElement-text-content hiprint-printElement-content',
37 | style: {
38 | width: '100%',
39 | height: '100%',
40 | paddingTop: getPaddingTop(options),
41 | paddingBottom: getPaddingBottom(options),
42 | paddingLeft: getPaddingLeft(options),
43 | paddingRight: getPaddingRight(options),
44 | textAlign: getTextAlign(options),
45 | },
46 | dangerouslySetInnerHTML: {
47 | __html: svgDom.outerHTML
48 | }
49 | });
50 |
51 | return React.createElement('div', {
52 | className: 'hiprint-printElement hiprint-printElement-text"',
53 | style: {
54 | position: 'absolute',
55 | width: getWidth(options),
56 | height: getHeight(options),
57 | top: getTop(options),
58 | left: getLeft(options),
59 | }
60 | }, barcodeContentDom);
61 | };
62 |
63 | export default barcodeReactDom;
64 |
65 |
--------------------------------------------------------------------------------
/lib/dom/qrcodeReactDom.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import QRCode from 'qrcode.react';
3 |
4 | import {
5 | getColor,
6 | toPx,
7 | getPaddingTop,
8 | getPaddingBottom,
9 | getPaddingLeft,
10 | getPaddingRight,
11 | getTextAlign,
12 | getWidth,
13 | getHeight,
14 | getTop,
15 | getLeft,
16 | } from '../utils';
17 |
18 | const qrcodeReactDom = function (options, item) {
19 | // const svgDom = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
20 | // new QRCode(svgDom, {
21 | // width: parseInt(toPx(options.width || 20)),
22 | // height: parseInt(toPx(options.height || 20)),
23 | // colorDark: getColor(options) || "#000000",
24 | // useSVG: !0,
25 | // title: item[options.field],
26 | // }).makeCode(item[options.field]);
27 | const width = parseInt(toPx(options.width || 20) - (options.contentPaddingLeft || 0) - (options.contentPaddingRight || 0));
28 | const height = parseInt(toPx(options.height || 20) - (options.contentPaddingTop || 0) - (options.contentPaddingBottom || 0));
29 | const size = height < width ? height : width;
30 | const dom = (
31 |
36 | );
37 |
38 | const qrcodeContentDom = React.createElement('div', {
39 | className: 'hiprint-printElement-text-content hiprint-printElement-content',
40 | style: {
41 | width: '100%',
42 | height: '100%',
43 | paddingTop: getPaddingTop(options),
44 | paddingBottom: getPaddingBottom(options),
45 | paddingLeft: getPaddingLeft(options),
46 | paddingRight: getPaddingRight(options),
47 | textAlign: getTextAlign(options),
48 | },
49 | // dangerouslySetInnerHTML: {
50 | // __html: svgDom.innerHTML
51 | // }
52 | }, dom);
53 |
54 | return React.createElement('div', {
55 | className: 'hiprint-printElement hiprint-printElement-text"',
56 | style: {
57 | position: 'absolute',
58 | width: getWidth(options),
59 | height: getHeight(options),
60 | top: getTop(options),
61 | left: getLeft(options),
62 | }
63 | }, qrcodeContentDom);
64 | };
65 |
66 | export default qrcodeReactDom;
--------------------------------------------------------------------------------
/lib/dom/tableReactDom.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | getColor,
5 | getTextAlign,
6 | getWidth,
7 | getHeight,
8 | getTop,
9 | getLeft,
10 | getTitle,
11 | getFontFamily,
12 | getFontSize,
13 | getFontWeight,
14 | getLetterSpacing,
15 | getVerticalAlign,
16 | getLineHeight,
17 | } from '../utils';
18 |
19 | const tableReactDom = function(options, item) {
20 | const theadDom = getTableTheadDom(options);
21 | const tbodyDom = getTableTbodyDom(options, item);
22 | const tableDom = React.createElement('table', {
23 | className: 'hiprint-printElement-tableTarget',
24 | style: {
25 | borderCollapse: 'collapse',
26 | width: '100%',
27 | }
28 | }, [theadDom, tbodyDom]);
29 |
30 | const tableContentDom = React.createElement('div', {
31 | className: 'hiprint-printElement-table-content',
32 | style: {
33 | width: '100%',
34 | height: '100%',
35 | },
36 | }, tableDom);
37 | const outerDom = React.createElement('div', {
38 | className: 'hiprint-printElement hiprint-printElement-table',
39 | style: {
40 | position: 'absolute',
41 | width: getWidth(options),
42 | // height: getHeight(options),
43 | left: getLeft(options),
44 | top: getTop(options)
45 | },
46 | }, tableContentDom);
47 | return outerDom;
48 | }
49 |
50 | const getTableTheadDom = (options) => {
51 | const tdDoms = options.columns[0].map((column) => {
52 | return React.createElement('td', {
53 | style: {
54 | fontSize: getFontSize(options),
55 | fontFamily: getFontFamily(options),
56 | }
57 | }, column.title);
58 | });
59 | const trDom = React.createElement('tr', {}, tdDoms);
60 | const theadDom = React.createElement('thead', {
61 | style: {
62 | backgroundColor: options.tableHeaderBackground
63 | }
64 | }, trDom);
65 | return theadDom;
66 | }
67 |
68 | const getTableTbodyDom = (options, item) => {
69 | const tableData = item[options.field];
70 | const trDoms = [];
71 | tableData.forEach(trData => {
72 | const tdDoms = options.columns[0].map((column) => {
73 | return React.createElement('td', {
74 | style: {
75 | width: getWidth(column),
76 | height: `${options.tableBodyRowHeight || 18}pt`,
77 | fontSize: getFontSize(options),
78 | fontFamily: getFontFamily(options),
79 | whiteSpace: column.whiteSpace || "",
80 | maxWidth: `${column.maxWidth || column.width}pt`,
81 | overflow: column.overflow || "",
82 | },
83 | }, trData[column.field]);
84 | });
85 | const trDom = React.createElement('tr', {}, tdDoms);
86 | trDoms.push(trDom);
87 | });
88 | const tbodyDom = React.createElement('tbody', {}, trDoms);
89 | return tbodyDom;
90 | }
91 |
92 | export default tableReactDom
--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
1 | export const getPrintStyle = (paperType, height, width, orient) => {
2 | let str = '';
3 | if (paperType) {
4 | str += 'size:' + paperType + ' ' + (height > width ? 'portrait' : 'landscape') + ';';
5 | } else {
6 | str += 'size:' + width + 'mm ' + height + 'mm ' + (orient ? 1 == orient ? 'portrait' : 'landscape' : '') + ';';
7 | }
8 | return str;
9 | };
10 |
11 | export const getPageWidth = (panel) => {
12 | return panel.panels[0].width + 'mm';
13 | };
14 |
15 | export const getPageHeight = (panel) => {
16 | return panel.panels[0].height + 'mm';
17 | };
18 |
19 | export const getWidth = (options) => {
20 | return `${options.width || 0}pt`;
21 | };
22 |
23 | export const getHeight = (options) => {
24 | return `${options.height || 0}pt`;
25 | };
26 |
27 | export const getLeft = (options) => {
28 | return `${options.left || 0}pt`;
29 | };
30 |
31 | export const getTop = (options) => {
32 | return `${options.top || 0}pt`;
33 | };
34 |
35 | export const getBorderRadius = (options) => {
36 | return options.borderRadius || '50%';
37 | };
38 |
39 | export const getBorderWidth = (options) => {
40 | return `${options.borderWidth || 0.75}pt`;
41 | };
42 |
43 | export const getFontFamily = (options) => {
44 | return options.fontFamily || 'Microsoft YaHei';
45 | };
46 |
47 | export const getFontSize = (options) => {
48 | return `${options.fontSize || 9}pt`;
49 | };
50 |
51 | export const getFontWeight = (options) => {
52 | return options.fontWeight || 'normal';
53 | };
54 |
55 | export const getLineHeight = (options) => {
56 | return `${options.lineHeight || ''}pt`;
57 | };
58 |
59 | export const getLetterSpacing = (options) => {
60 | return options.letterSpacing || '';
61 | };
62 |
63 | export const getTextAlign = (options) => {
64 | return options.textAlign || '';
65 | };
66 |
67 | export const getVerticalAlign = (options) => {
68 | return options.textContentVerticalAlign || '';
69 | };
70 |
71 | export const getColor = (options) => {
72 | return options.color;
73 | };
74 |
75 | export const getPaddingTop = (options) => {
76 | return `${options.contentPaddingTop || 0}pt`;
77 | };
78 |
79 | export const getPaddingLeft = (options) => {
80 | return `${options.contentPaddingLeft || 0}pt`;
81 | };
82 |
83 | export const getPaddingBottom = (options) => {
84 | return `${options.contentPaddingBottom || 0}pt`;
85 | };
86 |
87 | export const getPaddingRight = (options) => {
88 | return `${options.contentPaddingRight || 0}pt`;
89 | };
90 |
91 | export const getbarcodeMode = (options) => {
92 | return options.barcodeMode || 'CODE128';
93 | };
94 |
95 | export const getTitle = (options) => {
96 | if (!options.hideTitle && options.title) {
97 | return options.title + '：';
98 | }
99 | return '';
100 | };
101 |
102 | const getDpi = () => {
103 | const _t2 = document.createElement("DIV");
104 |
105 | _t2.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
106 | document.body.appendChild(_t2);
107 | return _t2.offsetHeight;
108 | };
109 | const screenDpi = getDpi();
110 |
111 | export const toPx = (t) => t * (screenDpi / 72);
--------------------------------------------------------------------------------
/lib/reactDomFactory.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import rectReactDom from './dom/rectReactDom';
4 | import ovalReactDom from './dom/ovalReactDom';
5 | import hlineReactDom from './dom/hlineReactDom';
6 | import vlineReactDom from './dom/vlineReactDom';
7 | import imageReactDom from './dom/imageReactDom';
8 | import barcodeReactDom from './dom/barcodeReactDom';
9 | import qrcodeReactDom from './dom/qrcodeReactDom.jsx';
10 | import textReactDom from './dom/textReactDom';
11 | import tableReactDom from './dom/tableReactDom';
12 |
13 | import {
14 | getPrintStyle,
15 | } from './utils';
16 |
17 | const paperHeightTrim = 1;
18 |
19 | const reactDomFactory = (panel, data) => {
20 | const { printElements, paperType, height, width, orient, topOffset, leftOffset } = panel.panels[0];
21 | const panelDomArr = [];
22 |
23 | data.forEach((item) => {
24 | const childDom = [];
25 |
26 | printElements.forEach((element) => {
27 | let reactDom = null;
28 | const { options, printElementType } = element;
29 |
30 | if (printElementType.type === 'rect') {
31 | reactDom = rectReactDom(options);
32 | } else if (printElementType.type === 'oval') {
33 | reactDom = ovalReactDom(options, item);
34 | } else if (printElementType.type === 'hline') {
35 | reactDom = hlineReactDom(options);
36 | } else if (printElementType.type === 'vline') {
37 | reactDom = vlineReactDom(options);
38 | } else if (printElementType.type === 'image') {
39 | if (options.field && item[options.field]) {
40 | reactDom = imageReactDom(options, item);
41 | }
42 | } else if (printElementType.type === 'text') {
43 | if (options.field && item[options.field]) {
44 | if (options.textType === 'barcode') {
45 | reactDom = barcodeReactDom(options, item);
46 | } else if (options.textType === 'qrcode') {
47 | reactDom = qrcodeReactDom(options, item);
48 | } else {
49 | reactDom = textReactDom(options, item);
50 | }
51 | }
52 | } else if (printElementType.type === 'tableCustom') {
53 | reactDom = tableReactDom(options, item);
54 | }
55 |
56 | childDom.push(reactDom);
57 | });
58 |
59 | const outerContentDom = React.createElement('div', {
60 | className: 'hiprint-printPaper-content',
61 | style: {
62 | top: (topOffset || 0) + 'pt',
63 | left: (leftOffset || 0) + 'pt',
64 | },
65 | }, childDom);
66 |
67 | const styleDom = React.createElement('style', {
68 | printstyle: 'true'
69 | }, '@page{border:0;padding:0cm;magin:0cm;' + getPrintStyle(paperType, height, width, orient) + '}');
70 |
71 | const outerPageDom = React.createElement('div', {
72 | className: 'hiprint-printPaper',
73 | // originalHeight: '150',
74 | style: {
75 | width: width + 'mm',
76 | height: (height - paperHeightTrim) + 'mm',
77 | },
78 | }, outerContentDom);
79 |
80 | const outerPanelDom = React.createElement('div', {
81 | className: 'hiprint-printPanel panel-index-0',
82 | }, [styleDom, outerPageDom]);
83 |
84 | panelDomArr.push(outerPanelDom);
85 | });
86 |
87 | const templateDom = React.createElement('div', {
88 | className: 'hiprint-printTemplate',
89 | }, panelDomArr);
90 |
91 |
92 | return templateDom;
93 | };
94 |
95 | export default reactDomFactory;
--------------------------------------------------------------------------------
/plugins/js/jquery.hiwprint.js:
--------------------------------------------------------------------------------
1 | import hiprintCss from '../js/hiprintCss';
2 | import printLockCss from '../js/printLockCss';
3 |
4 | export default function hiwprint($) {
5 | $.fn.hiwprint = function (options) {
6 | var usedFrame = document.getElementById('hiwprint_iframe');
7 | if (usedFrame) usedFrame.parentNode.removeChild(usedFrame);
8 | var opt = $.extend({}, $.fn.hiwprint.defaults, options);
9 | var $element = this;
10 | var $iframe = $('');
11 | var css = '';
12 | // if (opt.importCss) {
13 | // if ($("link[media=print]").length > 0) {
14 | // $("link[media=print]").each(function () {
15 | // css += '';
16 | // });
17 | // }
18 | // else {
19 | // $("link").each(function () {
20 | // css += '';
21 | // });
22 | // }
23 | // }
24 | css += '';
25 | css += '';
26 |
27 | $iframe[0].srcdoc = '' + css + '';
28 |
29 | $iframe[0].onload = function () {
30 | var printDocument = $iframe[0].contentWindow || $iframe[0].contentDocument;
31 | if (printDocument.document) printDocument = printDocument.document;
32 | if (!$iframe.attr('srcdoc')) {
33 | printDocument.write('' + css + '');
34 | }
35 | if (opt.printContainer) {
36 | printDocument.body.innerHTML = $element[0].outerHTML;
37 | }
38 | else {
39 | printDocument.body.innerHTML = $element.html();
40 | }
41 | loadAllImages(printDocument, function () {
42 |
43 | performPrint($iframe[0]);
44 | });
45 |
46 | };
47 |
48 | $iframe.appendTo("body");
49 |
50 | };
51 |
52 | $.fn.hiwprint.defaults = {
53 | importCss: true,
54 | printContainer: true
55 | };
56 |
57 | function performPrint(iframeElement) {
58 | try {
59 | iframeElement.focus();
60 | if (isEdge() || isIE()) {
61 | try {
62 | iframeElement.contentWindow.document.execCommand('print', false, null);
63 | } catch (e) {
64 | iframeElement.contentWindow.print();
65 | }
66 | } else {
67 | // Other browsers
68 | iframeElement.contentWindow.print();
69 | }
70 | } catch (error) {
71 | console.log(error);
72 | }
73 | }
74 |
75 |
76 | function isIE() {
77 | return navigator.userAgent.indexOf('MSIE') !== -1 || !!document.documentMode;
78 | }
79 |
80 | // Edge 20+
81 | function isEdge() {
82 | return !isIE() && !!window.StyleMedia;
83 | }
84 |
85 |
86 |
87 | function loadAllImages(printDocument, callback, time) {
88 |
89 | if (time === undefined) {
90 | time = 0;
91 | }
92 | var images = printDocument.getElementsByTagName('img');
93 | var allLoaded = true;
94 | for (var i = 0; i < images.length; i++) {
95 | var image = images[i];
96 | if (image.src && image.src !== window.location.href && image.src.indexOf('base64') == -1) {
97 |
98 | if (!image || typeof image.naturalWidth === 'undefined' || image.naturalWidth === 0 || !image.complete) {
99 | console.log(image.complete);
100 | if (!image.complete) {
101 | allLoaded = false;
102 | }
103 |
104 | }
105 | }
106 | }
107 | time++;
108 | if (!allLoaded && time < 10) {
109 |
110 | setTimeout(function () {
111 | loadAllImages(printDocument, callback, time);
112 | }, 500);
113 | } else {
114 | callback();
115 | }
116 | }
117 |
118 |
119 | };
--------------------------------------------------------------------------------
/plugins/js/printLockCss.js:
--------------------------------------------------------------------------------
1 | var printLockCss = `
2 |
3 | @media print {
4 | body {
5 | margin: 0px;
6 | padding: 0px;
7 | }
8 | }
9 |
10 | @page {
11 | margin: 0;
12 | }
13 |
14 | .hiprint-printPaper * {
15 | box-sizing: border-box;
16 | -moz-box-sizing: border-box; /* Firefox */
17 | -webkit-box-sizing: border-box; /* Safari */
18 |
19 | }
20 |
21 | .hiprint-printPaper *:focus {
22 | outline: -webkit-focus-ring-color auto 0px;
23 | }
24 |
25 |
26 | .hiprint-page-break-avoid {
27 | page-break-after: avoid;
28 | }
29 | .hiprint-printPaper {
30 | position: relative;
31 | padding: 0 0 0 0;
32 | page-break-after: always;
33 | overflow-x: hidden;
34 | overflow: hidden;
35 | }
36 | .hiprint-printPaper .hiprint-printPaper-content {
37 | position: relative;
38 | }
39 | .hiprint-printPaper.design {
40 | overflow: visible;
41 | }
42 |
43 |
44 |
45 | .hiprint-printTemplate .hiprint-printPanel {
46 | page-break-after: always;
47 | }
48 |
49 | .hiprint-printPaper, hiprint-printPanel {
50 | box-sizing: border-box;
51 | border: 0px;
52 | }
53 |
54 | .hiprint-printPanel .hiprint-printPaper:last-child {
55 | page-break-after: avoid;
56 | }
57 |
58 | .hiprint-printTemplate .hiprint-printPanel:last-child {
59 | page-break-after: avoid;
60 | }
61 |
62 | .hiprint-printPaper .hideheaderLinetarget {
63 | border-top: 0px dashed rgb(201, 190, 190) !important;
64 | }
65 |
66 | .hiprint-printPaper .hidefooterLinetarget {
67 | border-top: 0px dashed rgb(201, 190, 190) !important;
68 | }
69 |
70 | .hiprint-printPaper.design {
71 | border: 1px dashed rgba(170,170,170,0.7);
72 | }
73 |
74 | .design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
75 | overflow: hidden;
76 | box-sizing: border-box;
77 | }
78 |
79 | .design .resize-panel {
80 | box-sizing: border-box;
81 | border: 1px dotted;
82 | }
83 |
84 | .hiprint-printElement-text {
85 | background-color: transparent;
86 | background-repeat: repeat;
87 | padding: 0 0 0 0;
88 | border: 0.75pt none rgb(0,0,0);
89 | direction: ltr;
90 | font-family: 'SimSun';
91 | font-size: 9pt;
92 | font-style: normal;
93 | font-weight: normal;
94 | padding-bottom: 0pt;
95 | padding-left: 0pt;
96 | padding-right: 0pt;
97 | padding-top: 0pt;
98 | text-align: left;
99 | text-decoration: none;
100 | line-height: 9.75pt;
101 | box-sizing: border-box;
102 | word-wrap: break-word;
103 | word-break: break-all;
104 | }
105 |
106 | .design .hiprint-printElement-text-content {
107 | border: 1px dashed rgb(206, 188, 188);
108 | box-sizing: border-box;
109 | }
110 |
111 | .hiprint-printElement-longText {
112 | background-color: transparent;
113 | background-repeat: repeat;
114 | border: 0.75pt none rgb(0,0,0);
115 | direction: ltr;
116 | font-family: 'SimSun';
117 | font-size: 9pt;
118 | font-style: normal;
119 | font-weight: normal;
120 | padding-bottom: 0pt;
121 | padding-left: 0pt;
122 | padding-right: 0pt;
123 | padding-top: 0pt;
124 | text-align: left;
125 | text-decoration: none;
126 | line-height: 9.75pt;
127 | box-sizing: border-box;
128 | word-wrap: break-word;
129 | word-break: break-all;
130 | /*white-space: pre-wrap*/
131 | }
132 |
133 |
134 |
135 | .hiprint-printElement-table {
136 | background-color: transparent;
137 | background-repeat: repeat;
138 | color: rgb(0,0,0);
139 | border-color: rgb(0,0,0);
140 | border-style: none;
141 | direction: ltr;
142 | font-family: 'SimSun';
143 | font-size: 9pt;
144 | font-style: normal;
145 | font-weight: normal;
146 | padding-bottom: 0pt;
147 | padding-left: 0pt;
148 | padding-right: 0pt;
149 | padding-top: 0pt;
150 | text-align: left;
151 | text-decoration: none;
152 | padding: 0 0 0 0;
153 | box-sizing: border-box;
154 | line-height: 9.75pt;
155 | }
156 |
157 | .hiprint-printElement-table thead {
158 | background: #e8e8e8;
159 | font-weight: 700;
160 | }
161 |
162 | .hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
163 | border-color: rgb(0,0,0);
164 | border-style: none;
165 | border: 1px solid rgb(0,0,0);
166 | font-weight: normal;
167 | direction: ltr;
168 | padding-bottom: 0pt;
169 | padding-left: 0pt;
170 | padding-right: 0pt;
171 | padding-top: 0pt;
172 | text-decoration: none;
173 | vertical-align: middle;
174 | box-sizing: border-box;
175 | word-wrap: break-word;
176 | word-break: break-all;
177 | /*line-height: 9.75pt;
178 | font-size: 9pt;*/
179 | }
180 |
181 | /*.hiprint-printElement-tableTarget tr,*/
182 | .hiprint-printElement-tableTarget td {
183 | height: 18pt;
184 | }
185 |
186 | .hiprint-printPaper .hiprint-paperNumber {
187 | font-size: 9pt;
188 | }
189 |
190 | .design .hiprint-printElement-table-handle {
191 | position: absolute;
192 | height: 21pt;
193 | width: 21pt;
194 | background: red;
195 | z-index:1;
196 | }
197 |
198 | .hiprint-printPaper .hiprint-paperNumber-disabled {
199 | float: right !important;
200 | right: 0 !important;
201 | color: gainsboro !important;
202 | }
203 |
204 | .hiprint-printElement-vline, .hiprint-printElement-hline {
205 | border: 0px none rgb(0,0,0);
206 |
207 | }
208 | .hiprint-printElement-vline {
209 | border-left: 0.75pt solid #000;
210 | border-right: 0px none rgb(0,0,0) !important;
211 | border-bottom: 0px none rgb(0,0,0) !important;
212 | border-top: 0px none rgb(0,0,0) !important;
213 | }
214 |
215 | .hiprint-printElement-hline {
216 | border-top: 0.75pt solid #000;
217 | border-right: 0px none rgb(0,0,0) !important;
218 | border-bottom: 0px none rgb(0,0,0) !important;
219 | border-left: 0px none rgb(0,0,0) !important;
220 | }
221 |
222 | .hiprint-printElement-oval, .hiprint-printElement-rect {
223 | border: 0.75pt solid #000;
224 | }
225 |
226 | .hiprint-text-content-middle {
227 | display:table;
228 | }
229 | .hiprint-text-content-middle>div {
230 | display: table-cell;
231 | vertical-align:middle
232 | }
233 |
234 | .hiprint-text-content-bottom {
235 | display: table;
236 | }
237 |
238 | .hiprint-text-content-bottom > div {
239 | display: table-cell;
240 | vertical-align: bottom
241 | }
242 |
243 | /*hi-grid-row */
244 | .hi-grid-row {
245 | position: relative;
246 | height: auto;
247 | margin-right: 0;
248 | margin-left: 0;
249 | zoom: 1;
250 | display: block;
251 | box-sizing: border-box;
252 | }
253 |
254 | .hi-grid-row::after, .hi-grid-row::before {
255 | display: table;
256 | content: '';
257 | box-sizing: border-box;
258 | }
259 |
260 | .hi-grid-col {
261 | display: block;
262 | box-sizing: border-box;
263 | position: relative;
264 | float: left;
265 | flex: 0 0 auto;
266 | }
267 |
268 | .table-grid-row {
269 | margin-left: -0pt;
270 | margin-right: -0pt;
271 | }
272 |
273 | .tableGridColumnsGutterRow {
274 | padding-left: 0pt;
275 | padding-right: 0pt;
276 | }
277 | .hiprint-gridColumnsFooter {
278 | text-align: left;
279 | clear: both;
280 | }
281 | `;
282 |
283 | export default printLockCss;
--------------------------------------------------------------------------------
/plugins/css/print-lock.css:
--------------------------------------------------------------------------------
1 |
2 | @media print {
3 | body {
4 | margin: 0px;
5 | padding: 0px;
6 | }
7 | }
8 |
9 | @page {
10 | margin: 0;
11 | }
12 |
13 | .hiprint-printPaper * {
14 | box-sizing: border-box;
15 | -moz-box-sizing: border-box; /* Firefox */
16 | -webkit-box-sizing: border-box; /* Safari */
17 |
18 | }
19 |
20 | .hiprint-printPaper *:focus {
21 | outline: -webkit-focus-ring-color auto 0px;
22 | }
23 |
24 |
25 | .hiprint-page-break-avoid {
26 | page-break-after: avoid;
27 | }
28 | .hiprint-printPaper {
29 | position: relative;
30 | padding: 0 0 0 0;
31 | page-break-after: always;
32 | overflow-x: hidden;
33 | overflow: hidden;
34 | }
35 | .hiprint-printPaper .hiprint-printPaper-content {
36 | position: relative;
37 | }
38 | .hiprint-printPaper.design {
39 | overflow: visible;
40 | }
41 |
42 |
43 |
44 | .hiprint-printTemplate .hiprint-printPanel {
45 | page-break-after: always;
46 | }
47 |
48 | .hiprint-printPaper, hiprint-printPanel {
49 | box-sizing: border-box;
50 | border: 0px;
51 | }
52 |
53 | .hiprint-printPanel .hiprint-printPaper:last-child {
54 | page-break-after: avoid;
55 | }
56 |
57 | .hiprint-printTemplate .hiprint-printPanel:last-child {
58 | page-break-after: avoid;
59 | }
60 |
61 | .hiprint-printPaper .hideheaderLinetarget {
62 | border-top: 0px dashed rgb(201, 190, 190) !important;
63 | }
64 |
65 | .hiprint-printPaper .hidefooterLinetarget {
66 | border-top: 0px dashed rgb(201, 190, 190) !important;
67 | }
68 |
69 | .hiprint-printPaper.design {
70 | border: 1px dashed rgba(170,170,170,0.7);
71 | }
72 |
73 | .design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
74 | overflow: hidden;
75 | box-sizing: border-box;
76 | }
77 |
78 | .design .resize-panel {
79 | box-sizing: border-box;
80 | border: 1px dotted;
81 | }
82 |
83 | .hiprint-printElement-text {
84 | background-color: transparent;
85 | background-repeat: repeat;
86 | padding: 0 0 0 0;
87 | border: 0.75pt none rgb(0,0,0);
88 | direction: ltr;
89 | font-family: 'SimSun';
90 | font-size: 9pt;
91 | font-style: normal;
92 | font-weight: normal;
93 | padding-bottom: 0pt;
94 | padding-left: 0pt;
95 | padding-right: 0pt;
96 | padding-top: 0pt;
97 | text-align: left;
98 | text-decoration: none;
99 | line-height: 9.75pt;
100 | box-sizing: border-box;
101 | word-wrap: break-word;
102 | word-break: break-all;
103 | }
104 |
105 | .design .hiprint-printElement-text-content {
106 | border: 1px dashed rgb(206, 188, 188);
107 | box-sizing: border-box;
108 | }
109 |
110 | .hiprint-printElement-longText {
111 | background-color: transparent;
112 | background-repeat: repeat;
113 | border: 0.75pt none rgb(0,0,0);
114 | direction: ltr;
115 | font-family: 'SimSun';
116 | font-size: 9pt;
117 | font-style: normal;
118 | font-weight: normal;
119 | padding-bottom: 0pt;
120 | padding-left: 0pt;
121 | padding-right: 0pt;
122 | padding-top: 0pt;
123 | text-align: left;
124 | text-decoration: none;
125 | line-height: 9.75pt;
126 | box-sizing: border-box;
127 | word-wrap: break-word;
128 | word-break: break-all;
129 | /*white-space: pre-wrap*/
130 | }
131 |
132 |
133 |
134 | .hiprint-printElement-table {
135 | background-color: transparent;
136 | background-repeat: repeat;
137 | color: rgb(0,0,0);
138 | border-color: rgb(0,0,0);
139 | border-style: none;
140 | direction: ltr;
141 | font-family: 'SimSun';
142 | font-size: 9pt;
143 | font-style: normal;
144 | font-weight: normal;
145 | padding-bottom: 0pt;
146 | padding-left: 0pt;
147 | padding-right: 0pt;
148 | padding-top: 0pt;
149 | text-align: left;
150 | text-decoration: none;
151 | padding: 0 0 0 0;
152 | box-sizing: border-box;
153 | line-height: 9.75pt;
154 | }
155 |
156 | .hiprint-printElement-table thead {
157 | background: #e8e8e8;
158 | font-weight: 700;
159 | }
160 |
161 | .hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
162 | border-color: rgb(0,0,0);
163 | border-style: none;
164 | border: 1px solid rgb(0,0,0);
165 | font-weight: normal;
166 | direction: ltr;
167 | padding-bottom: 0pt;
168 | padding-left: 0pt;
169 | padding-right: 0pt;
170 | padding-top: 0pt;
171 | text-decoration: none;
172 | vertical-align: middle;
173 | box-sizing: border-box;
174 | word-wrap: break-word;
175 | word-break: break-all;
176 | /*line-height: 9.75pt;
177 | font-size: 9pt;*/
178 | }
179 |
180 | /*.hiprint-printElement-tableTarget tr,*/
181 | .hiprint-printElement-tableTarget td {
182 | height: 18pt;
183 | }
184 |
185 | .hiprint-printPaper .hiprint-paperNumber {
186 | font-size: 9pt;
187 | }
188 |
189 | .design .hiprint-printElement-table-handle {
190 | position: absolute;
191 | height: 21pt;
192 | width: 21pt;
193 | background: red;
194 | z-index:1;
195 | }
196 |
197 | .hiprint-printPaper .hiprint-paperNumber-disabled {
198 | float: right !important;
199 | right: 0 !important;
200 | color: gainsboro !important;
201 | }
202 |
203 | .hiprint-printElement-vline, .hiprint-printElement-hline {
204 | border: 0px none rgb(0,0,0);
205 |
206 | }
207 | .hiprint-printElement-vline {
208 | border-left: 0.75pt solid #000;
209 | border-right: 0px none rgb(0,0,0) !important;
210 | border-bottom: 0px none rgb(0,0,0) !important;
211 | border-top: 0px none rgb(0,0,0) !important;
212 | }
213 |
214 | .hiprint-printElement-hline {
215 | border-top: 0.75pt solid #000;
216 | border-right: 0px none rgb(0,0,0) !important;
217 | border-bottom: 0px none rgb(0,0,0) !important;
218 | border-left: 0px none rgb(0,0,0) !important;
219 | }
220 |
221 | .hiprint-printElement-oval, .hiprint-printElement-rect {
222 | border: 0.75pt solid #000;
223 | }
224 |
225 | .hiprint-text-content-middle {
226 | display:table;
227 | }
228 | .hiprint-text-content-middle>div {
229 | display: table-cell;
230 | vertical-align:middle
231 | }
232 |
233 | .hiprint-text-content-bottom {
234 | display: table;
235 | }
236 |
237 | .hiprint-text-content-bottom > div {
238 | display: table-cell;
239 | vertical-align: bottom
240 | }
241 |
242 | /*hi-grid-row */
243 | .hi-grid-row {
244 | position: relative;
245 | height: auto;
246 | margin-right: 0;
247 | margin-left: 0;
248 | zoom: 1;
249 | display: block;
250 | box-sizing: border-box;
251 | }
252 |
253 | .hi-grid-row::after, .hi-grid-row::before {
254 | display: table;
255 | content: '';
256 | box-sizing: border-box;
257 | }
258 |
259 | .hi-grid-col {
260 | display: block;
261 | box-sizing: border-box;
262 | position: relative;
263 | float: left;
264 | flex: 0 0 auto;
265 | }
266 |
267 | .table-grid-row {
268 | margin-left: -0pt;
269 | margin-right: -0pt;
270 | }
271 |
272 | .tableGridColumnsGutterRow {
273 | padding-left: 0pt;
274 | padding-right: 0pt;
275 | }
276 | .hiprint-gridColumnsFooter {
277 | text-align: left;
278 | clear: both;
279 | }
--------------------------------------------------------------------------------
/example/reatc-demo/Print/panel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * panel 数据是打印所需的面板配置JSON对象
3 | *
4 | * 获取路径：hiprint官网，http://hiprint.io 中的配置页上进行模板编写之后可以直接获取
5 | */
6 | const orderPanel = {
7 | "panels": [{
8 | "index": 0,
9 | "height": 105,
10 | "width": 76,
11 | "leftOffset": 5,
12 | "paperHeader": 0,
13 | "paperFooter": 297.6377952755906,
14 | "paperNumberDisabled": true,
15 | "printElements": [{
16 | "options": {
17 | "left": 10.5,
18 | "top": 54,
19 | "height": 156,
20 | "width": 197
21 | },
22 | "printElementType": {
23 | "type": "rect"
24 | }
25 | }, {
26 | "options": {
27 | "left": 178.5,
28 | "top": 55,
29 | "height": 43.5,
30 | "width": 28.5,
31 | "field": "service_type",
32 | "testData": "极干",
33 | "fontSize": 12,
34 | "fontWeight": "bold",
35 | "textAlign": "center",
36 | "hideTitle": true,
37 | "fontFamily": "黑体",
38 | // "fontFamily": "Microsoft YaHei",
39 | "textContentVerticalAlign": "middle"
40 | },
41 | "printElementType": {
42 | "type": "text"
43 | }
44 | }, {
45 | "options": {
46 | "left": 178.5,
47 | "top": 54,
48 | "height": 43.5,
49 | "width": 9
50 | },
51 | "printElementType": {
52 | "type": "vline"
53 | }
54 | }, {
55 | "options": {
56 | "left": 10.5,
57 | "top": 54,
58 | "height": 15,
59 | // "width": 75,
60 | // "width": 64,
61 | "width": 190,
62 | "field": "customer_name",
63 | "testData": "博世电动工具（中国）有限公司",
64 | "fontSize": 6,
65 | "hideTitle": true,
66 | // "fontFamily": "黑体",
67 | // "letterSpacing": -1,
68 | "letterSpacing": -0.5,
69 | "fontFamily": "Microsoft YaHei",
70 | "textContentVerticalAlign": "middle"
71 | },
72 | "printElementType": {
73 | "type": "text"
74 | }
75 | }, {
76 | "options": {
77 | "left": 10.5,
78 | "top": 69,
79 | "height": 9,
80 | "width": 168
81 | },
82 | "printElementType": {
83 | "type": "hline"
84 | }
85 | }, {
86 | "options": {
87 | "left": 10.5,
88 | "top": 69,
89 | "height": 13.5,
90 | // "width": 168,
91 | "width": 190,
92 | "field": "project",
93 | "testData": "博世电动工具运输项目/P000014",
94 | "hideTitle": true,
95 | "fontFamily": "黑体",
96 | "letterSpacing": -1,
97 | // "letterSpacing": -0.5,
98 | // "fontFamily": "Microsoft YaHei",
99 | "textContentVerticalAlign": "middle",
100 | "fontSize": 6,
101 | },
102 | "printElementType": {
103 | "type": "text"
104 | }
105 | }, {
106 | "options": {
107 | "left": 10.5,
108 | "top": 82.5,
109 | "height": 15,
110 | "width": 168,
111 | "field": "station",
112 | "testData": "博世电动工具运输项目/P000014",
113 | "hideTitle": true,
114 | "fontFamily": "Microsoft YaHei",
115 | "textContentVerticalAlign": "middle"
116 | },
117 | "printElementType": {
118 | "type": "text"
119 | }
120 | }, {
121 | "options": {
122 | "left": 22.5,
123 | "top": 97.5,
124 | "height": 19.5,
125 | "width": 183,
126 | "field": "start_station_name",
127 | "testData": "博世顺丰仓-福州-591DCD",
128 | "fontWeight": "bold",
129 | "hideTitle": true,
130 | "fontFamily": "Microsoft YaHei",
131 | "textContentVerticalAlign": "middle"
132 | },
133 | "printElementType": {
134 | "type": "text"
135 | }
136 | }, {
137 | "options": {
138 | "left": 10.5,
139 | "top": 97.5,
140 | "height": 9,
141 | "width": 196.5
142 | },
143 | "printElementType": {
144 | "type": "hline"
145 | }
146 | }, {
147 | "options": {
148 | "left": 21,
149 | "top": 97.5,
150 | "height": 112,
151 | "width": 9
152 | },
153 | "printElementType": {
154 | "type": "vline"
155 | }
156 | }, {
157 | "options": {
158 | "left": 10.5,
159 | "top": 97.5,
160 | "height": 57,
161 | "width": 12,
162 | "field": "start_station",
163 | "testData": "起运地",
164 | "textAlign": "center",
165 | "hideTitle": true,
166 | "fontFamily": "Microsoft YaHei",
167 | "textContentVerticalAlign": "middle"
168 | },
169 | "printElementType": {
170 | "type": "text"
171 | }
172 | }, {
173 | "options": {
174 | "left": 21,
175 | "top": 115.5,
176 | "height": 39,
177 | "width": 183,
178 | "field": "start_station_address",
179 | "testData": "福建省福州市闽侯县荆溪镇溪下村万全物流园",
180 | "hideTitle": true,
181 | "fontFamily": "Microsoft YaHei",
182 | "textContentVerticalAlign": "middle"
183 | },
184 | "printElementType": {
185 | "type": "text"
186 | }
187 | }, {
188 | "options": {
189 | "left": 21,
190 | "top": 154.5,
191 | "height": 19.5,
192 | "width": 183,
193 | "field": "end_station_name",
194 | "testData": "SF1386019728420191125001-顺丰仓91125001顺丰仓91125001顺丰仓91125001",
195 | "hideTitle": true,
196 | "fontWeight": "bold",
197 | "fontFamily": "Microsoft YaHei",
198 | },
199 | "printElementType": {
200 | "type": "text"
201 | }
202 | }, {
203 | "options": {
204 | "left": 10.5,
205 | "top": 154.5,
206 | "height": 55.5,
207 | "width": 10.5,
208 | "field": "end_station",
209 | "testData": "目的地",
210 | "hideTitle": true,
211 | "fontFamily": "Microsoft YaHei",
212 | "textContentVerticalAlign": "middle"
213 | },
214 | "printElementType": {
215 | "type": "text"
216 | }
217 | }, {
218 | "options": {
219 | "left": 10.5,
220 | "top": 154.5,
221 | "height": 9,
222 | "width": 196.5
223 | },
224 | "printElementType": {
225 | "type": "hline"
226 | }
227 | }, {
228 | "options": {
229 | "left": 21,
230 | "top": 174,
231 | "height": 36,
232 | "width": 183,
233 | "field": "end_station_address",
234 | "testData": "福建厦门市集美区杏林白泉街1号之8-9店面（建昌大）",
235 | "hideTitle": true,
236 | "fontFamily": "Microsoft YaHei",
237 | "textContentVerticalAlign": "middle"
238 | },
239 | "printElementType": {
240 | "type": "text"
241 | }
242 | }, {
243 | "options": {
244 | "left": 10.5,
245 | "top": 211.5,
246 | "height": 12,
247 | "width": 174,
248 | "field": "order_id",
249 | "testData": "订单ID:51995314782232",
250 | "hideTitle": true,
251 | "textAlign": "center",
252 | "fontFamily": "Microsoft YaHei",
253 | },
254 | "printElementType": {
255 | "type": "longText"
256 | }
257 | }, {
258 | "options": {
259 | "left": 10.5,
260 | "top": 222,
261 | "height": 12,
262 | "width": 174,
263 | "field": "box_type",
264 | "testData": "整箱: 无 散箱: 1/1",
265 | "hideTitle": true,
266 | "textAlign": "center",
267 | "fontFamily": "Microsoft YaHei",
268 | },
269 | "printElementType": {
270 | "type": "longText"
271 | }
272 | }, {
273 | "options": {
274 | "left": 10.5,
275 | "top": 234,
276 | "height": 33,
277 | "width": 196.5,
278 | "field": "barcode",
279 | "testData": "51995314782232-0001",
280 | "hideTitle": true,
281 | "textAlign": "center",
282 | "textType": "barcode",
283 | "fontFamily": "Microsoft YaHei",
284 | },
285 | "printElementType": {
286 | "type": "text"
287 | }
288 | }, {
289 | "options": {
290 | "left": 10.5,
291 | "top": 277.5,
292 | "height": 19.5,
293 | "width": 196.5,
294 | "field": "remark",
295 | "testData": "提示：启运地、目的地中站点编码与站点名称共占一行，多出字段换行展示，为保证不与地址信息重合，请尽量确保两者字段和小于15。",
296 | "fontSize": 6,
297 | "hideTitle": true,
298 | "fontFamily": "Microsoft YaHei",
299 | },
300 | "printElementType": {
301 | "type": "text"
302 | }
303 | }, {
304 | "options": {
305 | "left": 184.5,
306 | "top": 210,
307 | "height": 22.5,
308 | "width": 22.5
309 | },
310 | "printElementType": {
311 | "type": "oval"
312 | }
313 | // "options": {
314 | // "left": 184.5,
315 | // "top": 211.5,
316 | // "height": 22.5,
317 | // "width": 22.5,
318 | // "field": "cod",
319 | // // "src": "/static/cod.jpg"
320 | // },
321 | // "printElementType": {
322 | // "type": "image"
323 | // }
324 | }, {
325 | "options": {
326 | "left": 187.5,
327 | "top": 216,
328 | "height": 12,
329 | "width": 16.5,
330 | "field": "is_scatter",
331 | "testData": "散",
332 | "textAlign": "center",
333 | "textContentVerticalAlign": "middle",
334 | "hideTitle": true,
335 | "fontFamily": "Microsoft YaHei",
336 | },
337 | "printElementType": {
338 | "type": "text"
339 | }
340 | }, {
341 | "options": {
342 | "left": 10.5,
343 | "top": 297.5,
344 | "height": 33,
345 | "width": 33,
346 | "field": "qrcode",
347 | "testData": "51995314782232-0001",
348 | "hideTitle": true,
349 | "textAlign": "center",
350 | "textType": "qrcode",
351 | "fontFamily": "Microsoft YaHei",
352 | },
353 | "printElementType": {
354 | "type": "text"
355 | }
356 | }, {
357 | "printElementType": {
358 | "title": "表格",
359 | "type": "tableCustom"
360 | },
361 | }],
362 | }]
363 | };
364 |
365 | export default orderPanel;
--------------------------------------------------------------------------------
/plugins/js/hiprintCss.js:
--------------------------------------------------------------------------------
1 | var hiprintCss = `
2 |
3 | /* hiprint-pagination */
4 | .hiprint-pagination {
5 | display: inline-block;
6 | padding-left: 0;
7 | }
8 | .hiprint-pagination > li {
9 | border: 1px solid #bdc3c7;
10 | -moz-border-radius: 2px;
11 | -webkit-border-radius: 2px;
12 | display: block;
13 | float: left;
14 | padding: 5px;
15 | text-decoration: none;
16 | margin-right: 5px;
17 | margin-bottom: 5px;
18 | font-family: helvetica;
19 | font-size: 13px;
20 | cursor: pointer
21 | }
22 |
23 | .hiprint-pagination > li > span {
24 | padding: 0 10px 0 10px;
25 | }
26 |
27 | .hiprint-pagination > li > a {
28 | color: #bdc3c7;
29 | font-weight: bold;
30 | text-decoration: none;
31 | font-size: 11px;
32 | padding: 3px;
33 | }
34 |
35 | .hiprint-pagination > li > a:hover {
36 | color: red;
37 | }
38 |
39 |
40 |
41 | .hiprint-pagination-sm > li > a {
42 | padding: 5px 10px;
43 | font-size: 12px;
44 | line-height: 1.5;
45 | }
46 | /*rect-printElement-type hiprint-printElement-type */
47 | .rect-printElement-types .hiprint-printElement-type {
48 | display: block;
49 | }
50 |
51 | .rect-printElement-types .hiprint-printElement-type {
52 | padding: 0 0 0 0;
53 | list-style: none;
54 | }
55 |
56 | .rect-printElement-types .hiprint-printElement-type > li > .title {
57 | display: block;
58 | padding: 4px 0px;
59 | clear: both;
60 | }
61 |
62 | .rect-printElement-types .hiprint-printElement-type > li > ul {
63 | padding: 0 0 0 0;
64 | display: block;
65 | list-style: none;
66 | }
67 |
68 | .rect-printElement-types .hiprint-printElement-type > li > ul > li {
69 | display: block;
70 | width: 50%;
71 | float: left;
72 | max-width: 100px;
73 | }
74 |
75 | .rect-printElement-types .hiprint-printElement-type > li > ul > li > a {
76 | height: 92px;
77 | padding: 12px 6px;
78 | margin-left: -1px;
79 | line-height: 1.42857143;
80 | color: #337ab7;
81 | text-decoration: none;
82 | background-color: #fff;
83 | border: 1px solid #ddd;
84 | margin-right: 5px;
85 | width: 95%;
86 | max-width: 100px;
87 | display: inline-block;
88 | text-align: center;
89 | margin-bottom: 7px;
90 | box-sizing: border-box;
91 | color: #b9a5a6;
92 | border: 1px solid rgba(0,0,0,0.2);
93 | border-radius: 3px;
94 | box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
95 | }
96 |
97 |
98 | /*small-printElement-type hiprint-printElement-type */
99 | .small-printElement-types .hiprint-printElement-type {
100 | display: block;
101 | }
102 |
103 | .small-printElement-types .hiprint-printElement-type {
104 | padding: 0 0 0 0;
105 | list-style: none;
106 | }
107 |
108 | .small-printElement-types .hiprint-printElement-type > li > .title {
109 | display: block;
110 | padding: 4px 0px;
111 | clear: both;
112 | }
113 |
114 | .small-printElement-types .hiprint-printElement-type > li > ul {
115 | padding: 0 0 0 0;
116 | display: block;
117 | list-style: none;
118 | width: 100%;
119 | }
120 |
121 | .small-printElement-types .hiprint-printElement-type > li > ul > li {
122 | display: block;
123 | width: 50%;
124 | float: left;
125 | padding: 0 4px;
126 | }
127 |
128 | .small-printElement-types .hiprint-printElement-type > li > ul > li > a {
129 | height: 22px;
130 | /* padding: 12px 6px; */
131 | /* margin-left: -1px; */
132 | line-height: 20px;
133 | color: #337ab7;
134 | text-decoration: none;
135 | background-color: #fff;
136 | border: 1px solid #ddd;
137 | margin-right: 5px;
138 | width: 100%;
139 | display: block;
140 | text-align: center;
141 | margin-bottom: 7px;
142 | box-sizing: border-box;
143 | color: #b9a5a6;
144 | border: 1px solid rgba(0,0,0,0.2);
145 | border-radius: 3px;
146 | box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
147 | }
148 |
149 |
150 | /* hiprint-toolbar*/
151 |
152 | .hiprint-toolbar {
153 | }
154 |
155 | .hiprint-toolbar > ul {
156 | padding: 0px;
157 | margin-bottom: 5px;
158 | }
159 |
160 | .hiprint-toolbar > ul > li {
161 | display: inline-block;
162 | }
163 |
164 | .hiprint-toolbar > ul > li > a {
165 | position: relative;
166 | float: left;
167 | padding: 3px 10px;
168 | margin-left: -1px;
169 | line-height: 1.42857143;
170 | color: #337ab7;
171 | text-decoration: none;
172 | background-color: #fff;
173 | border: 1px solid #ddd;
174 | margin-right: 4px;
175 | cursor: pointer;
176 | }
177 |
178 |
179 | .hiprint-printElement-type .glyphicon-class {
180 | display: block;
181 | text-align: center;
182 | word-wrap: break-word;
183 | /*font-size: 0.65rem;
184 | font-weight: normal;*/
185 | font-family: Helvetica, sans-serif;
186 | }
187 |
188 | .hiprint-printElement-type .glyphicon {
189 | margin-top: 5px;
190 | margin-bottom: 10px;
191 | font-size: 37px;
192 | }
193 |
194 |
195 | /*
196 |
197 |
198 | */
199 |
200 | /*option css*/
201 | /*option css*/
202 | .hiprint-option-items {
203 | font-size: .75rem;
204 | padding: 10px 5px;
205 | display: flex;
206 | flex-wrap: wrap;
207 | align-items: flex-end;
208 | box-sizing: border-box;
209 | width: 100%;
210 | }
211 |
212 | .hiprint-option-items .hiprint-option-item {
213 | box-sizing: border-box;
214 | float: left;
215 | width: 50%;
216 | margin-bottom: 5px;
217 | padding: 0 5px;
218 | }
219 |
220 | .hiprint-option-items .hiprint-option-item-row {
221 | width: 100%;
222 | }
223 |
224 | .hiprint-option-item-label {
225 | margin: 5px 5px 3px 0;
226 | }
227 |
228 | .hiprint-option-items .hiprint-option-item-field input, .hiprint-option-items .hiprint-option-item-field select, .hiprint-option-items .hiprint-option-item-field textarea {
229 | color: inherit;
230 | background-color: transparent;
231 | box-sizing: border-box;
232 | width: 100%;
233 | position: relative;
234 | padding: 3px;
235 | z-index: 1;
236 | border: 1px solid rgb(169, 169, 169);
237 | height: 19pt;
238 | }
239 |
240 | .hiprint-option-item-settingBtn {
241 | height: 19pt;
242 | line-height: 19pt;
243 | font-size: 12px;
244 | padding: 0 24px;
245 | background: #00c1de;
246 | border-color: transparent;
247 | color: #fff;
248 | display: inline-block;
249 | margin: 5px;
250 | font-weight: 400;
251 | border: 1px solid transparent;
252 | font-family: PingFangSC, helvetica neue, hiragino sans gb, arial, microsoft yahei ui, microsoft yahei, simsun, "sans-serif";
253 | vertical-align: middle;
254 | transition: .3s cubic-bezier(.4, 0, .2, 1);
255 | transform: translateZ(0);
256 | }
257 |
258 | .hiprint-option-item-deleteBtn {
259 | background: red;
260 | }
261 |
262 | .hiprint-option-items .minicolors {
263 | position: relative;
264 | }
265 |
266 | .hiprint-option-items .minicolors-swatch {
267 | position: absolute;
268 | vertical-align: middle;
269 | background-position: -80px 0;
270 | cursor: text;
271 | padding: 0;
272 | margin: 0;
273 | display: inline-block;
274 | }
275 |
276 | .hiprint-option-items .minicolors-swatch-color {
277 | position: absolute;
278 | top: 0;
279 | left: 0;
280 | right: 0;
281 | bottom: 0;
282 | }
283 |
284 | .hiprint-option-items .minicolors input[type=hidden] + .minicolors-swatch {
285 | width: 28px;
286 | position: static;
287 | cursor: pointer;
288 | }
289 |
290 | .hiprint-option-items .minicolors input[type=hidden][disabled] + .minicolors-swatch {
291 | cursor: default;
292 | }
293 |
294 | /* Panel */
295 | .hiprint-option-items .minicolors-panel {
296 | position: absolute;
297 | width: 173px;
298 | background: white;
299 | border: solid 1px #CCC;
300 | box-shadow: 0 0 20px rgba(0, 0, 0, .2);
301 | z-index: 99999;
302 | box-sizing: content-box;
303 | display: none;
304 | }
305 |
306 | .hiprint-option-items .minicolors-panel.minicolors-visible {
307 | display: block;
308 | }
309 |
310 | /* Panel positioning */
311 | .hiprint-option-items .minicolors-position-top .minicolors-panel {
312 | top: -154px;
313 | }
314 |
315 | .hiprint-option-items .minicolors-position-right .minicolors-panel {
316 | right: 0;
317 | }
318 |
319 | .hiprint-option-items .minicolors-position-bottom .minicolors-panel {
320 | top: auto;
321 | }
322 |
323 | .hiprint-option-items .minicolors-position-left .minicolors-panel {
324 | left: 0;
325 | }
326 |
327 | .hiprint-option-items .minicolors-with-opacity .minicolors-panel {
328 | width: 194px;
329 | }
330 |
331 | .hiprint-option-items .minicolors .minicolors-grid {
332 | position: relative;
333 | top: 1px;
334 | left: 1px; /* LTR */
335 | width: 150px;
336 | height: 150px;
337 | margin-bottom: 2px;
338 | background-position: -120px 0;
339 | cursor: crosshair;
340 | }
341 |
342 | .hiprint-option-items .minicolors .minicolors-grid-inner {
343 | position: absolute;
344 | top: 0;
345 | left: 0;
346 | width: 150px;
347 | height: 150px;
348 | }
349 |
350 | .hiprint-option-items .minicolors-slider-saturation .minicolors-grid {
351 | background-position: -420px 0;
352 | }
353 |
354 | .hiprint-option-items .minicolors-slider-saturation .minicolors-grid-inner {
355 | background-position: -270px 0;
356 | background-image: inherit;
357 | }
358 |
359 | .hiprint-option-items .minicolors-slider-brightness .minicolors-grid {
360 | background-position: -570px 0;
361 | }
362 |
363 | .hiprint-option-items .minicolors-slider-brightness .minicolors-grid-inner {
364 | background-color: black;
365 | }
366 |
367 | .hiprint-option-items .minicolors-slider-wheel .minicolors-grid {
368 | background-position: -720px 0;
369 | }
370 |
371 | .hiprint-option-items .minicolors-slider,
372 | .hiprint-option-items .minicolors-opacity-slider {
373 | position: absolute;
374 | top: 1px;
375 | left: 152px; /* LTR */
376 | width: 20px;
377 | height: 150px;
378 | background-color: white;
379 | background-position: 0 0;
380 | cursor: row-resize;
381 | }
382 |
383 | .hiprint-option-items .minicolors-slider-saturation .minicolors-slider {
384 | background-position: -60px 0;
385 | }
386 |
387 | .hiprint-option-items .minicolors-slider-brightness .minicolors-slider {
388 | background-position: -20px 0;
389 | }
390 |
391 | .hiprint-option-items .minicolors-slider-wheel .minicolors-slider {
392 | background-position: -20px 0;
393 | }
394 |
395 | .hiprint-option-items .minicolors-opacity-slider {
396 | left: 173px; /* LTR */
397 | background-position: -40px 0;
398 | display: none;
399 | }
400 |
401 |
402 | .hiprint-option-items .minicolors-with-opacity .minicolors-opacity-slider {
403 | display: block;
404 | }
405 |
406 | /* Pickers */
407 | .hiprint-option-items .minicolors-grid .minicolors-picker {
408 | position: absolute;
409 | top: 70px;
410 | left: 70px;
411 | width: 12px;
412 | height: 12px;
413 | border: solid 1px black;
414 | border-radius: 10px;
415 | margin-top: -6px;
416 | margin-left: -6px;
417 | background: none;
418 | }
419 |
420 | .hiprint-option-items .minicolors-grid .minicolors-picker > div {
421 | position: absolute;
422 | top: 0;
423 | left: 0;
424 | width: 8px;
425 | height: 8px;
426 | border-radius: 8px;
427 | border: solid 2px white;
428 | box-sizing: content-box;
429 | }
430 |
431 | .hiprint-option-items .minicolors-picker {
432 | position: absolute;
433 | top: 0;
434 | left: 0;
435 | width: 18px;
436 | height: 2px;
437 | background: white;
438 | border: solid 1px black;
439 | margin-top: -2px;
440 | box-sizing: content-box;
441 | }
442 |
443 | /* Swatches */
444 | .hiprint-option-items .minicolors-swatches,
445 | .hiprint-option-items .minicolors-swatches li {
446 | margin: 5px 0 3px 5px; /* LTR */
447 | padding: 0;
448 | list-style: none;
449 | overflow: hidden;
450 | }
451 |
452 | .hiprint-option-items .minicolors-swatches .minicolors-swatch {
453 | position: relative;
454 | float: left; /* LTR */
455 | cursor: pointer;
456 | margin: 0 4px 0 0; /* LTR */
457 | }
458 |
459 |
460 | .hiprint-option-items .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
461 | margin-right: 7px; /* LTR */
462 | }
463 |
464 |
465 | .hiprint-option-items .minicolors-swatch.selected {
466 | border-color: #000;
467 | }
468 |
469 | /* Inline controls */
470 | .hiprint-option-items .minicolors-inline {
471 | display: inline-block;
472 | }
473 |
474 | .hiprint-option-items .minicolors-inline .minicolors-input {
475 | display: none !important;
476 | }
477 |
478 | .hiprint-option-items .minicolors-inline .minicolors-panel {
479 | position: relative;
480 | top: auto;
481 | left: auto; /* LTR */
482 | box-shadow: none;
483 | z-index: auto;
484 | display: inline-block;
485 | }
486 |
487 |
488 |
489 | /* Bootstrap theme */
490 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch {
491 | z-index: 2;
492 | top: 3px;
493 | left: 3px;
494 | width: 17px;
495 | height: 17px;
496 | }
497 |
498 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
499 | margin-bottom: 2px;
500 | top: 0;
501 | left: 0; /* LTR */
502 | width: 20px;
503 | height: 20px;
504 | }
505 |
506 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch-color {
507 | border-radius: inherit;
508 | }
509 |
510 | .hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
511 | left: auto; /* LTR */
512 | right: 3px; /* LTR */
513 | }
514 |
515 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-input {
516 | float: none;
517 | padding-left: 23px; /* LTR */
518 | }
519 |
520 | .hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
521 | padding-right: 44px; /* LTR */
522 | padding-left: 12px; /* LTR */
523 | }
524 |
525 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
526 | top: 4px;
527 | left: 4px; /* LTR */
528 | width: 37px;
529 | height: 37px;
530 | border-radius: 5px;
531 | }
532 |
533 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
534 | width: 24px;
535 | height: 24px;
536 | }
537 |
538 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
539 | width: 18px;
540 | height: 18px;
541 | }
542 |
543 | .hiprint-option-items .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
544 | border-top-left-radius: 0; /* LTR */
545 | border-bottom-left-radius: 0; /* LTR */
546 | }
547 |
548 |
549 |
550 | /*hitable reizer*/
551 | .hitable {
552 | }
553 |
554 |
555 |
556 | .hitable .selected {
557 | background: #3e66ad;
558 | }
559 |
560 |
561 | /*resizer*/
562 | .hitable tr.resizerRow,
563 | .hitable .resizerRow td {
564 | border: 0pt dashed;
565 | height: 0pt;
566 | background: #fff;
567 | }
568 |
569 | .hitable tr.resizerRow + tr,
570 | .hitable tr.resizerRow + tr td {
571 | border-top: 0px !important;
572 | }
573 |
574 | .hitable td.resizerColumn {
575 | border: 0pt dashed;
576 | width: 0.000001px !important;
577 | background: #fff;
578 | }
579 |
580 |
581 | .hitable td.resizerColumn + td {
582 | border-left: 0px !important;
583 | }
584 |
585 |
586 | /*GRIP*/
587 |
588 | .columngrips {
589 | height: 0px;
590 | position: absolute;
591 | }
592 |
593 | .columngrip {
594 | margin-left: -5px;
595 | position: absolute;
596 | z-index: 5;
597 | width: 10px;
598 | }
599 |
600 | .columngrip .gripResizer {
601 | position: absolute;
602 | filter: alpha(opacity=1);
603 | opacity: 0;
604 | width: 10px;
605 | height: 100%;
606 | cursor: col-resize;
607 | top: 0px;
608 | }
609 |
610 | .columngripDraging {
611 | border-left: 1px dotted black;
612 | }
613 |
614 | .rowgrips {
615 | height: 0px;
616 | width: 0px;
617 | position: absolute;
618 | }
619 |
620 | .rowgrip {
621 | margin-top: -5px;
622 | position: absolute;
623 | z-index: 5;
624 | height: 10px;
625 | }
626 |
627 | .rowgrip .gripResizer {
628 | position: absolute;
629 | filter: alpha(opacity=1);
630 | opacity: 0;
631 | height: 10px;
632 | width: 100%;
633 | cursor: row-resize;
634 | left: 0px;
635 | }
636 |
637 | .rowgripDraging {
638 | border-top: 1px dotted black;
639 | }
640 |
641 | .hitable .hitable-editor-text {
642 | border: 1px solid;
643 | width: 95%;
644 | height: 80%;
645 | }
646 |
647 |
648 |
649 |
650 | .hipanel-disable {
651 | height: 0px;
652 | display: block !important;
653 | top: 8500px;
654 | width: 0px;
655 | overflow: hidden;
656 | position: absolute;
657 | }
658 |
659 | .hiprint_rul_wrapper {
660 | position: absolute;
661 | height: 100%;
662 | width: 100%;
663 | overflow: hidden;
664 | pointer-events: none;
665 | border: 0;
666 | border-top: 1px solid rgb(201, 190, 190);
667 | border-left: 1px solid rgb(201, 190, 190);
668 | padding-left: 15px;
669 | margin: -16px
670 | }
671 |
672 | .hiprint_rul_wrapper .h_img {
673 | position: absolute;
674 | top: 0px;
675 | left: 15px;
676 | width: 400mm;
677 | height: 15px;
678 | }
679 |
680 | .hiprint_rul_wrapper .v_img {
681 | width: 400mm;
682 | transform: rotate(90deg);
683 | transform-origin: 0 100%;
684 | height: 15px;
685 | position: absolute;
686 | top: -2px;
687 | left: 0px;
688 | }
689 |
690 | /*hiprint-option-table*/
691 |
692 | .hiprint-option-table-selected-columns {
693 | color: inherit;
694 | background-color: transparent;
695 | box-sizing: border-box;
696 | width: 100%;
697 | position: relative;
698 | padding: 0px;
699 | list-style: none;
700 | }
701 |
702 | .hiprint-option-table-selected-columns .hiprint-option-table-selected-item {
703 | color: inherit;
704 | background-color: transparent;
705 | box-sizing: border-box;
706 | width: 100%;
707 | padding: 0 3px;
708 | border: 1px solid rgb(169, 169, 169);
709 | line-height: 19pt;
710 | margin: 3px 0;
711 | }
712 | /*hi-pretty */
713 | .hi-pretty * {
714 | box-sizing: border-box;
715 | }
716 |
717 | .hi-pretty input:not([type='checkbox']):not([type='radio']) {
718 | display: none;
719 | }
720 |
721 | .hi-pretty {
722 | position: relative;
723 | display: inline-block;
724 | margin-right: 1em;
725 | white-space: nowrap;
726 | line-height: 1;
727 | }
728 |
729 | .hi-pretty input {
730 | position: absolute;
731 | left: 0;
732 | top: 0;
733 | min-width: 1em;
734 | width: 100%;
735 | height: 100%;
736 | z-index: 2;
737 | opacity: 0;
738 | margin: 0;
739 | padding: 0;
740 | cursor: pointer;
741 | }
742 |
743 | .hi-pretty .state label {
744 | position: initial;
745 | display: inline-block;
746 | font-weight: normal;
747 | margin: 0;
748 | text-indent: 1.5em;
749 | min-width: calc(1em + 2px);
750 | }
751 |
752 | .hi-pretty .state label:before,
753 | .hi-pretty .state label:after {
754 | content: '';
755 | width: calc(1em + 2px);
756 | height: calc(1em + 2px);
757 | display: block;
758 | box-sizing: border-box;
759 | border-radius: 0;
760 | border: 1px solid transparent;
761 | z-index: 0;
762 | position: absolute;
763 | left: 0;
764 | top: calc((0% - (100% - 1em)) - 8%);
765 | background-color: transparent;
766 | }
767 |
768 | .hi-pretty .state label:before {
769 | border-color: #bdc3c7;
770 | }
771 |
772 | .hi-pretty .state.p-is-hover,
773 | .hi-pretty .state.p-is-indeterminate {
774 | display: none;
775 | }
776 |
777 |
778 | .hi-pretty.p-default.p-fill .state label:after {
779 | -webkit-transform: scale(1);
780 | -ms-transform: scale(1);
781 | transform: scale(1);
782 | }
783 |
784 | .hi-pretty.p-default .state label:after {
785 | -webkit-transform: scale(0.6);
786 | -ms-transform: scale(0.6);
787 | transform: scale(0.6);
788 | }
789 |
790 | .hi-pretty.p-default input:checked ~ .state label:after {
791 | background-color: #bdc3c7 !important;
792 | }
793 |
794 | .hi-pretty.p-default.p-thick .state label:before,
795 | .hi-pretty.p-default.p-thick .state label:after {
796 | border-width: calc(1em / 7);
797 | }
798 |
799 | .hi-pretty.p-default.p-thick .state label:after {
800 | -webkit-transform: scale(0.4) !important;
801 | -ms-transform: scale(0.4) !important;
802 | transform: scale(0.4) !important;
803 | }
804 | `;
805 |
806 | export default hiprintCss;
--------------------------------------------------------------------------------
/plugins/js/hiprint.config.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | window.HIPRINT_CONFIG = {
3 | //optionItems: [hiprintCustomOptionItem],//自定义选项
4 | movingDistance: 1.5, //鼠标拖动一次移动的距离,默认1.5pt
5 | paperHeightTrim: 1, //纸张html 的高度等于真实高度-1
6 | text: any = {
7 | supportOptions: [
8 |
9 |
10 | // {
11 | // name: 'hiprintCustomOptionItem',
12 | // hidden: false
13 | // },
14 | {
15 | name: 'title',
16 | hidden: false
17 | },
18 | {
19 | name: 'field',
20 | hidden: false
21 | },
22 | {
23 | name: 'testData',
24 | hidden: false
25 | },
26 | {
27 | name: 'dataType',
28 | hidden: false
29 | },
30 | {
31 | name: 'fontFamily',
32 | hidden: false
33 | },
34 | {
35 | name: 'fontSize',
36 | hidden: false
37 | },
38 | {
39 | name: 'fontWeight',
40 | hidden: false
41 | },
42 | {
43 | name: 'letterSpacing',
44 | hidden: false
45 | },
46 | {
47 | name: 'color',
48 | hidden: false
49 | },
50 | {
51 | name: 'textDecoration',
52 | hidden: false
53 | },
54 | {
55 | name: 'textAlign',
56 | hidden: false
57 | },
58 | {
59 | name: 'textContentVerticalAlign',
60 | hidden: false
61 | },
62 |
63 | {
64 | name: 'lineHeight',
65 | hidden: false
66 | },
67 | {
68 | name: 'textType',
69 | hidden: false
70 | },
71 | {
72 | name: 'barcodeMode',
73 | hidden: false
74 | },
75 | {
76 | name: 'hideTitle',
77 | hidden: false
78 | },
79 | {
80 | name: 'showInPage',
81 | hidden: false
82 | },
83 | {
84 | name: 'unShowInPage',
85 | hidden: false
86 | },
87 | {
88 | name: 'fixed',
89 | hidden: false
90 | },
91 | {
92 | name: 'axis',
93 | hidden: false
94 | },
95 | {
96 | name: 'transform',
97 | hidden: false
98 | },
99 | {
100 | name: 'optionsGroup',
101 | hidden: false
102 | },
103 | {
104 | name: 'borderLeft',
105 | hidden: false
106 | },
107 | {
108 | name: 'borderTop',
109 | hidden: false
110 | },
111 | {
112 | name: 'borderRight',
113 | hidden: false
114 | },
115 | {
116 | name: 'borderBottom',
117 | hidden: false
118 | },
119 | {
120 | name: 'borderWidth',
121 | hidden: false
122 | },
123 | {
124 | name: 'borderColor',
125 | hidden: false
126 | },
127 | {
128 | name: 'contentPaddingLeft',
129 | hidden: false
130 | },
131 | {
132 | name: 'contentPaddingTop',
133 | hidden: false
134 | },
135 | {
136 | name: 'contentPaddingRight',
137 | hidden: false
138 | },
139 | {
140 | name: 'contentPaddingBottom',
141 | hidden: false
142 | },
143 | {
144 | name: 'backgroundColor',
145 | hidden: false
146 | },
147 | {
148 | name: 'formatter',
149 | hidden: false
150 | },
151 | {
152 | name: 'styler',
153 | hidden: false
154 | }
155 |
156 | ],
157 | default: {
158 | width: 120,
159 | height: 9.75,
160 | }
161 | },
162 | image: any = {
163 | supportOptions: [{
164 | name: 'field',
165 | hidden: false
166 | },
167 | {
168 | name: 'src',
169 | hidden: false
170 | },
171 | {
172 | name: 'showInPage',
173 | hidden: false
174 | },
175 | {
176 | name: 'fixed',
177 | hidden: false
178 | },
179 | {
180 | name: 'axis',
181 | hidden: false
182 | },
183 | {
184 | name: 'transform',
185 | hidden: false
186 | },
187 | {
188 | name: 'formatter',
189 | hidden: false
190 | },
191 | {
192 | name: 'styler',
193 | hidden: false
194 | }
195 | ],
196 | default: {
197 |
198 | }
199 | },
200 | longText: any = {
201 | supportOptions: [{
202 | name: 'title',
203 | hidden: false
204 | },
205 | {
206 | name: 'field',
207 | hidden: false
208 | },
209 | {
210 | name: 'testData',
211 | hidden: false
212 | },
213 | {
214 | name: 'fontFamily',
215 | hidden: false
216 | },
217 | {
218 | name: 'fontSize',
219 | hidden: false
220 | },
221 | {
222 | name: 'fontWeight',
223 | hidden: false
224 | },
225 | {
226 | name: 'letterSpacing',
227 | hidden: false
228 | },
229 |
230 | {
231 | name: 'textAlign',
232 | hidden: false
233 | },
234 | {
235 | name: 'lineHeight',
236 | hidden: false
237 | },
238 | {
239 | name: 'color',
240 | hidden: false
241 | },
242 | {
243 | name: 'hideTitle',
244 | hidden: false
245 | },
246 |
247 | {
248 | name: 'longTextIndent',
249 | hidden: false
250 | },
251 |
252 | {
253 | name: 'leftSpaceRemoved',
254 | hidden: false
255 | },
256 | {
257 | name: 'showInPage',
258 | hidden: false
259 | },
260 | {
261 | name: 'unShowInPage',
262 | hidden: false
263 | },
264 | {
265 | name: 'fixed',
266 | hidden: false
267 | },
268 | {
269 | name: 'axis',
270 | hidden: false
271 | },
272 | {
273 | name: 'lHeight',
274 | hidden: false
275 | },
276 | {
277 | name: 'transform',
278 | hidden: false
279 | },
280 | {
281 | name: 'optionsGroup',
282 | hidden: false
283 | },
284 | {
285 | name: 'borderLeft',
286 | hidden: false
287 | },
288 | {
289 | name: 'borderTop',
290 | hidden: false
291 | },
292 | {
293 | name: 'borderRight',
294 | hidden: false
295 | },
296 | {
297 | name: 'borderBottom',
298 | hidden: false
299 | },
300 | {
301 | name: 'borderWidth',
302 | hidden: false
303 | },
304 | {
305 | name: 'borderColor',
306 | hidden: false
307 | },
308 | {
309 | name: 'contentPaddingLeft',
310 | hidden: false
311 | },
312 | {
313 | name: 'contentPaddingTop',
314 | hidden: false
315 | },
316 | {
317 | name: 'contentPaddingRight',
318 | hidden: false
319 | },
320 | {
321 | name: 'contentPaddingBottom',
322 | hidden: false
323 | },
324 | {
325 | name: 'backgroundColor',
326 | hidden: false
327 | },
328 | {
329 | name: 'formatter',
330 | hidden: false
331 | },
332 | {
333 | name: 'styler',
334 | hidden: false
335 | }
336 |
337 | ],
338 | default: {
339 | height: 42,
340 | width: 550
341 | }
342 | },
343 | table: any = {
344 | supportOptions: [{
345 | name: 'field',
346 | hidden: false
347 | },
348 | {
349 | name: 'fontFamily',
350 | hidden: false
351 | },
352 | {
353 | name: 'fontSize',
354 | hidden: false
355 | },
356 | {
357 | name: 'lineHeight',
358 | hidden: false
359 | },
360 | {
361 | name: 'textAlign',
362 | hidden: false
363 | },
364 | {
365 | name: 'gridColumns',
366 | hidden: false
367 | },
368 | {
369 | name: 'gridColumnsGutter',
370 | hidden: false
371 | },
372 |
373 | {
374 | name: 'tableBorder',
375 | hidden: false
376 | },
377 | {
378 | name: 'tableHeaderBorder',
379 | hidden: false
380 | },
381 | {
382 | name: 'tableHeaderCellBorder',
383 | hidden: false
384 | },
385 | {
386 | name: 'tableHeaderRowHeight',
387 | hidden: false
388 | },
389 | {
390 | name: 'tableHeaderBackground',
391 | hidden: false
392 | },
393 | {
394 | name: 'tableHeaderFontSize',
395 | hidden: false
396 | },
397 | {
398 | name: 'tableHeaderFontWeight',
399 | hidden: false
400 | },
401 |
402 | {
403 | name: 'tableBodyRowHeight',
404 | hidden: false
405 | },
406 | {
407 | name: 'tableBodyRowBorder',
408 | hidden: false
409 | },
410 | {
411 | name: 'tableBodyCellBorder',
412 | hidden: false
413 | },
414 |
415 | {
416 | name: 'axis',
417 | hidden: false
418 | },
419 | {
420 | name: 'lHeight',
421 | hidden: false
422 | },
423 |
424 | {
425 | name: 'autoCompletion',
426 | hidden: false
427 | },
428 | {
429 | name: 'columns',
430 | hidden: false
431 | },
432 | {
433 |
434 | name: 'styler',
435 | hidden: false
436 | },
437 | {
438 |
439 | name: 'rowStyler',
440 | hidden: false
441 | },
442 |
443 | {
444 |
445 | name: 'tableFooterRepeat',
446 | hidden: false
447 | },
448 | {
449 |
450 | name: 'footerFormatter',
451 | hidden: false
452 | },
453 | {
454 | name: 'gridColumnsFooterFormatter',
455 | hidden: false
456 |
457 | }
458 |
459 |
460 | ],
461 | default: {
462 |
463 | width: 550
464 | }
465 | },
466 | tableCustom: any = {
467 | supportOptions: [{
468 | name: 'field',
469 | hidden: false
470 | },
471 | {
472 | name: 'fontFamily',
473 | hidden: false
474 | },
475 | {
476 | name: 'fontSize',
477 | hidden: false
478 | },
479 | {
480 | name: 'textAlign',
481 | hidden: false
482 | },
483 | {
484 | name: 'tableBorder',
485 | hidden: false
486 | },
487 | {
488 | name: 'tableHeaderBorder',
489 | hidden: false
490 | },
491 | {
492 | name: 'tableHeaderCellBorder',
493 | hidden: false
494 | },
495 | {
496 | name: 'tableHeaderRowHeight',
497 | hidden: false
498 | },
499 | {
500 | name: 'tableHeaderFontSize',
501 | hidden: false
502 | },
503 | {
504 | name: 'tableHeaderFontWeight',
505 | hidden: false
506 | },
507 | {
508 | name: 'tableHeaderBackground',
509 | hidden: false
510 | },
511 |
512 | {
513 | name: 'tableBodyRowHeight',
514 | hidden: false
515 | },
516 | {
517 | name: 'tableBodyRowBorder',
518 | hidden: false
519 | },
520 | {
521 | name: 'tableBodyCellBorder',
522 | hidden: false
523 | },
524 | {
525 | name: 'axis',
526 | hidden: false
527 | },
528 | {
529 | name: 'lHeight',
530 | hidden: false
531 | },
532 | {
533 | name: 'autoCompletion',
534 | hidden: false
535 | }, {
536 |
537 | name: 'tableFooterRepeat',
538 | hidden: false
539 | }
540 | ],
541 | default: {
542 |
543 | width: 550
544 | }
545 | },
546 |
547 |
548 | hline: any = {
549 | supportOptions: [{
550 | name: 'borderColor',
551 | hidden: false
552 | }, {
553 | name: 'borderWidth',
554 | hidden: false
555 | }, {
556 | name: 'showInPage',
557 | hidden: false
558 | },
559 | {
560 | name: 'fixed',
561 | hidden: false
562 | },
563 | {
564 | name: 'axis',
565 | hidden: false
566 | },
567 | {
568 | name: 'transform',
569 | hidden: false
570 | },
571 | {
572 | name: 'borderStyle',
573 | hidden: false
574 | }
575 |
576 | ],
577 | default: {
578 | borderWidth: 0.75,
579 | height: 9,
580 | width: 90
581 | }
582 | },
583 | vline: any = {
584 | supportOptions: [{
585 | name: 'borderColor',
586 | hidden: false
587 | }, {
588 | name: 'borderWidth',
589 | hidden: false
590 | }, {
591 | name: 'showInPage',
592 | hidden: false
593 | },
594 | {
595 | name: 'fixed',
596 | hidden: false
597 | },
598 | {
599 | name: 'axis',
600 | hidden: false
601 | },
602 | {
603 | name: 'transform',
604 | hidden: false
605 | },
606 | {
607 | name: 'borderStyle',
608 | hidden: false
609 | }
610 | ],
611 | default: {
612 | borderWidth: undefined,
613 | height: 90,
614 | width: 9
615 | }
616 | },
617 | rect: any = {
618 | supportOptions: [{
619 | name: 'borderColor',
620 | hidden: false
621 | }, {
622 | name: 'borderWidth',
623 | hidden: false
624 | }, {
625 | name: 'showInPage',
626 | hidden: false
627 | },
628 | {
629 | name: 'fixed',
630 | hidden: false
631 | },
632 | {
633 | name: 'axis',
634 | hidden: false
635 | },
636 | {
637 | name: 'transform',
638 | hidden: false
639 | },
640 | {
641 | name: 'borderStyle',
642 | hidden: false
643 | }
644 | ],
645 | default: {
646 | borderWidth: undefined,
647 | height: 90,
648 | width: 90
649 | }
650 | },
651 | oval: any = {
652 | supportOptions: [{
653 | name: 'borderColor',
654 | hidden: false
655 | }, {
656 | name: 'borderWidth',
657 | hidden: false
658 | }, {
659 | name: 'showInPage',
660 | hidden: false
661 | },
662 | {
663 | name: 'fixed',
664 | hidden: false
665 | },
666 | {
667 | name: 'axis',
668 | hidden: false
669 | }, {
670 | name: 'transform',
671 | hidden: false
672 | },
673 | {
674 | name: 'borderStyle',
675 | hidden: false
676 | }
677 | ],
678 | default: {
679 | borderWidth: undefined,
680 | height: 90,
681 | width: 90
682 | }
683 | },
684 | html: any = {
685 | supportOptions: [{
686 | name: 'showInPage',
687 | hidden: false
688 | },
689 | {
690 | name: 'unShowInPage',
691 | hidden: false
692 | },
693 | {
694 | name: 'fixed',
695 | hidden: false
696 | },
697 | {
698 | name: 'axis',
699 | hidden: false
700 | },
701 | {
702 | name: 'formatter',
703 | hidden: false
704 | }
705 | ],
706 | default: {
707 |
708 | height: 90,
709 | width: 90
710 | }
711 | },
712 | tableColumn: any = {
713 | supportOptions: [
714 | {
715 | name: 'title',
716 | hidden: false
717 | },
718 | {
719 | name: 'align',
720 | hidden: false
721 | },
722 | {
723 | name: 'halign',
724 | hidden: false
725 | },
726 | {
727 | name: 'vAlign',
728 | hidden: false
729 | },
730 |
731 |
732 | {
733 | name: 'paddingLeft',
734 | hidden: false
735 | },
736 | {
737 | name: 'paddingRight',
738 | hidden: false
739 | },
740 | {
741 | name: 'formatter2',
742 | hidden: false
743 | }, {
744 | name: 'styler2',
745 | hidden: false
746 | }
747 | ],
748 | default: {
749 |
750 | height: 90,
751 | width: 90
752 | }
753 | }
754 | }
755 | })();
--------------------------------------------------------------------------------
/plugins/css/hiprint.css:
--------------------------------------------------------------------------------
1 |
2 | /* hiprint-pagination */
3 | .hiprint-pagination {
4 | display: inline-block;
5 | padding-left: 0;
6 | }
7 | .hiprint-pagination > li {
8 | border: 1px solid #bdc3c7;
9 | -moz-border-radius: 2px;
10 | -webkit-border-radius: 2px;
11 | display: block;
12 | float: left;
13 | padding: 5px;
14 | text-decoration: none;
15 | margin-right: 5px;
16 | margin-bottom: 5px;
17 | font-family: helvetica;
18 | font-size: 13px;
19 | cursor: pointer
20 | }
21 |
22 | .hiprint-pagination > li > span {
23 | padding: 0 10px 0 10px;
24 | }
25 |
26 | .hiprint-pagination > li > a {
27 | color: #bdc3c7;
28 | font-weight: bold;
29 | text-decoration: none;
30 | font-size: 11px;
31 | padding: 3px;
32 | }
33 |
34 | .hiprint-pagination > li > a:hover {
35 | color: red;
36 | }
37 |
38 |
39 |
40 | .hiprint-pagination-sm > li > a {
41 | padding: 5px 10px;
42 | font-size: 12px;
43 | line-height: 1.5;
44 | }
45 | /*rect-printElement-type hiprint-printElement-type */
46 | .rect-printElement-types .hiprint-printElement-type {
47 | display: block;
48 | }
49 |
50 | .rect-printElement-types .hiprint-printElement-type {
51 | padding: 0 0 0 0;
52 | list-style: none;
53 | }
54 |
55 | .rect-printElement-types .hiprint-printElement-type > li > .title {
56 | display: block;
57 | padding: 4px 0px;
58 | clear: both;
59 | }
60 |
61 | .rect-printElement-types .hiprint-printElement-type > li > ul {
62 | padding: 0 0 0 0;
63 | display: block;
64 | list-style: none;
65 | }
66 |
67 | .rect-printElement-types .hiprint-printElement-type > li > ul > li {
68 | display: block;
69 | width: 50%;
70 | float: left;
71 | max-width: 100px;
72 | }
73 |
74 | .rect-printElement-types .hiprint-printElement-type > li > ul > li > a {
75 | height: 92px;
76 | padding: 12px 6px;
77 | margin-left: -1px;
78 | line-height: 1.42857143;
79 | color: #337ab7;
80 | text-decoration: none;
81 | background-color: #fff;
82 | border: 1px solid #ddd;
83 | margin-right: 5px;
84 | width: 95%;
85 | max-width: 100px;
86 | display: inline-block;
87 | text-align: center;
88 | margin-bottom: 7px;
89 | box-sizing: border-box;
90 | color: #b9a5a6;
91 | border: 1px solid rgba(0,0,0,0.2);
92 | border-radius: 3px;
93 | box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
94 | }
95 |
96 |
97 | /*small-printElement-type hiprint-printElement-type */
98 | .small-printElement-types .hiprint-printElement-type {
99 | display: block;
100 | }
101 |
102 | .small-printElement-types .hiprint-printElement-type {
103 | padding: 0 0 0 0;
104 | list-style: none;
105 | }
106 |
107 | .small-printElement-types .hiprint-printElement-type > li > .title {
108 | display: block;
109 | padding: 4px 0px;
110 | clear: both;
111 | }
112 |
113 | .small-printElement-types .hiprint-printElement-type > li > ul {
114 | padding: 0 0 0 0;
115 | display: block;
116 | list-style: none;
117 | width: 100%;
118 | }
119 |
120 | .small-printElement-types .hiprint-printElement-type > li > ul > li {
121 | display: block;
122 | width: 50%;
123 | float: left;
124 | padding: 0 4px;
125 | }
126 |
127 | .small-printElement-types .hiprint-printElement-type > li > ul > li > a {
128 | height: 22px;
129 | /* padding: 12px 6px; */
130 | /* margin-left: -1px; */
131 | line-height: 20px;
132 | color: #337ab7;
133 | text-decoration: none;
134 | background-color: #fff;
135 | border: 1px solid #ddd;
136 | margin-right: 5px;
137 | width: 100%;
138 | display: block;
139 | text-align: center;
140 | margin-bottom: 7px;
141 | box-sizing: border-box;
142 | color: #b9a5a6;
143 | border: 1px solid rgba(0,0,0,0.2);
144 | border-radius: 3px;
145 | box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
146 | }
147 |
148 |
149 | /* hiprint-toolbar*/
150 |
151 | .hiprint-toolbar {
152 | }
153 |
154 | .hiprint-toolbar > ul {
155 | padding: 0px;
156 | margin-bottom: 5px;
157 | }
158 |
159 | .hiprint-toolbar > ul > li {
160 | display: inline-block;
161 | }
162 |
163 | .hiprint-toolbar > ul > li > a {
164 | position: relative;
165 | float: left;
166 | padding: 3px 10px;
167 | margin-left: -1px;
168 | line-height: 1.42857143;
169 | color: #337ab7;
170 | text-decoration: none;
171 | background-color: #fff;
172 | border: 1px solid #ddd;
173 | margin-right: 4px;
174 | cursor: pointer;
175 | }
176 |
177 |
178 | .hiprint-printElement-type .glyphicon-class {
179 | display: block;
180 | text-align: center;
181 | word-wrap: break-word;
182 | /*font-size: 0.65rem;
183 | font-weight: normal;*/
184 | font-family: Helvetica, sans-serif;
185 | }
186 |
187 | .hiprint-printElement-type .glyphicon {
188 | margin-top: 5px;
189 | margin-bottom: 10px;
190 | font-size: 37px;
191 | }
192 |
193 |
194 | /*
195 |
196 |
197 | */
198 |
199 | /*option css*/
200 | /*option css*/
201 | .hiprint-option-items {
202 | font-size: .75rem;
203 | padding: 10px 5px;
204 | display: flex;
205 | flex-wrap: wrap;
206 | align-items: flex-end;
207 | box-sizing: border-box;
208 | width: 100%;
209 | }
210 |
211 | .hiprint-option-items .hiprint-option-item {
212 | box-sizing: border-box;
213 | float: left;
214 | width: 50%;
215 | margin-bottom: 5px;
216 | padding: 0 5px;
217 | }
218 |
219 | .hiprint-option-items .hiprint-option-item-row {
220 | width: 100%;
221 | }
222 |
223 | .hiprint-option-item-label {
224 | margin: 5px 5px 3px 0;
225 | }
226 |
227 | .hiprint-option-items .hiprint-option-item-field input, .hiprint-option-items .hiprint-option-item-field select, .hiprint-option-items .hiprint-option-item-field textarea {
228 | color: inherit;
229 | background-color: transparent;
230 | box-sizing: border-box;
231 | width: 100%;
232 | position: relative;
233 | padding: 3px;
234 | z-index: 1;
235 | border: 1px solid rgb(169, 169, 169);
236 | height: 19pt;
237 | }
238 |
239 | .hiprint-option-item-settingBtn {
240 | height: 19pt;
241 | line-height: 19pt;
242 | font-size: 12px;
243 | padding: 0 24px;
244 | background: #00c1de;
245 | border-color: transparent;
246 | color: #fff;
247 | display: inline-block;
248 | margin: 5px;
249 | font-weight: 400;
250 | border: 1px solid transparent;
251 | font-family: PingFangSC, helvetica neue, hiragino sans gb, arial, microsoft yahei ui, microsoft yahei, simsun, "sans-serif";
252 | vertical-align: middle;
253 | transition: .3s cubic-bezier(.4, 0, .2, 1);
254 | transform: translateZ(0);
255 | }
256 |
257 | .hiprint-option-item-deleteBtn {
258 | background: red;
259 | }
260 |
261 | .hiprint-option-items .minicolors {
262 | position: relative;
263 | }
264 |
265 | .hiprint-option-items .minicolors-swatch {
266 | position: absolute;
267 | vertical-align: middle;
268 | background-position: -80px 0;
269 | cursor: text;
270 | padding: 0;
271 | margin: 0;
272 | display: inline-block;
273 | }
274 |
275 | .hiprint-option-items .minicolors-swatch-color {
276 | position: absolute;
277 | top: 0;
278 | left: 0;
279 | right: 0;
280 | bottom: 0;
281 | }
282 |
283 | .hiprint-option-items .minicolors input[type=hidden] + .minicolors-swatch {
284 | width: 28px;
285 | position: static;
286 | cursor: pointer;
287 | }
288 |
289 | .hiprint-option-items .minicolors input[type=hidden][disabled] + .minicolors-swatch {
290 | cursor: default;
291 | }
292 |
293 | /* Panel */
294 | .hiprint-option-items .minicolors-panel {
295 | position: absolute;
296 | width: 173px;
297 | background: white;
298 | border: solid 1px #CCC;
299 | box-shadow: 0 0 20px rgba(0, 0, 0, .2);
300 | z-index: 99999;
301 | box-sizing: content-box;
302 | display: none;
303 | }
304 |
305 | .hiprint-option-items .minicolors-panel.minicolors-visible {
306 | display: block;
307 | }
308 |
309 | /* Panel positioning */
310 | .hiprint-option-items .minicolors-position-top .minicolors-panel {
311 | top: -154px;
312 | }
313 |
314 | .hiprint-option-items .minicolors-position-right .minicolors-panel {
315 | right: 0;
316 | }
317 |
318 | .hiprint-option-items .minicolors-position-bottom .minicolors-panel {
319 | top: auto;
320 | }
321 |
322 | .hiprint-option-items .minicolors-position-left .minicolors-panel {
323 | left: 0;
324 | }
325 |
326 | .hiprint-option-items .minicolors-with-opacity .minicolors-panel {
327 | width: 194px;
328 | }
329 |
330 | .hiprint-option-items .minicolors .minicolors-grid {
331 | position: relative;
332 | top: 1px;
333 | left: 1px; /* LTR */
334 | width: 150px;
335 | height: 150px;
336 | margin-bottom: 2px;
337 | background-position: -120px 0;
338 | cursor: crosshair;
339 | }
340 |
341 | .hiprint-option-items .minicolors .minicolors-grid-inner {
342 | position: absolute;
343 | top: 0;
344 | left: 0;
345 | width: 150px;
346 | height: 150px;
347 | }
348 |
349 | .hiprint-option-items .minicolors-slider-saturation .minicolors-grid {
350 | background-position: -420px 0;
351 | }
352 |
353 | .hiprint-option-items .minicolors-slider-saturation .minicolors-grid-inner {
354 | background-position: -270px 0;
355 | background-image: inherit;
356 | }
357 |
358 | .hiprint-option-items .minicolors-slider-brightness .minicolors-grid {
359 | background-position: -570px 0;
360 | }
361 |
362 | .hiprint-option-items .minicolors-slider-brightness .minicolors-grid-inner {
363 | background-color: black;
364 | }
365 |
366 | .hiprint-option-items .minicolors-slider-wheel .minicolors-grid {
367 | background-position: -720px 0;
368 | }
369 |
370 | .hiprint-option-items .minicolors-slider,
371 | .hiprint-option-items .minicolors-opacity-slider {
372 | position: absolute;
373 | top: 1px;
374 | left: 152px; /* LTR */
375 | width: 20px;
376 | height: 150px;
377 | background-color: white;
378 | background-position: 0 0;
379 | cursor: row-resize;
380 | }
381 |
382 | .hiprint-option-items .minicolors-slider-saturation .minicolors-slider {
383 | background-position: -60px 0;
384 | }
385 |
386 | .hiprint-option-items .minicolors-slider-brightness .minicolors-slider {
387 | background-position: -20px 0;
388 | }
389 |
390 | .hiprint-option-items .minicolors-slider-wheel .minicolors-slider {
391 | background-position: -20px 0;
392 | }
393 |
394 | .hiprint-option-items .minicolors-opacity-slider {
395 | left: 173px; /* LTR */
396 | background-position: -40px 0;
397 | display: none;
398 | }
399 |
400 |
401 | .hiprint-option-items .minicolors-with-opacity .minicolors-opacity-slider {
402 | display: block;
403 | }
404 |
405 | /* Pickers */
406 | .hiprint-option-items .minicolors-grid .minicolors-picker {
407 | position: absolute;
408 | top: 70px;
409 | left: 70px;
410 | width: 12px;
411 | height: 12px;
412 | border: solid 1px black;
413 | border-radius: 10px;
414 | margin-top: -6px;
415 | margin-left: -6px;
416 | background: none;
417 | }
418 |
419 | .hiprint-option-items .minicolors-grid .minicolors-picker > div {
420 | position: absolute;
421 | top: 0;
422 | left: 0;
423 | width: 8px;
424 | height: 8px;
425 | border-radius: 8px;
426 | border: solid 2px white;
427 | box-sizing: content-box;
428 | }
429 |
430 | .hiprint-option-items .minicolors-picker {
431 | position: absolute;
432 | top: 0;
433 | left: 0;
434 | width: 18px;
435 | height: 2px;
436 | background: white;
437 | border: solid 1px black;
438 | margin-top: -2px;
439 | box-sizing: content-box;
440 | }
441 |
442 | /* Swatches */
443 | .hiprint-option-items .minicolors-swatches,
444 | .hiprint-option-items .minicolors-swatches li {
445 | margin: 5px 0 3px 5px; /* LTR */
446 | padding: 0;
447 | list-style: none;
448 | overflow: hidden;
449 | }
450 |
451 | .hiprint-option-items .minicolors-swatches .minicolors-swatch {
452 | position: relative;
453 | float: left; /* LTR */
454 | cursor: pointer;
455 | margin: 0 4px 0 0; /* LTR */
456 | }
457 |
458 |
459 | .hiprint-option-items .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
460 | margin-right: 7px; /* LTR */
461 | }
462 |
463 |
464 | .hiprint-option-items .minicolors-swatch.selected {
465 | border-color: #000;
466 | }
467 |
468 | /* Inline controls */
469 | .hiprint-option-items .minicolors-inline {
470 | display: inline-block;
471 | }
472 |
473 | .hiprint-option-items .minicolors-inline .minicolors-input {
474 | display: none !important;
475 | }
476 |
477 | .hiprint-option-items .minicolors-inline .minicolors-panel {
478 | position: relative;
479 | top: auto;
480 | left: auto; /* LTR */
481 | box-shadow: none;
482 | z-index: auto;
483 | display: inline-block;
484 | }
485 |
486 |
487 |
488 | /* Bootstrap theme */
489 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch {
490 | z-index: 2;
491 | top: 3px;
492 | left: 3px;
493 | width: 17px;
494 | height: 17px;
495 | }
496 |
497 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
498 | margin-bottom: 2px;
499 | top: 0;
500 | left: 0; /* LTR */
501 | width: 20px;
502 | height: 20px;
503 | }
504 |
505 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch-color {
506 | border-radius: inherit;
507 | }
508 |
509 | .hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
510 | left: auto; /* LTR */
511 | right: 3px; /* LTR */
512 | }
513 |
514 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-input {
515 | float: none;
516 | padding-left: 23px; /* LTR */
517 | }
518 |
519 | .hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
520 | padding-right: 44px; /* LTR */
521 | padding-left: 12px; /* LTR */
522 | }
523 |
524 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
525 | top: 4px;
526 | left: 4px; /* LTR */
527 | width: 37px;
528 | height: 37px;
529 | border-radius: 5px;
530 | }
531 |
532 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
533 | width: 24px;
534 | height: 24px;
535 | }
536 |
537 | .hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
538 | width: 18px;
539 | height: 18px;
540 | }
541 |
542 | .hiprint-option-items .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
543 | border-top-left-radius: 0; /* LTR */
544 | border-bottom-left-radius: 0; /* LTR */
545 | }
546 |
547 |
548 |
549 | /*hitable reizer*/
550 | .hitable {
551 | }
552 |
553 |
554 |
555 | .hitable .selected {
556 | background: #3e66ad;
557 | }
558 |
559 |
560 | /*resizer*/
561 | .hitable tr.resizerRow,
562 | .hitable .resizerRow td {
563 | border: 0pt dashed;
564 | height: 0pt;
565 | background: #fff;
566 | }
567 |
568 | .hitable tr.resizerRow + tr,
569 | .hitable tr.resizerRow + tr td {
570 | border-top: 0px !important;
571 | }
572 |
573 | .hitable td.resizerColumn {
574 | border: 0pt dashed;
575 | width: 0.000001px !important;
576 | background: #fff;
577 | }
578 |
579 |
580 | .hitable td.resizerColumn + td {
581 | border-left: 0px !important;
582 | }
583 |
584 |
585 | /*GRIP*/
586 |
587 | .columngrips {
588 | height: 0px;
589 | position: absolute;
590 | }
591 |
592 | .columngrip {
593 | margin-left: -5px;
594 | position: absolute;
595 | z-index: 5;
596 | width: 10px;
597 | }
598 |
599 | .columngrip .gripResizer {
600 | position: absolute;
601 | filter: alpha(opacity=1);
602 | opacity: 0;
603 | width: 10px;
604 | height: 100%;
605 | cursor: col-resize;
606 | top: 0px;
607 | }
608 |
609 | .columngripDraging {
610 | border-left: 1px dotted black;
611 | }
612 |
613 | .rowgrips {
614 | height: 0px;
615 | width: 0px;
616 | position: absolute;
617 | }
618 |
619 | .rowgrip {
620 | margin-top: -5px;
621 | position: absolute;
622 | z-index: 5;
623 | height: 10px;
624 | }
625 |
626 | .rowgrip .gripResizer {
627 | position: absolute;
628 | filter: alpha(opacity=1);
629 | opacity: 0;
630 | height: 10px;
631 | width: 100%;
632 | cursor: row-resize;
633 | left: 0px;
634 | }
635 |
636 | .rowgripDraging {
637 | border-top: 1px dotted black;
638 | }
639 |
640 | .hitable .hitable-editor-text {
641 | border: 1px solid;
642 | width: 95%;
643 | height: 80%;
644 | }
645 |
646 |
647 |
648 |
649 | .hipanel-disable {
650 | height: 0px;
651 | display: block !important;
652 | top: 8500px;
653 | width: 0px;
654 | overflow: hidden;
655 | position: absolute;
656 | }
657 |
658 | .hiprint_rul_wrapper {
659 | position: absolute;
660 | height: 100%;
661 | width: 100%;
662 | overflow: hidden;
663 | pointer-events: none;
664 | border: 0;
665 | border-top: 1px solid rgb(201, 190, 190);
666 | border-left: 1px solid rgb(201, 190, 190);
667 | padding-left: 15px;
668 | margin: -16px
669 | }
670 |
671 | .hiprint_rul_wrapper .h_img {
672 | position: absolute;
673 | top: 0px;
674 | left: 15px;
675 | width: 400mm;
676 | height: 15px;
677 | }
678 |
679 | .hiprint_rul_wrapper .v_img {
680 | width: 400mm;
681 | transform: rotate(90deg);
682 | transform-origin: 0 100%;
683 | height: 15px;
684 | position: absolute;
685 | top: -2px;
686 | left: 0px;
687 | }
688 |
689 | /*hiprint-option-table*/
690 |
691 | .hiprint-option-table-selected-columns {
692 | color: inherit;
693 | background-color: transparent;
694 | box-sizing: border-box;
695 | width: 100%;
696 | position: relative;
697 | padding: 0px;
698 | list-style: none;
699 | }
700 |
701 | .hiprint-option-table-selected-columns .hiprint-option-table-selected-item {
702 | color: inherit;
703 | background-color: transparent;
704 | box-sizing: border-box;
705 | width: 100%;
706 | padding: 0 3px;
707 | border: 1px solid rgb(169, 169, 169);
708 | line-height: 19pt;
709 | margin: 3px 0;
710 | }
711 | /*hi-pretty */
712 | .hi-pretty * {
713 | box-sizing: border-box;
714 | }
715 |
716 | .hi-pretty input:not([type='checkbox']):not([type='radio']) {
717 | display: none;
718 | }
719 |
720 | .hi-pretty {
721 | position: relative;
722 | display: inline-block;
723 | margin-right: 1em;
724 | white-space: nowrap;
725 | line-height: 1;
726 | }
727 |
728 | .hi-pretty input {
729 | position: absolute;
730 | left: 0;
731 | top: 0;
732 | min-width: 1em;
733 | width: 100%;
734 | height: 100%;
735 | z-index: 2;
736 | opacity: 0;
737 | margin: 0;
738 | padding: 0;
739 | cursor: pointer;
740 | }
741 |
742 | .hi-pretty .state label {
743 | position: initial;
744 | display: inline-block;
745 | font-weight: normal;
746 | margin: 0;
747 | text-indent: 1.5em;
748 | min-width: calc(1em + 2px);
749 | }
750 |
751 | .hi-pretty .state label:before,
752 | .hi-pretty .state label:after {
753 | content: '';
754 | width: calc(1em + 2px);
755 | height: calc(1em + 2px);
756 | display: block;
757 | box-sizing: border-box;
758 | border-radius: 0;
759 | border: 1px solid transparent;
760 | z-index: 0;
761 | position: absolute;
762 | left: 0;
763 | top: calc((0% - (100% - 1em)) - 8%);
764 | background-color: transparent;
765 | }
766 |
767 | .hi-pretty .state label:before {
768 | border-color: #bdc3c7;
769 | }
770 |
771 | .hi-pretty .state.p-is-hover,
772 | .hi-pretty .state.p-is-indeterminate {
773 | display: none;
774 | }
775 |
776 |
777 | .hi-pretty.p-default.p-fill .state label:after {
778 | -webkit-transform: scale(1);
779 | -ms-transform: scale(1);
780 | transform: scale(1);
781 | }
782 |
783 | .hi-pretty.p-default .state label:after {
784 | -webkit-transform: scale(0.6);
785 | -ms-transform: scale(0.6);
786 | transform: scale(0.6);
787 | }
788 |
789 | .hi-pretty.p-default input:checked ~ .state label:after {
790 | background-color: #bdc3c7 !important;
791 | }
792 |
793 | .hi-pretty.p-default.p-thick .state label:before,
794 | .hi-pretty.p-default.p-thick .state label:after {
795 | border-width: calc(1em / 7);
796 | }
797 |
798 | .hi-pretty.p-default.p-thick .state label:after {
799 | -webkit-transform: scale(0.4) !important;
800 | -ms-transform: scale(0.4) !important;
801 | transform: scale(0.4) !important;
802 | }
803 |
--------------------------------------------------------------------------------