阅读量:0
<avue-crud ref="crud" :option="fileOption" :data="dataCRUD" :page.sync="page" :search.sync="search" @current-change="currentChange" @size-change="sizeChange" @search-reset="searchReset" @search-change="searchChange"> <!-- 预览 --> <template slot-scope="scope" slot="name"> <el-link type="primary" @click="preview(scope.row)" :underline="false">{{scope.row.name}}</el-link> </template> </avue-crud>预览的部分展示在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
<!-- 预览 --> <el-dialog :title="previewTitle" :visible.sync="dialog.dialogVisible"> <div v-if="dialog.isPdf"> <vue-office-pdf :src="previewUrl" @rendered="renderedHandler" @error="errorHandler" /> </div> <div v-else-if="dialog.isWord"> <vue-office-docx :src="previewUrl" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> </div> <div v-else-if="dialog.isExcel"> <div id="table" > <el-table :data="excelData" border stripe :header-cell-style="{'background':'#F5F4F7'}"> <el-table-column type="index" label="序号" width="60" :resizable="false" align="center" /> <el-table-column v-for="(value, key, index) in excelData[maxIndex]" :key="index" :prop="key" :label="key"></el-table-column> </el-table> </div> </div> <div v-else-if="dialog.isPicture"> <div v-viewer> <img :src="previewUrl" :toolbar="false" width="900px"/> </div> </div> </el-dialog>后面发现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<this.excelData.length;i++){ let arrLength = 0 for(let key in this.excelData[i] ){ arrLength++ } mapObj.set(i,arrLength) // console.log(mapObj) } let contrastNum = 0 this.maxIndex = 0 mapObj.forEach((value, key, self) => { // console.log(key,'=>', value) if(value>contrastNum){ contrastNum = value this.maxIndex = key } }); console.log(this.maxIndex,contrastNum,'999') }, 