文件预览（img,doc,pdf,xls）

1. 直接代码

   //图片直接用img标签展示  //非图片用iframe标签展示 

1. 粘贴一下vue组件代码可直接使用

                            /* oss���件地址前缀 */import website from "@/const/website.js";export default {  data() {    return {      open: false,      width: "",      title: "",      url: "",      isWordSuffer: ["doc", "docx"],      isImgSuffer: ["png", "jpg", "jpeg"],      isPdfSuffer: ["pdf"],      isExcelSuffer: ["xls", "xlsx"],      showImg: false,    };  },  computed: {    handleClass() {      if (this.showImg) return "";      return "is_iframe";    },  },  methods: {    show(url, suffName = "jpg") {      /* 组织线上展示的文件地址 */      const preview_url = website.ossUrl + url.slice(url.lastIndexOf("/"));      const { isWordSuffer, isImgSuffer, isPdfSuffer, isExcelSuffer } = this;      /* 图片 */      if (isImgSuffer.includes(suffName)) {        this.showImg = true;        this.title = "图片预览";        this.width = "600px";        this.url = preview_url;      } else {        this.showImg = false;        this.width = "960px";        /* pdf */        if (isPdfSuffer.includes(suffName)) {          this.title = "PDF预览";          this.url = preview_url;          /* word预览需要拼接前缀 */        } else if (isWordSuffer.includes(suffName)) {          this.title = "Word预览";          this.url = `https://view.officeapps.live.com/op/view.aspx?src=${preview_url}`;        } else if (isExcelSuffer.includes(suffName)) {          /* excel预览需要拼接前缀 */          this.width = "1200px";          this.title = "Excel预览";          this.url = `https://view.officeapps.live.com/op/view.aspx?src=${preview_url}`;        }      }      this.open = true;    },  },};.doc-view {  .el-dialog__body {    // display: flex;    // justify-content: center;  }}.doc-view.is_iframe {  .el-dialog__body {    height: 75vh;  }}