365 lines
12 KiB
JavaScript
365 lines
12 KiB
JavaScript
class PrintingPDFSample extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
pdfFile: null,
|
|
selectedPrinterIndex: 0,
|
|
installedPrinters: [],
|
|
printerName: "",
|
|
printerTrayName: "",
|
|
printerPaperName: "",
|
|
printAnnotations: false,
|
|
printAsGrayscale: false,
|
|
printInReverseOrder: false,
|
|
printRange: "",
|
|
printRotation: "None",
|
|
job: null
|
|
};
|
|
}
|
|
|
|
setPdfFile(event) {
|
|
//no need to re-render
|
|
if (event.target.name == "input-local-pdf-file")
|
|
this.state.pdfFile = Array.from(event.target.files);
|
|
else this.state.pdfFile = [event.target.value];
|
|
}
|
|
|
|
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();
|
|
}
|
|
f;
|
|
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.pdfFile) {
|
|
let myPdfFile;
|
|
|
|
if (this.state.pdfFile[0].name)
|
|
myPdfFile = new JSPM.PrintFilePDF(
|
|
this.state.pdfFile[0],
|
|
JSPM.FileSourceType.BLOB,
|
|
this.state.pdfFile[0].name,
|
|
1
|
|
);
|
|
else
|
|
myPdfFile = new JSPM.PrintFilePDF(
|
|
this.state.pdfFile[0],
|
|
JSPM.FileSourceType.URL,
|
|
"myFileToPrint.pdf",
|
|
1
|
|
);
|
|
|
|
myPdfFile.printAnnotations = this.state.printAnnotations;
|
|
myPdfFile.printAsGrayscale = this.state.printAsGrayscale;
|
|
myPdfFile.printInReverseOrder = this.state.printInReverseOrder;
|
|
myPdfFile.printRange = this.state.printRange;
|
|
myPdfFile.printRotation =
|
|
JSPM.PrintRotation[this.state.printRotation];
|
|
|
|
cpj.files.push(myPdfFile);
|
|
}
|
|
|
|
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>PDF File to print</strong>
|
|
<ul
|
|
className="nav nav-tabs"
|
|
id="myTabPdf"
|
|
role="tablist"
|
|
>
|
|
<li className="nav-item">
|
|
<a
|
|
className="nav-link active"
|
|
id="local-pdf-file-tab"
|
|
data-toggle="tab"
|
|
href="#local-pdf-file"
|
|
role="tab"
|
|
aria-controls="local-pdf-file"
|
|
aria-selected="true"
|
|
>
|
|
Local PDF File
|
|
</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a
|
|
className="nav-link"
|
|
id="remote-pdf-file-tab"
|
|
data-toggle="tab"
|
|
href="#remote-pdf-file"
|
|
role="tab"
|
|
aria-controls="remote-pdf-file"
|
|
aria-selected="false"
|
|
>
|
|
PDF File from URL
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div className="tab-content" id="myTabPdfContent">
|
|
<div
|
|
className="tab-pane fade show active"
|
|
id="local-pdf-file"
|
|
role="tabpanel"
|
|
aria-labelledby="local-pdf-file"
|
|
>
|
|
<br />
|
|
<input
|
|
name="input-local-pdf-file"
|
|
type="file"
|
|
className="form-control-file"
|
|
onChange={this.setPdfFile.bind(this)}
|
|
/>
|
|
</div>
|
|
<div
|
|
className="tab-pane fade"
|
|
id="remote-pdf-file"
|
|
role="tabpanel"
|
|
aria-labelledby="remote-pdf-file"
|
|
>
|
|
<br />
|
|
URL for PDF File
|
|
<input
|
|
name="input-file-url"
|
|
className="form-control form-control-sm"
|
|
onChange={this.setPdfFile.bind(this)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<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, i) {
|
|
let opt = (
|
|
<option key={i} 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, i) {
|
|
let opt = (
|
|
<option key={i} value={item}>
|
|
{item}
|
|
</option>
|
|
);
|
|
return opt;
|
|
})}
|
|
</select>
|
|
</div>
|
|
<div className="col-md-3">
|
|
<label>Print Rotation (Clockwise):</label>
|
|
<select
|
|
className="form-control form-control-sm"
|
|
name="printRotation"
|
|
onChange={this.setData.bind(this)}
|
|
>
|
|
<option>None</option>
|
|
<option>Rot90</option>
|
|
<option>Rot180</option>
|
|
<option>Rot270</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div className="row">
|
|
<div className="col-md-3">
|
|
<label>Pages Range: [e.g. 1,2,3,10-15]</label>
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm"
|
|
name="printRange"
|
|
onChange={this.setData.bind(this)}
|
|
/>
|
|
</div>
|
|
<div className="col-md-3">
|
|
<div className="checkbox">
|
|
<label>
|
|
<input
|
|
id="printInReverseOrder"
|
|
type="checkbox"
|
|
name="printInReverseOrder"
|
|
onChange={this.setData.bind(this)}
|
|
/>
|
|
Print In Reverse Order?
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-3">
|
|
<div className="checkbox">
|
|
<label>
|
|
<input
|
|
id="chkPrintAnnotations"
|
|
type="checkbox"
|
|
name="printAnnotations"
|
|
onChange={this.setData.bind(this)}
|
|
/>
|
|
Print Annotations?{" "}
|
|
<span className="badge badge-info">
|
|
Windows Only
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-3">
|
|
<div className="checkbox">
|
|
<label>
|
|
<input
|
|
id="chkPrintAsGrayscale"
|
|
type="checkbox"
|
|
name="printAsGrayscale"
|
|
onChange={this.setData.bind(this)}
|
|
/>
|
|
Print As Grayscale?{" "}
|
|
<span className="badge badge-info">
|
|
Windows Only
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 PDF 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-pdf-o" /> Advanced PDF
|
|
Printing
|
|
</h2>
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
|
|
{demoContent}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
window.PrintingPDFSample = PrintingPDFSample; |