vue2.0項目中實現視頻預覽以及pdf文件預覽

• 選擇本地文件進行預覽
  • 　　html部分:

    <input type="file" @change="vchange" id="videoInput" />
        <video
          src="xxx.mp4"
          alt="預覽"
          ref="video"
          id="video"
          controls="controls"
          width="100%"
          height="200px"
        />

  • js部分：

    methods: {
        vchange (e) {
          this.previewByURL(e.target.files[0])
        },
        previewByURL (file) {
          this.$refs.video.src = URL.createObjectURL(file)
        }
      },

•  線上pdf文件和video文件的預覽

  • <template>
      <div class="videoShow">
        <!--doc，excel-->
        <div v-if="docShow || excelShow">
          <iframe
            class="child"
            frameborder="0"
            :src="
              '/pdf/web/viewer.html?file=http://xx.xx.xx:8080/' +
                this.downloadUrl
            "
            :style="{ width: width, height: height }"
          >
    　　   　　<!--  這里pdf文件預覽使用了pdfjs插件，因為是移動端系統，ios自帶瀏覽器是可以解析pdf文件的，但是安卓端瀏覽器是不能解析pdf文件的，具體用法看最下面的pdfjs在vue項目中使用的鏈接 -->
          </iframe>
        </div>
        <!--視頻-->
        <div v-else-if="videoShow">
          <h4>{{ fileName }}</h4>
          <video
            preload="auto"
            :height="height"
            :width="width"
            align="center"
            controls="true"
          >
            <source
              :src="'http://xx.xx.xx:8080/' + this.downloadUrl"
              type="video/mp4"
            />
          </video>
        </div>
        <!--其他不能預覽的-->
        <div v-else-if="otherShow">
          <h5>can't show</h5>
        </div>
      </div>
    </template>
    
    <script>
    import 'video.js/dist/video-js.css'
    export default {
      // props: { file: {} },
      data () {
        return {
          fileName: '',
          downloadUrl: '',
          docShow: false,
          excelShow: false,
          videoShow: false,
          // 其他不能預覽的
          otherShow: false,
          // height: window.innerHeight + 'px',
          height: '200vh',
          width: '100%'
        }
      },
      created () {
    　　 // 文件名和文件路徑是由上一個頁面跳轉攜帶參數跳轉過來的
        this.fileName = this.$route.params.fileName
        this.downloadUrl = this.$route.params.fileAddress
        if (
          this.fileName.endsWith('docx') ||
          this.fileName.endsWith('doc') ||
          this.fileName.endsWith('pdf') ||
          this.fileName.endsWith('pptx') ||
          this.fileName.endsWith('ppt') ||
          this.fileName.endsWith('txt')
        ) {
          // doc
          this.title = '文檔預覽'
          this.docShow = true
        } else if (
          this.fileName.endsWith('xlsx') ||
          this.fileName.endsWith('xls')
          // doc
        ) {
          // excel
          this.excelShow = true
        } else if (this.fileName.endsWith('mp4') || this.fileName.endsWith('mp3')) {
          this.title = '視頻預覽'
          this.videoShow = true
        } else {
          this.otherShow = true
        }
      },
      methods: {},
    }
    </script>
    
    <style lang="less" scoped>
    .child {
      width: 100%;
      height: 100%;
      border: 0;
    }
    </style>

     

  • 總結：
    1. pdf文件和視頻文件分開顯示，通過v-if控制顯示與否，通過fileName.endsWith()方法來判斷文件名后綴。
    2. pdf文件使用插件pdfjs來顯示，重點是iframe的屬性src，內容是pdfjs插件的web目錄下的viewer.html文件。因為這個是用來顯示pdf文件的。
    3. 視頻文件則用標簽video顯示，source是視頻源。
    4. 文件地址由上一個頁面通過url攜帶參數傳過來。
• pdfjs插件在vue2.0項目中的應用以及坑點，文章地址：https://www.cnblogs.com/chenzejie6030/p/14743541.html。