feat: Copy rows as html table, so we can paste it to spreadsheet

This commit is contained in:
Dyas🍌 Yaskur🍎 2022-12-19 05:33:50 +07:00
parent 1bd26ceaa6
commit c32f463ea5
No known key found for this signature in database
GPG Key ID: D78DB836A5211DE1
2 changed files with 41 additions and 0 deletions

View File

@ -465,6 +465,42 @@ const copyRow = (format: string) => {
navigator.clipboard.writeText(csv.join('\n')); navigator.clipboard.writeText(csv.join('\n'));
} }
else if (format === 'html') {
const arrayContent = new Array<string[]>();
if (!Array.isArray(contentToCopy)) contentToCopy = [contentToCopy];
for (const row of contentToCopy)
arrayContent.push(Object.values(row));
const htmlContent = createHtmlTable(arrayContent);
const htmlBlob = new Blob([htmlContent.outerHTML], { type: 'text/html' });
const textBlob = new Blob([arrayContent.map(row => row.join(' ')).join('\n')], { type: 'text/plain' });
const data = [new ClipboardItem({
'text/plain': textBlob,
'text/html': htmlBlob
})];
navigator.clipboard.write(data);
}
};
const createHtmlTable = (tableData: Array<string[]>) => {
const table = document.createElement('table');
const tableBody = document.createElement('tbody');
tableData.forEach(function (rowData: Array<string>) {
const row = document.createElement('tr');
rowData.forEach(function (cellData: string) {
const cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
return table;
}; };
const fillCell = (event: { name: string; group: string; type: string }) => { const fillCell = (event: { name: string; group: string; type: string }) => {

View File

@ -16,6 +16,11 @@
<i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('word.cell', 1) }} <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('word.cell', 1) }}
</span> </span>
</div> </div>
<div class="context-element" @click="copyRow('html')">
<span class="d-flex">
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (Table)
</span>
</div>
<div class="context-element" @click="copyRow('json')"> <div class="context-element" @click="copyRow('json')">
<span class="d-flex"> <span class="d-flex">
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (JSON) <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (JSON)