feat:pdf查看器

ZhangXianQiang

2024-07-03 0fce3ef92936ea8d50a74e21f3c58c469fb1bddb

feat:pdf查看器

 src/views/folder/index.vue

@@ -50,14 +50,24 @@
      </div>
    </div>

    <div class="pdf-container">
    <div class="pdf-container" v-show="pdfViewer">
      <PDFViewer :pdfUrl="'/helloworld.pdf'"></PDFViewer>
      <div class="close-btn">
        <el-button type="danger" size="large" circle @click="closeViewer">
          <template #icon>
            <el-icon :size="18">
              <Close />
            </el-icon>
          </template>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Close } from '@element-plus/icons-vue';
import NormalHeader from '@/components/NormalHeader/index.vue';
import { Search } from '@element-plus/icons-vue';
import { getFileList } from '@/api/modules/file.js';
@@ -78,15 +88,19 @@
    }
  },
  'pdf': {
    iconPath: '/static/icons/file_type_image.png',
    iconPath: '/static/icons/file_type_pdf.png',
    handle: (item) => {
      console.log(item);
      pdfViewer.value = true;
    }
  },
};

const loading = ref(false);
const searchText = ref('');

const pdfViewer = ref(false);
const imageViewer = ref(false);
const videoViewer = ref(false);

const fileList = ref([
  {
@@ -118,11 +132,16 @@
  }
]);

const loading = ref(false);

const checkRow = (item) => {
  fileType[item.type] && fileType[item.type].handle(item);
};

const closeViewer = () => {
  pdfViewer.value = false;
  imageViewer.value = false;
  videoViewer.value = false;
}

const getData = () => {
  getFileList().then(res => {
@@ -149,12 +168,23 @@
}

.pdf-container {
  width: 800px;
  height: 800px;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  z-index: 99999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .close-btn {
    position: absolute;
    top: 2px;
    right: 30px;
    z-index: 9999999;
    :deep(.el-button) {
      width: fit-content;
      height: fit-content;
      padding: 5px !important;
    }
  }
}
</style>