提交代码

src/components/MyComponents/DownLoad/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+    title="导出预览"
+    width="1400px"
+    :model-value="modelValue"
+    @close="closed"
+  >
+    <el-table :data="data" :id="myId" style="width: 100%" border>
+      <el-table-column label="序号" type="index" align="center" width="80" />
+      <el-table-column
+        v-for="(item, index) in tabOption"
+        :key="index + 'tab'"
+        :prop="item.prop"
+        :label="item.label"
+        align="center"
+      >
+        <template v-if="item.dict" #default="{ row }">
+          <dict-tag :options="item.dict" :value="row[item.prop]" :tag="false" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="closed">取消</el-button>
+        <el-button type="primary" @click="exportExcel">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
+import FileSaver from "file-saver";
+import * as XLSX from "xlsx";
+const tabRef = ref(null);
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  tabOption: {
+    type: Array,
+    require: []
+  },
+  data: {
+    type: Array,
+    required: []
+  },
+  myId: {
+    type: String,
+    require: ""
+  },
+  title: {
+    type: String,
+    require: ""
+  }
+});
+const emits = defineEmits(["update:modelValue"]);
+const closed = () => {
+  emits("update:modelValue", false);
+};
+const { proxy } = getCurrentInstance();
+function exportExcel() {
+  let xlsxParam = { raw: true };
+  let wb = XLSX.utils.table_to_book(
+    document.querySelector("#" + props.myId),
+    xlsxParam
+  );
+  let wbout = XLSX.write(wb, {
+    bookType: "xlsx",
+    bookSST: true,
+    type: "array"
+  });
+  closed();
+  try {
+    FileSaver.saveAs(
+      new Blob([wbout], { type: "application/octet-stream" }),
+      `${props.title}.xlsx`
+    );
+  } catch (e) {
+    if (typeof console !== "undefined") console.log(e, wbout);
+  }
+  return wbout;
+}
+</script>
+
+<style>
+</style>