419 lines
13 KiB
JavaScript
419 lines
13 KiB
JavaScript
class PrintingTXTSample extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
txtContent: null,
|
|
selectedPrinterIndex: 0,
|
|
installedPrinters: [],
|
|
printerName: "",
|
|
printerTrayName: "",
|
|
printerPaperName: "",
|
|
fontName: "Arial",
|
|
fontSize: 8,
|
|
fontBold: false,
|
|
fontItalic: false,
|
|
fontUnderline: false,
|
|
fontStrikethrough: false,
|
|
textAlign: "Left",
|
|
fontColor: "#000000",
|
|
printOrientation: "Portrait",
|
|
job: null
|
|
};
|
|
}
|
|
|
|
setInstalledPrinters(printersList) {
|
|
this.setState({ installedPrinters: printersList });
|
|
this.state.printerName = printersList[0].name;
|
|
this.updatePrintJob();
|
|
}
|
|
|
|
setPrinterState(event) {
|
|
this.setState({ selectedPrinterIndex: event.target.value });
|
|
this.state.printerName = this.state.installedPrinters[
|
|
event.target.value
|
|
].name;
|
|
this.updatePrintJob();
|
|
}
|
|
|
|
setData(event) {
|
|
//no need for re-render
|
|
this.state[event.target.name] = event.target.checked
|
|
? event.target.checked
|
|
: event.target.value;
|
|
this.updatePrintJob();
|
|
}
|
|
|
|
setFontStyle(event) {
|
|
//no need for re-render
|
|
var val = event.currentTarget.classList.contains("active");
|
|
var name = event.currentTarget.querySelector("input").name;
|
|
this.state[name] = val;
|
|
this.updatePrintJob();
|
|
}
|
|
|
|
setTextAlign(event) {
|
|
//no need for re-render
|
|
var val = event.currentTarget.classList.contains("active");
|
|
var name = event.currentTarget.querySelector("input").name;
|
|
var textAlign = "Left";
|
|
if (val && name == "CenterAlign") textAlign = "Center";
|
|
if (val && name == "RightAlign") textAlign = "Right";
|
|
if (val && name == "JustifyAlign") textAlign = "Justify";
|
|
this.state["textAlign"] = textAlign;
|
|
this.updatePrintJob();
|
|
}
|
|
|
|
updatePrintJob() {
|
|
//no need to re-render
|
|
let cpj = new JSPM.ClientPrintJob();
|
|
cpj.clientPrinter = new JSPM.InstalledPrinter(this.state.printerName, false, this.state.printerTrayName, this.state.printerPaperName);
|
|
|
|
if (this.state.txtContent) {
|
|
let myTxtFile = new JSPM.PrintFileTXT(
|
|
this.state.txtContent,
|
|
"myFileToPrint.txt",
|
|
1
|
|
);
|
|
|
|
myTxtFile.textAligment = JSPM.TextAlignment[this.state.textAlign];
|
|
myTxtFile.fontName = this.state.fontName;
|
|
myTxtFile.fontBold = this.state.fontBold;
|
|
myTxtFile.fontItalic = this.state.fontItalic;
|
|
myTxtFile.fontUnderline = this.state.fontUnderline;
|
|
myTxtFile.fontStrikethrough = this.state.fontStrikethrough;
|
|
myTxtFile.fontSize = this.state.fontSize;
|
|
myTxtFile.fontColor = this.state.fontColor;
|
|
myTxtFile.printOrientation =
|
|
JSPM.PrintOrientation[this.state.printOrientation];
|
|
|
|
cpj.files.push(myTxtFile);
|
|
}
|
|
|
|
this.state.job = cpj;
|
|
}
|
|
|
|
componentDidMount() {
|
|
//get client installed printers with detailed info
|
|
JSPM.JSPrintManager.Caller = this;
|
|
JSPM.JSPrintManager.getPrintersInfo().then(function(printersList) {
|
|
JSPM.JSPrintManager.Caller.setInstalledPrinters(printersList);
|
|
});
|
|
}
|
|
|
|
doPrinting() {
|
|
if (this.state.job) {
|
|
let cpj = this.state.job;
|
|
cpj.sendToClient();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
let demoContent;
|
|
|
|
if (this.state.installedPrinters.length == 0) {
|
|
demoContent = (
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="text-center">
|
|
<img src="loading.gif" id="loadingPrintersInfo" />
|
|
<br />
|
|
<strong>Getting printers info...</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} else {
|
|
demoContent = (
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="form-group">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<strong>Enter Text to print</strong>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<div className="btn-toolbar" role="toolbar">
|
|
<div className="btn-group btn-group-sm" role="group">
|
|
<select
|
|
className="form-control form-control-sm"
|
|
name="fontName"
|
|
onChange={this.setData.bind(this)}
|
|
>
|
|
<option>Arial</option>
|
|
<option>Courier New</option>
|
|
<option>Comic Sans MS</option>
|
|
<option>Verdana</option>
|
|
</select>
|
|
</div>
|
|
<div className="btn-group btn-group-sm" role="group">
|
|
<select
|
|
className="form-control form-control-sm"
|
|
name="fontSize"
|
|
onChange={this.setData.bind(this)}
|
|
>
|
|
<option>8</option>
|
|
<option>10</option>
|
|
<option>12</option>
|
|
<option>14</option>
|
|
<option>16</option>
|
|
</select>
|
|
</div>
|
|
<div
|
|
className="btn-group-toggle btn-group-sm"
|
|
data-toggle="buttons"
|
|
>
|
|
<label
|
|
className="btn btn-light"
|
|
onClick={this.setFontStyle.bind(this)}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
autoComplete="off"
|
|
name="fontBold"
|
|
/>
|
|
<i className="fa fa-bold" aria-hidden="true" />
|
|
</label>
|
|
<label
|
|
className="btn btn-light"
|
|
onClick={this.setFontStyle.bind(this)}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
autoComplete="off"
|
|
name="fontItalic"
|
|
/>
|
|
<i className="fa fa-italic" aria-hidden="true" />
|
|
</label>
|
|
<label
|
|
className="btn btn-light"
|
|
onClick={this.setFontStyle.bind(this)}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
autoComplete="off"
|
|
name="fontUnderline"
|
|
/>
|
|
<i
|
|
className="fa fa-underline"
|
|
aria-hidden="true"
|
|
/>
|
|
</label>
|
|
<label
|
|
className="btn btn-light"
|
|
onClick={this.setFontStyle.bind(this)}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
autoComplete="off"
|
|
name="fontStrikethrough"
|
|
/>
|
|
<i
|
|
className="fa fa-strikethrough"
|
|
aria-hidden="true"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div
|
|
className="btn-group btn-group-sm btn-group-toggle"
|
|
data-toggle="buttons"
|
|
>
|
|
<label
|
|
className="btn btn-light active"
|
|
onClick={this.setTextAlign.bind(this)}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="LeftAlign"
|
|
autoComplete="off"
|
|
defaultChecked
|
|
/>
|
|
<i
|
|
className="fa fa-align-left"
|
|
aria-hidden="true"
|
|
/>
|
|
</label>
|
|
<label
|
|
className="btn btn-light"
|
|
onClick={this.setTextAlign.bind(this)}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="CenterAlign"
|
|
autoComplete="off"
|
|
/>
|
|
<i
|
|
className="fa fa-align-center"
|
|
aria-hidden="true"
|
|
/>
|
|
</label>
|
|
<label
|
|
className="btn btn-light"
|
|
onClick={this.setTextAlign.bind(this)}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="RightAlign"
|
|
autoComplete="off"
|
|
/>
|
|
<i
|
|
className="fa fa-align-right"
|
|
aria-hidden="true"
|
|
/>
|
|
</label>
|
|
<label
|
|
className="btn btn-light"
|
|
onClick={this.setTextAlign.bind(this)}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="JustifyAlign"
|
|
autoComplete="off"
|
|
/>
|
|
<i
|
|
className="fa fa-align-justify"
|
|
aria-hidden="true"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div className="btn-group btn-group-sm" role="group">
|
|
<input
|
|
type="color"
|
|
name="fontColor"
|
|
defaultValue="#000000"
|
|
onChange={this.setData.bind(this)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<textarea
|
|
className="form-control form-control-sm"
|
|
name="txtContent"
|
|
onChange={this.setData.bind(this)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<strong>Target Printer</strong>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-md-3">
|
|
<label>Printer:</label>
|
|
<select
|
|
className="form-control form-control-sm"
|
|
onChange={this.setPrinterState.bind(this)}
|
|
>
|
|
{this.state.installedPrinters.map(function(item, i) {
|
|
let opt = (
|
|
<option key={i} value={i}>
|
|
{item.name}
|
|
</option>
|
|
);
|
|
return opt;
|
|
})}
|
|
</select>
|
|
</div>
|
|
<div className="col-md-3">
|
|
<label>Tray:</label>
|
|
<select
|
|
className="form-control form-control-sm"
|
|
name="printerTrayName"
|
|
onChange={this.setData.bind(this)}
|
|
>
|
|
{this.state.installedPrinters[
|
|
this.state.selectedPrinterIndex
|
|
].trays.map(function(item) {
|
|
let opt = (
|
|
<option key={item} value={item}>
|
|
{item}
|
|
</option>
|
|
);
|
|
return opt;
|
|
})}
|
|
</select>
|
|
</div>
|
|
<div className="col-md-3">
|
|
<label>Paper:</label>
|
|
<select
|
|
className="form-control form-control-sm"
|
|
name="printerPaperName"
|
|
onChange={this.setData.bind(this)}
|
|
>
|
|
{this.state.installedPrinters[
|
|
this.state.selectedPrinterIndex
|
|
].papers.map(function(item) {
|
|
let opt = (
|
|
<option key={item} value={item}>
|
|
{item}
|
|
</option>
|
|
);
|
|
return opt;
|
|
})}
|
|
</select>
|
|
</div>
|
|
<div className="col-md-3">
|
|
<label>Print Orientation:</label>
|
|
<select
|
|
className="form-control form-control-sm"
|
|
name="printRotation"
|
|
onChange={this.setData.bind(this)}
|
|
>
|
|
<option>Portrait</option>
|
|
<option>Landscape</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<br />
|
|
<div className="text-center">
|
|
<button
|
|
className="btn btn-success btn-lg"
|
|
onClick={this.doPrinting.bind(this)}
|
|
>
|
|
<i className="fa fa-print" /> Print Text Now...
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="row">
|
|
<div className="col-md-1">
|
|
<button
|
|
className="btn btn-dark btn-lg"
|
|
onClick={() => this.props.setSample(0)}
|
|
>
|
|
<i className="fa fa-arrow-left" />
|
|
</button>
|
|
</div>
|
|
<div className="col-md-11">
|
|
<h2 className="text-center">
|
|
<i className="fa fa-file-text-o" /> Advanced TXT
|
|
Printing
|
|
</h2>
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
|
|
{demoContent}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
window.PrintingTXTSample = PrintingTXTSample; |