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

antares-sql · Dec 18, 2022 · c32f463 · c32f463
1 parent 1bd26ce
commit c32f463
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/src/renderer/components/WorkspaceTabQueryTable.vue b/src/renderer/components/WorkspaceTabQueryTable.vue
@@ -465,6 +465,42 @@ const copyRow = (format: string) => {
 
       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 }) => {

diff --git a/src/renderer/components/WorkspaceTabQueryTableContext.vue b/src/renderer/components/WorkspaceTabQueryTableContext.vue
@@ -16,6 +16,11 @@
                   <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('word.cell', 1) }}
                </span>
             </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')">
                <span class="d-flex">
                   <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (JSON)