Web Components Colar de grade do Excel
O Ignite UI for Web Components IgcGridComponent pode ler dados do Excel copiados para a área de transferência. Nesta seção, mostraremos como fazer isso com algum código personalizado.
Web Components Paste from Excel Example
Este exemplo demonstra como implementar a colagem do Excel na tabela Material IgcGridComponent UI Para trabalhar com o exemplo, abra qualquer planilha do Excel, copie algumas linhas e cole-as na grade usando o teclado (Ctrl + V, Shift + Insert, Command + V).
Na parte superior, há um botão suspenso com 2 opções:
- "Colar dados como novas linhas" – neste modo, todos os dados copiados do Excel serão anexados à grade como novas linhas
- "Colar a partir da célula ativa" – neste modo, os dados na grade serão substituídos.
Os novos dados após a colagem são decorados em itálico.
Usage
Primeiro, você deve associar ao evento da rendered grade para criar e gerenciar um elemento de área de texto:
<igc-grid auto-generate="false" name="grid" id="grid" primary-key="OrderID">
<igc-grid-toolbar>
<igc-grid-toolbar-actions >
<igc-grid-toolbar-exporter export-excel="true" export-csv="false"> </igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column field="OrderID" hidden="true"></igc-column>
<igc-column field="Salesperson" header="Name" width="200px"></igc-column>
<igc-column field="ShipName" header="Ship Name" width="200px"></igc-column>
<igc-column field="Country" header="Country" width="200px"></igc-column>
<igc-column field="ShipCity" header="Ship City" width="200px"></igc-column>
<igc-column field="PostalCode" header="Postal Code" width="200px"> </igc-column>
</igc-grid>
public webGridPasteFromExcel() {
const grid = document.getElementById("grid") as any;
this.onKeyDown = this.onKeyDown.bind(this);
grid.addEventListener("keydown", this.onKeyDown);
}
public onKeyDown(eventArgs: any): void {
const ctrl = eventArgs.ctrlKey;
const key = eventArgs.keyCode;
// Ctrl-V || Shift-Ins || Cmd-V
if ((ctrl || eventArgs.metaKey) && key === 86 || eventArgs.shiftKey && key === 45) {
this.textArea.focus();
}
}
private txtArea: any;
public get textArea() {
if(!this.txtArea) {
const div = document.createElement("div");
const divStyle = div.style;
divStyle.position = "fixed";
document.body.appendChild(div);
this.txtArea = document.createElement("textarea");
const style = this.txtArea.style;
style.opacity = "0";
style.height = "0px";
style.width = "0px";
style.overflow = "hidden";
div.appendChild(this.txtArea);
this.txtArea.addEventListener("paste", (eventArgs: any) => { this.onPaste(eventArgs); });
}
return this.txtArea;
}
O código cria um elemento textarea DOM que é usado para receber os dados colados da área de transferência. Quando os dados são colados na área de texto, o código os analisa em uma matriz.
public onPaste(eventArgs: any) {
let data;
const clData: any = "clipboardData";
// get clipboard data - from window.cliboardData for IE or from the original event's arguments.
if (window[clData] as any) {
(window.event as any).returnValue = false;
data = (window[clData] as any).getData("text");
} else {
data = eventArgs[clData].getData("text/plain");
}
// process the clipboard data
const processedData = this.processData(data);
if (this.pasteMode === "Paste data as new records") {
this.addRecords(processedData);
} else {
this.updateRecords(processedData);
}
}
public processData(data: any) {
const pasteData = data.split("\n");
for (let i = 0; i < pasteData.length; i++) {
pasteData[i] = pasteData[i].split("\t");
// Check if last row is a dummy row
if (pasteData[pasteData.length - 1].length === 1 && pasteData[pasteData.length - 1][0] === "") {
pasteData.pop();
}
// remove empty data
if (pasteData.length === 1 &&
pasteData[0].length === 1 &&
(pasteData[0][0] === "" || pasteData[0][0] === "\r")) {
pasteData.pop();
}
}
return pasteData;
}
Os dados colados podem ser adicionados como novos registros ou usados para atualizar os registros existentes com base na seleção do usuário. Para referência, consulte os métodos addRecords e updateRecords.
public addRecords(processedData: any[]) {
const grid = this.grid as any;
const columns = grid.visibleColumns;
const pk = grid.primaryKey;
const addedData: any[] = [];
for (const curentDataRow of processedData) {
const rowData = {} as any;
for (const col of columns) {
const index = columns.indexOf(col);
rowData[col.field] = curentDataRow[index];
}
// generate PK
rowData[pk] = grid.data.length + 1;
grid.addRow(rowData);
addedData.push(rowData);
}
// scroll to last added row
grid.navigateTo(grid.data.length - 1, 0, () => {
this.clearStyles();
for (const data of addedData) {
const row = grid.getRowByKey(data[pk]);
if (row) {
const rowNative = this.getNative(row) as any;
if (rowNative) {
rowNative.style["font-style"] = "italic";
rowNative.style.color = "gray";
}
}
}
});
}
public updateRecords(processedData: any[]) {
const grid = this.grid as any;
const cell = grid.selectedCells[0];
const pk = grid.primaryKey;
if (!cell) { return; }
const rowIndex = cell.row.index;
const columns = grid.visibleColumns;
const cellIndex = grid.visibleColumns.indexOf(cell.column);
let index = 0;
const updatedRecsPK: any[] = [];
for (const curentDataRow of processedData) {
const rowData = {} as any;
const dataRec = grid.data[rowIndex + index];
const rowPkValue = dataRec ? dataRec[pk] : grid.data.length + 1;
rowData[pk] = rowPkValue;
for (let j = 0; j < columns.length; j++) {
let currentCell;
if (j >= cellIndex) {
currentCell = curentDataRow.shift();
}
const colKey = columns[j].field;
rowData[colKey] = currentCell || (dataRec ? dataRec[colKey] : null);
}
if (!dataRec) {
// no rec to update, add instead
rowData[pk] = rowPkValue;
grid.addRow(rowData);
continue;
}
grid.updateRow(rowData, rowPkValue);
updatedRecsPK.push(rowPkValue);
index++;
}
this.clearStyles();
for (const pkVal of updatedRecsPK) {
const row = grid.getRowByKey(pkVal);
if (row) {
const rowNative = this.getNative(row) as any;
if (rowNative) {
rowNative.style["font-style"] = "italic";
rowNative.style.color = "gray";
}
}
}
}
API References
Additional Resources
- Exportador do Excel- Use o serviço Exportador do Excel para exportar dados do Excel do Grid. Ele também oferece a opção de exportar apenas os dados selecionados da Grade. A funcionalidade de exportação é encapsulada na classe ExcelExporterService e os dados são exportados no formato de tabela do MS Excel. Este formato permite recursos como filtragem, classificação, etc. Para fazer isso, você precisa invocar o método de exportação do ExcelExporterService e passar o componente Grid como primeiro argumento.
Nossa comunidade é ativa e sempre acolhedora para novas ideias.