vue 预览word文档、图片、pdf文件等

<el-button size="mini"
           type="text"
           icon="el-icon-edit"
           @click="handlePreviewFile(obj)"
           >预览</el-button>
 <el-dialog title="预览" :visible.sync="viewVisible" width="90%"  height="100%" >
      <iframe
        :src='sourceUrl'
        width=100%
        height=800
        frameborder='0'>
      </iframe>
 </el-dialog>
data() {
    return {
      //文件预览
      viewVisible:false,
      //文件类型
      fileType:null,
      //文件地址
      sourceUrl:null,}
}
 
  //文件预览
    handlePreviewFile(e){
      var xdoc_head = "https://view.xdocin.com/view?src=";
      this.viewVisible = true
      this.sourceUrl = xdoc_head+ encodeURIComponent(e.fileUrl);
    },

效果图