预览的部分展示在dialog中，根据点击的文件类型进行判断展示

 export default {         data() {             return {                 excelURL: "", //文件地址，看你对应怎末获取、赋值                 fileType:'',//文件类型区分预览                 currentManages:[],//编辑时接口数据                 dialog: {                     dialogVisible: false,                     src: '',                     isPdf: false,                     isExcel: false,                     isWord: false,                     isPicture:false                 },                 maxExcelData:[],                 maxIndex:'',             };         },

其中pdf和docx文件使用的插件详情：https://github.com/501351981/vue-office

后面发现Excel 中sheet不能显示正确，所以找了另一个预览Excel插件，详见：vue在线预览word、excel、pdf、txt、图片的方法实例_vue.js_脚本之家

其中Excel在展示的时候会显示不全，需要取数组对象索引的长度最长的作为赋值对象

 // 预览             preview(row){                 if (!(row.url.includes('.png') || row.url.includes('.jpg') || row.url.includes('.jpeg')  || row.url.includes('.JPG') || row.url.includes('.PNG') || row.url.includes('.JPEG')  || row.url.includes('.pdf') || row.url.includes('.xlsx') || row.url.includes('.xls') || row.url.includes('.doc'))) {                     this.$message.error('文件类型不支持预览')                     return false                 }                 if (row.url.includes('.pdf')) {                     this.dialog.isPdf = true                     this.dialog.isExcel = false                     this.dialog.isWord = false                     this.dialog.isPicture = false                     this.dialog.src = ''                     this.iframeLoading = true                     this.previewTitle = row.name                     // this.previewUrl = this.pdf                     this.previewUrl = row.url                 } else if (row.url.includes('.xls')){                     this.dialog.isPdf = false                     this.dialog.isExcel = true                     this.dialog.isWord = false                     this.dialog.isPicture = false                     this.previewTitle = '预览'                     // row.url=this.xlsx                     this.readWorkbookFromRemoteFile(row.url)                 }else if (row.url.includes('.doc')||row.url.includes('.docx')){                     this.dialog.isPdf = false                     this.dialog.isExcel = false                     this.dialog.isWord = true                     this.dialog.isPicture = false                     this.previewTitle = row.name                     // this.previewUrl = this.docx                     this.previewUrl = row.url                 }else if (row.url.includes('.jpg')||row.url.includes('.JPG')||row.url.includes('.jpeg')||row.url.includes('.png')){                     this.dialog.isPdf = false                     this.dialog.isExcel = false                     this.dialog.isWord = false                     this.dialog.isPicture = true                     this.previewTitle = row.name                     this.previewUrl = row.url                 }                 this.dialog.dialogVisible = true             },  readWorkbookFromRemoteFile (url) {                 var xhr = new XMLHttpRequest();                 xhr.open("get", url, true);                 xhr.responseType = "arraybuffer";                 let _this = this;                 xhr.onload = function (e) {                     if (xhr.status === 200) {                     var data = new Uint8Array(xhr.response);                     var workbook = XLSX.read(data, { type: "array" });                     console.log("workbook", workbook);                                  var sheetNames = workbook.SheetNames; // 工作表名称集合                     _this.workbook = workbook;                     _this.getTable(sheetNames[0]);                     }                 };                 xhr.send();             },   getTable(sheetName) {                     console.log(sheetName);                     var worksheet = this.workbook.Sheets[sheetName];                     this.excelData = XLSX.utils.sheet_to_json(worksheet);                     //取数组对象中，对象的key最长的一个进行赋值操作                     let arr = []                     let obj ={}                     arr.push(obj)                     let mapObj =  new Map()                     let size = 0                     for(let i= 0;i {                             // console.log(key,'=>', value)                             if(value>contrastNum){                                 contrastNum = value                                 this.maxIndex = key                             }                                                });                     console.log(this.maxIndex,contrastNum,'999')                             }, 

图片预览,详见：https://www.cnblogs.com/sgs123/p/12197278.html