xiaoshu/src/components/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,.3);	
}

.pdf-document-viewer  .annotation[data-subtype=Highlight][data-custom-type=search] .widget-content{
  fill: rgba(250,200,80,.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>