xiaoshu/src/components/pdf-viewer/PdfReader.vue

<template>
  <div class="doc-viewer" ref="elementRef"></div>
</template>
<script>
import '../../../public/pdf/image-viewer.umd';
import '../../../public/pdf/style.css';
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent({
  components: {},
  props: ['fileUrl', 'fileName'],
  setup(props, { emit }) {
    const elementRef = ref(null);
    onMounted(() => {
      const options = {
        defaultUrl: props.fileUrl,
        resourcePath: 'pdf/',
        disableCORSOriginCheck: true,
        disableDocAnnotation: true,
        disableDraggingAndDropping: true,
        disablePopupList: false,
        showAnnotationMenu: false,
        textLayerMode: 1,
        appConfig: {
          toolbar: {
            toolbarViewerLeft: {
              pageNumber: false
            }
          }
        },
        toolbarControl: {
          download: false
        },
        locale: 'zh-cn'
      };
      const app = ImageViewer.createViewer(elementRef.value, options);
      app.readyPromise.then(() => {
        document.querySelector('#pdfFileName').innerHTML = props.fileName;
      });
    });
    return {
      elementRef
    };
  }
});
</script>
<style>
html[dir='ltr'] [data-id='toolbarViewerRight'] {
  display: none;
}
.pdf-document-viewer .toolbar {
  z-index: 999;
}
.pdf-document-viewer .annotation-control-bar__bottom {
  opacity: 0;
  display: none;
}
.pdf-document-viewer .annotation[data-subtype='Highlight'][data-custom-type='search'] .annotation-quad {
  fill: rgba(250, 200, 80, 0.3);
}

.pdf-document-viewer .annotation[data-subtype='Highlight'][data-custom-type='search'] .widget-content {
  fill: rgba(250, 200, 80, 0.3);
}
[data-id='toolbarContainer'],
.findbar,
.secondaryToolbar {
  height: 50px;
  padding-left: 50px;
}
.pdf-document-viewer input,
.pdf-document-viewer button,
.pdf-document-viewer select {
  border: none;
  cursor: pointer;
}
.pdfFileName {
  margin-top: 8px;
  flex: 1;
}
[data-id='toolbarViewerLeft'] {
  display: flex;
}
</style>
<style scoped>
.doc-viewer {
  height: 100%;
}
</style>