first commit
This commit is contained in:
@@ -0,0 +1,419 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user