一、 word、excel文档预览

1）html

<!--按钮-->
<el-button icon="el-icon-view" label="查看" perms="view:file" :size="size" @click="handleView(scope.$index, scope.row)" />

<!--弹窗-->
<el-dialog title="查看文档" width="60%" :visible.sync="visible" :close-on-click-modal="false">
  <div style="text-align: center">
    <iframe v-if="docUrl" :src="docUrl" frameborder="0" width="100%" height="600px"></iframe>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button :size="size" @click.native="visible = false">取消</el-button>
  </div>
</el-dialog>

2）js （三种方式）

data() {
  return {
    size: 'small',
    visible: false,
    docUrl: '' // 文档地址
  }
},
methods: {
  handleView: function (index, row) {
    this.docUrl = '';

    // 判断文件扩展名 （docx包含doc，xlsx包含xls，所以只需要判断doc和xls即可）***以下为三种方式***
    if (row.url.indexOf('doc') !== -1 || row.url.indexOf('xls') !== -1) {
        // 1、微软的链接：文档地址得是公网的 （重复访问会有打不开的情况，原因不明。）
        this.docUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(row.url);

        // 2、XDOC的链接：文档地址可以是非公网  文档地址为http时使用
        this.docUrl = 'http://view.xdocin.com/xdoc?_xdoc=' + encodeURIComponent(row.url);

        // 3、XDOC的链接：文档地址可以是非公网  文档地址为https时使用
        this.docUrl = 'https://view.xdocin.com/xdoc?_xdoc=' + encodeURIComponent(row.url);
    }
  }
}

二、pdf文档预览

1）html

<!--按钮-->
<el-button icon="el-icon-view" label="查看" perms="view:file" :size="size" @click="handleView(scope.$index, scope.row)" />

<!--弹窗-->
<el-dialog title="查看文档" width="60%" :visible.sync="visible" :close-on-click-modal="false">
  <div style="text-align: center">
    <template v-if="pdfUrl">
      <pdf v-for="item in pageTotal" :src="pdfUrl" :key="item" :page="item"></pdf>
    </template>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button :size="size" @click.native="visible = false">取消</el-button>
  </div>
</el-dialog>

2）js

data() {
  return {
    size: 'small',
    visible: false,
    pageTotal: null,
    pdfUrl: '' // 文档地址
  }
},
methods: {
  handleView: function (index, row) {
    this.pdfUrl= '';

    // 判断文件扩展名
    if (row.url.indexOf('pdf') !== -1) {
      // 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据
      // 需要使用下述方法的返回值作为url
      this.pdfUrl = pdf.createLoadingTask(row.url)
      // 获取页码
      this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {})
    }
  }
}

三、视频预览

1）html

<!--按钮-->
<el-button icon="el-icon-view" label="查看" perms="view:file" :size="size" @click="handleView(scope.$index, scope.row)" />

<!--弹窗-->
<el-dialog title="查看视频" width="60%" :visible.sync="visible" :close-on-click-modal="false">
  <div style="text-align: center">
    <video v-if="videoUrl"  height="500" autoplay controls>
      <source :src="videoUrl" type="video/mp4"/>
    </video>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button :size="size" @click.native="visible = false">取消</el-button>
  </div>
</el-dialog>

2）js

data() {
  return {
    size: 'small',
    visible: false,
    videoUrl: '' // 视频地址
  }
},
methods: {
  handleView: function (index, row) {
    this.videoUrl = '';

    // 判断文件扩展名
    if (row.url.indexOf('mp4') !== -1) {
      this.videoUrl= row.url;
    }
  }
}