JG-CLIENT-TEMP/src/components/PDFDrawerView/index.vue

<script setup lang="ts">
import VuePdfApp from "vue3-pdf-app";
// import this to use default icons for buttons
import "vue3-pdf-app/dist/icons/main.css";

const pdfSource = ref("");

const visible = ref(false);

const showPdf = (url) => {
  localStorage.setItem("pdfjs.history", "");

  visible.value = true;
  nextTick(() => {
    pdfSource.value = url;
  });
};

const onDrawerClose = () => {
  pdfSource.value = "";
  // console.log(pdfSource.value, "aaa");
  // localStorage.setItem("pdfjs.history", "");
};

defineExpose({
  showPdf,
});

// 工具栏配置项
const config = ref({
  // 右侧其他区工具
  sidebar: {
    viewThumbnail: true, //启用缩略图视图
    viewOutline: true, //启用大纲视图
    viewAttachments: false, //启用附件视图
  },
  secondaryToolbar: {
    secondaryPresentationMode: true, //启用演示模式
    secondaryOpenFile: true, //启用打开文件功能
    secondaryPrint: false, //启用打印功能
    secondaryDownload: false, //启用下载功能
    secondaryViewBookmark: false, //启用书签视图
    firstPage: false, //启用跳转到第一页
    lastPage: false, //启用跳转到最后一页
    pageRotateCw: true, //启用顺时针旋转页面
    pageRotateCcw: true, //启用逆时针旋转页面
    cursorSelectTool: false, //启用选择工具
    cursorHandTool: false, //启用手形工具
    scrollVertical: false, //启用垂直滚动
    scrollHorizontal: false, //启用水平滚动
    scrollWrapped: false, //启用包裹滚动
    spreadNone: false, //启用无跨页模式
    spreadOdd: false, // 启用奇数页跨页模式
    spreadEven: false, //启用偶数页跨页模式
    documentProperties: false, //启用文档属性查看
  },
  // 配置左侧工具栏
  toolbar: {
    toolbarViewerLeft: {
      findbar: false, //启用查找条
      previous: true, // 启用上一页按钮
      next: true, //启用下一页按钮
      pageNumber: true, // 启用页码显示
    },
    //  配置右侧工具栏
    toolbarViewerRight: {
      presentationMode: true, //启用演示模式
      openFile: false, //启用打开文件功能
      print: false, //启用打印功能
      download: false, // 启用下载功能
      viewBookmark: false, // 启用书签视图
    },
    // 配置中间工具栏
    toolbarViewerMiddle: {
      zoomOut: true, // 启用缩小功能
      zoomIn: true, //启用放大功能。
      scaleSelectContainer: true, //启用缩放选择容器功能
    },
  },
  errorWrapper: true, //启用错误包装，这可能用于显示错误信息或处理错误情况。
});
</script>

<template>
  <el-drawer
    v-model="visible"
    :footer="false"
    :header="false"
    :show-close="false"
    destroy-on-close
    direction="rtl"
    :append-to-body="true"
    @closed="onDrawerClose"
    size="80%"
  >
    <VuePdfApp
      v-if="pdfSource"
      class="mid-pdf-box"
      :pdf="pdfSource"
      page-scale="page-fit"
      :page-number="1"
      :config="config"
    ></VuePdfApp>
  </el-drawer>
</template>

<style scoped lang="scss">
.mid-pdf-box {
  width: 100%;
  min-height: calc(100vh - 100px);
  height: 100%;
}
</style>