sc

src/utils/index.ts

@@ -220,3 +220,30 @@ export const removeNullField = (obj: Object) => {
   }
   return obj
 }
+
+import * as XLSX from 'xlsx'
+import * as FileSaver from 'file-saver'
+export const exportTableWithVue = (domId: any, fileName: String) => {
+  // const XLSX = require('xlsx')
+  // 使用 this.$nextTick 是在dom元素都渲染完成之后再执行
+  // this.$nextTick(function () {
+  // 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析
+  const xlsxParam = { raw: true }
+  const wb = XLSX.utils.table_to_book(document.querySelector(domId), xlsxParam)
+
+  const wbout = XLSX.write(wb, {
+    bookType: 'xlsx',
+    bookSST: true,
+    type: 'array'
+  })
+  try {
+    // 下载保存文件
+    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${fileName}.xlsx`)
+  } catch (e) {
+    if (typeof console !== 'undefined') {
+      console.log(e, wbout)
+    }
+  }
+  return wbout
+  // });
+}

src/views/OKR/Analysis/index.vue

@@ -12,6 +12,7 @@
         @change="nodeChange"
       />
       <div class="flex justify-end flex-1">
+        <el-button type="info" @click="handleExport">导出</el-button>
         <el-popover
           ref="countRef"
           placement="left"
@@ -42,6 +43,7 @@
     </el-row>
 
     <el-table
+      id="okrAnalysisTable"
       :data="originList"
       border
       :span-method="objectSpanMethod"
@@ -274,6 +276,7 @@ import {
   getCommentPage,
   likeComment
 } from '@/api/okr/comment'
+import { exportTableWithVue } from '@/utils'
 
 const message = useMessage()
 const defaultProps = {
@@ -541,6 +544,10 @@ function handleSaveComment() {
     message.error('创建失败')
   }
 }
+
+function handleExport() {
+  exportTableWithVue('#okrAnalysisTable', `OKR分析报表-${currentNode.value.nodeName}`)
+}
 </script>
 
 <style lang="scss" scoped></style>