<template>
<div v-loading="loading">
<iframe :src="pdfUrl" :style="styles"
style="border: none;width:100%"
@load="setPdfStyle" // load事件是在ifram完全加载完后的时期执行的函数ref="pdfContainer"></iframe>
</div>
</template>
<script>
function fillPublicPath(path) {
const serverPath = process.env.BASE_URL + path
return serverPath.replace('//', '/')
}
export default {
name: 'DocxPdfRender',
computed: {
styles() {
let style = {}
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`
}
if (this.height) {
style.height = `${this.height}px`
}
return style
}
},
data() {
return {
pdfUrl: undefined,
loading: false
}
},
mounted(){
this.getPdfUrl()
},
methods: {
getPdfUrl() {
const urlPath = fillPublicPath('/static/plugins/pdf/web/viewer.html')
const urlCode = encodeURIComponent(this.url)
this.pdfUrl = `${urlPath}?file=${urlCode}&source=detail`
},
setPdfStyle() { // 在此时期才能获取到正确的iframe，nextTick时期获取到的iframe是空iframe，修改空iframe是生效不了的
const iframe = this.$refs.pdfContainer // 获取ref
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document // 获取document才能对获取该文档下的所有元素
const iframeBody = iframeDocument.getElementsByTagName('body')[0]
if (iframeBody) {
iframeBody.style.backgroundColor = 'transparent'
iframeBody.style.backgroundImage = 'none'
const iframeToolbar = iframeDocument.getElementsByClassName('toolbar')[0]
if (iframeToolbar) {
iframeToolbar.style.display = 'none'
}
const iframeViewerContainer = iframeDocument.getElementById('viewerContainer') // 通过id则非数组
if (iframeViewerContainer) {
iframeViewerContainer.style.top = '0'
}
}
}
}
}
</script>
标签：style,const,iframeDocument,js,iframe,pdf,iframeBody From： https://www.cnblogs.com/LylePark/p/18091275