使用pdf.js渲染pdf文件，并修改iframe的样式

<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>

 碰到新问题，当需要修改遍历生成的Canvas等元素，在load时期也无法获取（为空DOM数组），因此修改那些元素无法生效

 修改办法：

    setPdfStyle() {
      const iframe = this.$refs.pdfContainer
      const observer = new MutationObserver((mutationsList, observer) => {  //创建了一个 MutationObserver，并设置了对 iframe 中子节点的变化进行观察。当 MutationObserver 观察到子节点发生变化时，会触发回调函数，
        const iframeDocument = iframe.contentDocument || iframe.contentWindow.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')
          if (iframeViewerContainer) {
            iframeViewerContainer.style.top = '0'
          }
          const iframePage = iframeDocument.getElementsByClassName('page')
          if (iframePage.length > 0) {
            for (let i = 0; i < iframePage.length; i++) {
              iframePage[i].style.borderImage = 'none'
            }

            　　observer.disconnect(); // 停止观察

          }
        }
      })
      observer.observe(iframe.contentDocument || iframe.contentWindow.document, { subtree: true, childList: true });
    }