Printer (#858)
* Add printer status listener. * Show printer status in popup. * Fix Status display. * Implement cancelJob(). * Correct script typos. * Add important keyword to CSS. * Refactor element pointers. * Rewrite callbacks to promises. * Fix CSS. * Fix variable name. * Move Print button to front of line. * Restore old style of submitJob(). * Fix bugs. * adding print job table along with cancel button (#847) * adding print job table along with cancel button * make cancel button hidden conditionally and scroll to buttom after print button is clicked * Fix spelling. * Update api-samples/printing/printers.js * Add README file. * Readme corrections. * Update api-samples/printing/README.md * Update api-samples/printing/README.md * Update api-samples/printing/README.md * Create an addCell() function. * Fix position of addCell(). * Rearange popup layout. * More rearranging. * Add a warning about the print job table. * Feedback from Patrick. * Lint and update strings. --------- Co-authored-by: rayxu-google <120415990+rayxu-google@users.noreply.github.com>
This commit is contained in:
Joe Medley
GitHub
Родитель
0c7e9b6dba
Коммит
d7f3d83a55
|
|
@ -0,0 +1,13 @@
|
|||
# chrome.printing
|
||||
|
||||
This sample demonstrates all four methods of the `chrome.printing` namespace.
|
||||
|
||||
## Overview
|
||||
|
||||
The `chrome.printing` namespace only works on ChromeOS. The sample demonstrates how to get a list of available printers and display it to a user. A 'Print' button sends a sample PDF to the selected printer and makes a 'Cancel Printing' visible. This button is visible while the print job's status is `"PENDING"` or `"IN_PROGRESS"`. Note that on some systems, the print job is passed to the printer so quickly that you may never see the 'Cancel Printing' button.
|
||||
|
||||
If the extension is not listed in [`PrintingAPIExtensionsAllowlist`](https://chromeenterprise.google/policies/#PrintingAPIExtensionsAllowlist) policy, the user will be prompted to accept the print job.
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
Note that the `submitJob()` function throws an error when returning a promise ([crbug: 1422837](https://bugs.chromium.org/p/chromium/issues/detail?id=1422837)).
|
||||
|
|
@ -12,7 +12,26 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h2>Print Job:</h2>
|
||||
<p>On some systems, the print job may leave the queue too quickly to be visible in this list.</p>
|
||||
<div id="printJob">
|
||||
<table id="printJobTable">
|
||||
<thread>
|
||||
<tr>
|
||||
<th>Cancel</th>
|
||||
<th>Job Id</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thread>
|
||||
<tbody id="printJobTbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Printers:</h2>
|
||||
<div id="statusDiv">
|
||||
<p id="jobStatus">JobId: <div id="jobIdDiv"></div></p>
|
||||
<button id="cancelBtn">Cancel Printing</button>
|
||||
</div>
|
||||
<div id="printers">
|
||||
<table id="printersTable">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -44,24 +44,40 @@ function onPrintButtonClicked(printerId, dpi) {
|
|||
if (chrome.runtime.lastError !== undefined) {
|
||||
console.log(chrome.runtime.lastError.message);
|
||||
}
|
||||
window.scrollTo(0, document.body.scrollHeight);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function createPrintButton(onClicked) {
|
||||
function onCancelButtonClicked(jobId) {
|
||||
chrome.printing.cancelJob(jobId).then((response) => {
|
||||
if (response !== undefined) {
|
||||
console.log(response.status);
|
||||
}
|
||||
if (chrome.runtime.lastError !== undefined) {
|
||||
console.log(chrome.runtime.lastError.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createButton(label, onClicked) {
|
||||
const button = document.createElement('button');
|
||||
button.innerHTML = 'Print';
|
||||
button.innerHTML = label;
|
||||
button.onclick = onClicked;
|
||||
return button;
|
||||
}
|
||||
|
||||
function createPrintersTable() {
|
||||
chrome.printing.getPrinters(function (printers) {
|
||||
const tbody = document.createElement('tbody');
|
||||
function addCell(parent) {
|
||||
const newCell = document.createElement('td');
|
||||
parent.appendChild(newCell);
|
||||
return newCell;
|
||||
}
|
||||
|
||||
for (let i = 0; i < printers.length; ++i) {
|
||||
const printer = printers[i];
|
||||
chrome.printing.getPrinterInfo(printer.id, function (response) {
|
||||
function createPrintersTable() {
|
||||
chrome.printing.getPrinters().then((printers) => {
|
||||
const tbody = document.createElement('tbody');
|
||||
printers.forEach((printer) => {
|
||||
chrome.printing.getPrinterInfo(printer.id).then((printerInfo) => {
|
||||
const columnValues = [
|
||||
printer.id,
|
||||
printer.name,
|
||||
|
|
@ -70,11 +86,23 @@ function createPrintersTable() {
|
|||
printer.source,
|
||||
printer.isDefault,
|
||||
printer.recentlyUsedRank,
|
||||
JSON.stringify(response.capabilities),
|
||||
response.status
|
||||
JSON.stringify(printerInfo.capabilities),
|
||||
printerInfo.status
|
||||
];
|
||||
|
||||
let tr = document.createElement('tr');
|
||||
const printTd = document.createElement('td');
|
||||
printTd.appendChild(
|
||||
createButton('Print', () => {
|
||||
onPrintButtonClicked(
|
||||
printer.id,
|
||||
printerInfo.capabilities.printer.dpi.option[0]
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
tr.appendChild(printTd);
|
||||
|
||||
for (const columnValue of columnValues) {
|
||||
const td = document.createElement('td');
|
||||
td.appendChild(document.createTextNode(columnValue));
|
||||
|
|
@ -82,26 +110,44 @@ function createPrintersTable() {
|
|||
tr.appendChild(td);
|
||||
}
|
||||
|
||||
const printTd = document.createElement('td');
|
||||
printTd.appendChild(
|
||||
createPrintButton(function () {
|
||||
onPrintButtonClicked(
|
||||
printer.id,
|
||||
response.capabilities.printer.dpi.option[0]
|
||||
);
|
||||
})
|
||||
);
|
||||
tr.appendChild(printTd);
|
||||
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
const table = document.getElementById('printersTable');
|
||||
table.appendChild(tbody);
|
||||
});
|
||||
|
||||
chrome.printing.onJobStatusChanged.addListener((jobId, status) => {
|
||||
console.log(`jobId: ${jobId}, status: ${status}`);
|
||||
let jobTr = document.getElementById(jobId);
|
||||
if (jobTr == undefined) {
|
||||
jobTr = document.createElement('tr');
|
||||
jobTr.setAttribute('id', jobId);
|
||||
|
||||
const cancelTd = addCell(jobTr);
|
||||
let cancelBtn = createButton('Cancel', () => {
|
||||
onCancelButtonClicked(jobId);
|
||||
});
|
||||
cancelBtn.setAttribute(`id ${jobId}-cancelBtn`);
|
||||
cancelTd.appendChild(cancelBtn);
|
||||
|
||||
const jobIdTd = addCell(jobTr);
|
||||
jobIdTd.appendChild(document.createTextNode(jobId));
|
||||
|
||||
let jobStatusTd = addCell(jobTr);
|
||||
jobStatusTd.id = `${jobId}-status`;
|
||||
jobStatusTd.appendChild(document.createTextNode(status));
|
||||
|
||||
document.getElementById('printJobTbody').appendChild(jobTr);
|
||||
} else {
|
||||
document.getElementById(`jobId${-status}`).innerText = status;
|
||||
if (status !== 'PENDING' && status !== 'IN_PROGRESS') {
|
||||
jobTr.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
createPrintersTable();
|
||||
});
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче