预览

src/views/archives/students/component/excelView.vue

@@ -0,0 +1,47 @@
+<template>
+  <div v-if="rows.length" class="wh-full bg-white">
+    <n-table :bordered="false" :single-line="false">
+      <thead>
+        <tr>
+          <th v-for="title in rows[0]" :key="title">{{ title }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in rows" :key="index">
+          <template v-if="index !== 0">
+            <td v-for="item in row" :key="item">{{ item }}</td>
+          </template>
+        </tr>
+      </tbody>
+    </n-table>
+  </div>
+</template>
+<script setup lang="ts">
+import { watch, ref, onMounted } from 'vue';
+import { read, utils } from 'xlsx';
+const rows = ref([]);
+const props = defineProps({
+  url: {
+    type: String,
+    default: ''
+  }
+});
+
+async function init() {
+  const f = await fetch(props.url);
+  const ab = await f.arrayBuffer();
+  const wb = read(ab);
+  rows.value = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
+}
+
+watch(
+  () => props.url,
+  () => {
+    init();
+  }
+);
+onMounted(() => {
+  init();
+});
+</script>
+<style scoped></style>

src/views/archives/students/component/imageView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="wh-full">
+    <n-image :src="props.url" />
+  </div>
+</template>
+<script setup lang="ts">
+import { watch, onMounted } from 'vue';
+const props = defineProps({
+  url: {
+    type: String,
+    default: ''
+  }
+});
+
+watch(
+  () => props.url,
+  () => {}
+);
+onMounted(() => {});
+</script>
+<style></style>

src/views/archives/students/component/pdfView.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="wh-full">
+    <PdfPreview :pdf-url="props.url" />
+  </div>
+</template>
+<script setup lang="ts">
+import { watch, onMounted } from 'vue';
+import PdfPreview from '@/components/view/pdfPreview.vue';
+
+const props = defineProps({
+  url: {
+    type: String,
+    default: ''
+  }
+});
+watch(
+  () => props.url,
+  () => {}
+);
+onMounted(() => {});
+</script>
+<style></style>

src/views/archives/students/component/wordView.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="wh-full">
+    <div id="container"></div>
+  </div>
+</template>
+<script setup lang="ts">
+import { watch, onMounted } from 'vue';
+import { renderAsync } from 'docx-preview';
+const props = defineProps({
+  url: {
+    type: String,
+    default: ''
+  }
+});
+
+async function init() {
+  const f = await fetch(props.url);
+  const ab = await f.arrayBuffer();
+  const doc = document.getElementById('container');
+  if (doc) {
+    renderAsync(ab, doc);
+  }
+}
+
+watch(
+  () => props.url,
+  () => {
+    init();
+  }
+);
+onMounted(() => {
+  init();
+});
+</script>
+<style></style>