|
@@ -0,0 +1,68 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="pdf-box">
|
|
|
|
+ <iframe id="pdfIframe" :src="url" frameborder="0" />
|
|
|
|
+ <!-- <div class="pdf-mark" @contextmenu="markClick" /> -->
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ url: ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ const { fileId, resource } = this.$route.query
|
|
|
|
+ this.url = `${process.env.VUE_APP_BASE_API}/system/fileStorage/preview?fileId=${fileId}&resource=${resource}#toolbar=0&navpanes=0&scrollbar=0`
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ // const iframe = document.getElementById('pdfIframe')
|
|
|
|
+ // const iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindo
|
|
|
|
+ // console.log(iframeWin.document.getElementById('viewer'))
|
|
|
|
+ // console.log(iframe.height = iframeWin.document.getElementById('viewer').scrollHeight
|
|
|
|
+ // )
|
|
|
|
+ // iframeWin.document.getElementById('viewer').addEventListener('contextmenu', function(event) {
|
|
|
|
+ // event.preventDefault()
|
|
|
|
+ // return false
|
|
|
|
+ // })
|
|
|
|
+ }, 1000)
|
|
|
|
+
|
|
|
|
+ // const mask = document.querySelector('.pdf-mark')
|
|
|
|
+ // mask.addEventListener('scroll', function(params) {
|
|
|
|
+ // iframe.scrollTop = mask.scrollTop
|
|
|
|
+ // })
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ markClick() {
|
|
|
|
+ console.log(213123123)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.pdf-box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ position: relative;
|
|
|
|
+ iframe {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+ .pdf-mark {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0px;
|
|
|
|
+ left: 0px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
|
|
|
|
+ overflow: auto;
|
|
|
|
+ // pointer-events: none; /* 防止遮罩阻止鼠标事件 */
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|