|
@@ -1,88 +0,0 @@
|
|
|
-<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>
|
|
|