在线查看

消逝

2024-07-12 b81d9110bcdef3b80386c6f16fa927e481ed9a7a

在线查看

 components.d.ts

@@ -7,32 +7,24 @@
/* prettier-ignore */
declare module 'vue' {
  export interface GlobalComponents {
    DocumentViewer: typeof import('./src/components/DocumentViewer/index.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCol: typeof import('element-plus/es')['ElCol']
    ElCollapse: typeof import('element-plus/es')['ElCollapse']
    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
    ElCountdown: typeof import('element-plus/es')['ElCountdown']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElDrawer: typeof import('element-plus/es')['ElDrawer']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
    ElForm: typeof import('element-plus/es')['ElForm']
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElLink: typeof import('element-plus/es')['ElLink']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElProgress: typeof import('element-plus/es')['ElProgress']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSlider: typeof import('element-plus/es')['ElSlider']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTag: typeof import('element-plus/es')['ElTag']
    ExamAudio: typeof import('./src/components/ExamAudio/index.vue')['default']
    ExamInfo: typeof import('./src/components/ExamInfo/index.vue')['default']
    ExamInfoDialog: typeof import('./src/components/ExamInfoDialog/index.vue')['default']

 package-lock.json

Diff too large

 package.json

@@ -13,14 +13,17 @@
    "@jitsi/electron-sdk": "^6.0.40",
    "axios": "^1.7.2",
    "dayjs": "^1.11.11",
    "docx-preview": "^0.3.2",
    "element-plus": "^2.7.3",
    "lodash": "^4.17.21",
    "mockjs": "^1.1.0",
    "pdfjs-dist": "^4.4.168",
    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.2.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.2",
    "vue-ueditor-wrap": "^3.0.8",
    "worker-loader": "^3.0.8",
    "xgplayer": "^3.0.18"
  },
  "devDependencies": {

 src/components/DocumentViewer/filePreview.js

New file
@@ -0,0 +1,78 @@
import { renderAsync } from "docx-preview";
import * as pdfjsLib from "pdfjs-dist";
import workerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";
pdfjsLib.GlobalWorkerOptions.workerSrc = workerUrl;
/**
 * 预览文件
 * @param data 文件数据
 * @param fileType 文件类型
 * @param document 选择器或要渲染的dom对象
 */
export function previewFile(data, fileType, element) {
    if (typeof element === "string") {
        element = document.querySelector(element);
    }
    return new Promise(async (resolve, reject) => {
        let fileData = data;
        if (typeof data === "string") {
            fileData = await fetch(data).then((res) => res.arrayBuffer());
        }

        switch (fileType) {
            case "docx":
                renderAsync(fileData, element)
                    .then(() => {
                        resolve(void 0);
                    })
                    .catch((err) => {
                        reject(err);
                    });
                break;
            case "pdf":
                const loadingTask = pdfjsLib.getDocument(fileData);
                loadingTask.promise
                    .then((pdf) => {
                        // Fetch the first page
                        for (let i = 1; i <= pdf.numPages; i++) {
                            // const pageNumber = 1;

                            pdf.getPage(i)
                                .then((page) => {
                                    console.log("Page loaded");

                                    const scale = 1;
                                    const viewport = page.getViewport({
                                        scale: scale,
                                    });

                                    // Prepare canvas using PDF page dimensions
                                    const canvas =
                                        document.createElement("canvas");
                                    const context = canvas.getContext("2d");
                                    canvas.height = viewport.height;
                                    canvas.width = viewport.width;
                                    element.appendChild(canvas);

                                    // Render PDF page into canvas context
                                    const renderTask = page.render({
                                        canvasContext: context,
                                        viewport: viewport,
                                    });
                                    renderTask.promise.then(function () {
                                        console.log("Page rendered");
                                    });
                                })
                                .catch((err) => {
                                    reject(err);
                                });
                        }
                    })
                    .catch((err) => {
                        reject(err);
                    });
                break;
            case "xlsx":
                break;
        }
    });
}

 src/components/DocumentViewer/index.vue

New file
@@ -0,0 +1,30 @@
<template>

    <div class="document-viewer">

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { previewFile } from "./filePreview";

const props = defineProps({
    fileUrl:{
        type: String,
        required: true
    }
});
console.log("打印一下路径：", props.fileUrl);

onMounted(() => {
    console.log(props.fileUrl);
    previewFile('/api/files/' + props.fileUrl,"pdf", document.querySelector(".document-viewer"));
});
</script>
<style scoped>
.document-viewer {
    width: 100%;
    height: 100%;
}
</style>

 src/views/folder/index.vue

@@ -66,7 +66,7 @@
    </div>

    <!-- pdf查看 -->
    <div class="pdf-container" v-show="pdfViewer">
    <!-- <div class="pdf-container" v-show="pdfViewer">
      <PDFViewer :pdfUrl="pdfFile"></PDFViewer>
      <div class="close-btn">
        <el-button type="danger" size="large" circle @click="closeViewer">
@@ -77,7 +77,7 @@
          </template>
        </el-button>
      </div>
    </div>
    </div> -->

    <!-- image查看 -->
    <div class="image-container" v-show="imageViewer">
@@ -97,7 +97,10 @@
        </el-button>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-drawer v-model="fileViewer" direction="btt" size="90%" :before-close="handleClose">
        <DocumentViewer :fileUrl="fileUrl"></DocumentViewer>
    </el-drawer>
  </div>
</template>

@@ -112,6 +115,7 @@

import PDFViewer from '@/components/PDFViewer/index.vue';
import VideoViewer from '@/components/VideoViewer/index.vue';
import DocumentViewer from "@/components/DocumentViewer/index.vue";

import {useUserStore} from '@/store/index.js';
import useWebScoket from '@/hooks/useWebScoket.js';
@@ -180,9 +184,18 @@
  { name: 'PPT', value: 'ppt' }]);
const currentIndex = ref(1);


const fileUrl = ref("");
const fileViewer = ref(false);
const checkRow = (item) => {
    fileUrl.value = item.contentUrl.url;
  fileType[item.contentType] && fileType[item.contentType].handle(item);
  fileViewer.value = true
};

const handleClose = () => {
  fileViewer.value = false;
  fileUrl.value = "";
  console.log("我是否关闭：",fileUrl.value);
};

const closeViewer = () => {