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。