Auto Commit

src/components/SearchGrade.vue

@@ -4,9 +4,11 @@ import Author from './Author.vue'
 import { tableColumns } from './const'
 import { getRemoteCsdnGrade } from '../service/csdnApi'
 import { onMounted, reactive, onUnmounted } from 'vue';
+import { exportExcel } from './writeExcel'
 const state = reactive({
-  title:'csdn用户根据id快速查分数改文章',
+  title: 'csdn用户根据id快速查分数改文章',
   loading: false,
+  exportLoading: false,
   searchValue: localStorage.getItem('csdnUid') || '',
   firstChart: null,
   columns: tableColumns,
@@ -152,8 +154,8 @@ function initFirstData() {
                 show: true,
                 position: 'middle',
                 color: 'red',
-                lineHeight:35,
-                backgroundColor:'rgba(255,255,255.7)',
+                lineHeight: 35,
+                backgroundColor: 'rgba(255,255,255.7)',
                 formatter: (params) => {
                   console.log('params markline', params)
                   return params.name + ":" + params.value
@@ -184,6 +186,17 @@ function initFirstData() {
     }
   });
 
+  const exportTableDataFunc = () => {
+    if (!state.dataSource || state.dataSource.length === 0) {
+      return window.alert('表格数据为空')
+    }
+    state.exportLoading = true
+    exportExcel(state.dataSource, '用户质量分').then(res => {
+      state.exportLoading = false
+      console.log('res', res)
+    })
+  }
+
   onMounted(() => {
     const storageUid = localStorage.getItem('csdnUid')
     console.log('window.localStorage', localStorage)
@@ -215,6 +228,7 @@ function initFirstData() {
       onSearch()
     }
   })
+
 }
 </script>
 
@@ -231,8 +245,8 @@ function initFirstData() {
       <div style="width:100px;line-height: 32px;">csdn用户id：</div><a-input-search v-model:value="state.searchValue"
         :disabled="state.loading" placeholder="输入用户id(如 qq_38870145)" enter-button @search="onSearch" />
     </div>
-
-    <br>
+    <a-button type="primary" @click="exportTableDataFunc" style="margin: 10px 0;" :loading="state.exportLoading">
+      导出 </a-button>
     <div>
       <a-table :scroll="{ x: 800, y: 600 }" :columns="state.columns" :data-source="state.dataSource"
         :loading="state.loading" :pagination="state.pagination" bordered style="border-bottom:1px solid #f0f0f0;">
@@ -242,11 +256,18 @@ function initFirstData() {
               {{ record.url }}
             </a>
           </template>
-          <template v-if="column.key === 'option'">
+          <template v-else-if="column.key === 'score'">
+            <span>
+              <a-tag :color="record.score < 60 ? 'volcano' : record.score > 80 ? 'geekblue' : 'green'">
+                {{ record.score }}
+              </a-tag>
+            </span>
+          </template>
+          <template v-else-if="column.key === 'option'">
             <a-tooltip placement="topLeft" :title="record.editUrl">
-            <a :href="record.editUrl" target="_blank">
-              编辑文章
-            </a>
+              <a :href="record.editUrl" target="_blank">
+                编辑文章
+              </a>
             </a-tooltip>
           </template>
         </template>

src/components/const.js

 export const tableColumns= [
   {
-    title: '序号',
-    dataIndex: 'index',
-    fixed: true
-  }, {
     title: '文章名称',
     dataIndex: 'title',
     fixed: true
@@ -28,7 +24,7 @@ export const tableColumns= [
     sorter: (a, b) => a.diggCount - b.diggCount,
   },{
     title: '质量分',
-    dataIndex: 'score',
+    key: 'score',
     sorter: (a, b) => a.score - b.score,
   }, {
     title: '发文时间',
@@ -39,6 +35,5 @@ export const tableColumns= [
     dataIndex: 'message',
   }, {
     title: '操作',
-    key: 'option',
-    fixed: true
+    key: 'option'
   }]
\ No newline at end of file

src/components/writeExcel.js

+// 输出base64编码
+const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
+const tableToExcel = async (jsonData) => {
+    return new Promise(resolve => {
+        try {
+            console.log('start', jsonData)
+            let str = '<tr>'
+            Object.keys(jsonData[0]).forEach(name => {
+                const tdStr = `<tr>${name}</td>`
+                str += tdStr
+            })
+            str += '</tr>'
+            for (let i = 0; i < jsonData.length; i++) {
+                str += '<tr>';
+                for (const key in jsonData[i]) {
+                    // 增加\t为了不让表格显示科学计数法或者其他格式
+                    str += `<td>${jsonData[i][key] + '\t'}</td>`;
+                }
+                str += '</tr>';
+            }
+            // Worksheet名
+            const worksheet = '用户质量分'
+            const uri = 'data:application/vnd.ms-excel;base64,';
+            // 下载的表格模板数据
+            const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" 
+    xmlns:x="urn:schemas-microsoft-com:office:excel" 
+    xmlns="http://www.w3.org/TR/REC-html40">
+    <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
+    <x:Name>${worksheet}</x:Name>
+    <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
+    </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
+    <meta charset='utf-8' />
+    </head><body><table>${str}</table></body></html>`;
+            console.log('str', str)
+            // 下载模板
+            window.location.href = uri + base64(template);
+            resolve(true)
+        }
+        catch (r) {
+            console.log(r, 'r')
+            resolve(false)
+        }
+    })
+};
+
+
+export  async function exportExcel(tableData) {
+    return new Promise(async (resolve) => {
+        try {
+            await tableToExcel(tableData)
+            resolve(true)
+        }
+        catch (r) {
+            console.log(r, 'r')
+            resolve(false)
+        }
+    })
+}
\ No newline at end of file