导出表格

public/index.html

@@ -32,6 +32,8 @@
     <script src="/librarys/echarts@5.4.3/echarts.min.js"></script>
     <script src="/librarys/echarts-liquidfill@3.1.0/echarts-liquidfill.min.js"></script>
     <script src="/librarys/echarts-wordcloud@2.1.0/echarts-wordcloud.min.js"></script>
+    <script src="/librarys/xlsx/xlsx-style.full.min.js"></script>
+    <script src="/librarys/xlsx/xlsx.extendscript.js"></script>
     <script src="./librarys/clipboard@2.0.11/clipboard.js"></script>
     <script src="/ckeditor_4.16.2_full/ckeditor.js"></script>
   </body>

src/api/log.js

@@ -58,7 +58,22 @@ export const logAppStart_add = (data) => setRequest("logAppStart/add", data);
 export const logAppStart_list_install = (data) =>
   setRequest("logAppStart/list_install", data);
 /**
- * 7.9.1 设备导出-列表
+ * 7.9.1 设备导出-列表(平台、区域)
  */
 export const logDeviceBind_list = (data) =>
   setRequest("logDeviceBind/list", data);
+/**
+ * 7.9.2 设备导出-列表导出(平台、区域)
+ */
+export const logDeviceBind_list_all = (data) =>
+  setRequest("logDeviceBind/list_all", data);
+/**
+ * 7.9.3 设备导出-用户导出
+ */
+export const logDeviceBind_list_user = (data) =>
+  setRequest("logDeviceBind/list_user", data);
+/**
+ * 7.9.4 设备导出-列表学校
+ */
+export const logDeviceBind_list_school = (data) =>
+  setRequest("logDeviceBind/list_school", data);

src/utils/exportToExcel.js

@@ -0,0 +1,74 @@
+import XLSX2 from "xlsx";
+import XLSX from "xlsx-style";
+const workbook2blob = (workbook) => {
+  // 生成excel的配置项
+  let wopts = {
+    // 要生成的文件类型
+    bookType: "xlsx",
+    // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
+    bookSST: false,
+    type: "binary"
+  };
+  let wbout = XLSX.write(workbook, wopts);
+  // 将字符串转ArrayBuffer
+  function s2ab(s) {
+    let buf = new ArrayBuffer(s.length);
+    let view = new Uint8Array(buf);
+    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+    return buf;
+  }
+  let buf = s2ab(wbout);
+  let blob = new Blob([buf], {
+    type: "application/octet-stream"
+  });
+  return blob;
+};
+// 将blob对象 创建bloburl,然后用a标签实现弹出下载框
+const openDownloadDialog = (blob, fileName) => {
+  if (typeof blob === "object" && blob instanceof Blob) {
+    blob = URL.createObjectURL(blob); // 创建blob地址
+  }
+  let aLink = document.createElement("a");
+  aLink.href = blob;
+  // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
+  aLink.download = fileName || "";
+  let event;
+  if (window.MouseEvent) event = new MouseEvent("click");
+  //   移动端
+  else {
+    event = document.createEvent("MouseEvents");
+    event.initMouseEvent(
+      "click",
+      true,
+      false,
+      window,
+      0,
+      0,
+      0,
+      0,
+      0,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null
+    );
+  }
+  aLink.dispatchEvent(event);
+};
+/**
+ * 导出Excel表格
+ * @param sheetListInfo {list:数组数据, name: sheet名称}
+ * @param excelName Excel表格名称
+ */
+export const exportToExcel = (sheetListInfo, excelName) => {
+  const wb = XLSX2.utils.book_new();
+  for (const sheetItem of sheetListInfo) {
+    const sheet = XLSX2.utils.json_to_sheet(sheetItem.list);
+    XLSX2.utils.book_append_sheet(wb, sheet, sheetItem.name);
+  }
+  const workbookBlob = workbook2blob(wb);
+  // 导出最后的总表
+  openDownloadDialog(workbookBlob, excelName + ".xlsx");
+};

src/views/platformSection/log/deviceExport.vue

@@ -10,9 +10,9 @@
           style="width: 150px"
         />
       </div>
-      <Button type="primary" class="primary_btn" @click="toExport()"
+      <!-- <Button type="primary" class="primary_btn" @click="toExport()"
         >导出</Button
-      >
+      > -->
     </div>
     <div class="table_wrap">
       <Table :columns="columns" :data="searchForm.list">
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { logDeviceBind_list } from "@/api/log";
+import { logDeviceBind_list, logDeviceBind_list_all } from "@/api/log";
 export default {
   data() {
     return {
@@ -129,7 +129,15 @@ export default {
         }
       });
     },
-    toExport() {}
+    toExport() {
+      logDeviceBind_list_all({}).then((data) => {
+        if (data.code === 0) {
+          console.log("---logDeviceBind_list_all---->", data.obj);
+        } else {
+          this.$Message.error(data.msg);
+        }
+      });
+    }
   }
 };
 </script>

vue.config.js

@@ -44,6 +44,8 @@ module.exports = defineConfig({
       vuex: "Vuex",
       echarts: "echarts",
       axios: "axios",
+      xlsx: "XLSX2",
+      "xlsx-style": "XLSX",
       "view-design": "iview",
       "crypto-js": "CryptoJS"
     }