预览pdf文件和Excel文件

开发的时候要一个可上传下载预览的静态页面以下是数据html

<el-table v-loading="loading" :data="fileList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="排序" align="center" type="index" /><el-table-column label="上传人" align="center" prop="upUser" /><el-table-column label="操作" align="center" class-name="small-padding fixed- width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-view"@click="downloadFileByUrl(scope.row.Url,scope.row.Name)"//文件名称和文件路径>预览</el-button><el-linkstyle="margin:0 10px;":href="handleExport(scope.row.fileUrl)"target='_blank'><el-buttonsize="mini"type="text"icon="el-icon-download">下载</el-button></el-link><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['business:file:remove']">删除</el-button></template></el-table-column></el-table>

js

npm先安装excel的插件{npm install @vue-office/excel vue-demi}// /引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css' 
// 预览downloadFileByUrl (fileUrl,fileName) {this.pdfUrl =''const baseURL = process.env.VUE_APP_BASE_API;//地址前缀this.pdfUrl = baseURL+fileUrlvar li = this.pdfUrl.slice((this.pdfUrl.lastIndexOf(".") - 1 >>> 0) + 2)//获取文件的格式if(li == 'pdf'){//等于pdf时this.yltite = 'pdf'//在预览页面判断用this.ylfileName = fileNamethis.dialogPreview = true}else if(li =='xlsx'){//等于xlsx时this.pdfUrl =''this.pdfUrl = baseURL+fileUrlthis.yltite = 'xlsx'//在预览页面判断用this.ylfileName = fileNamethis.dialogPreview = true}},

预览pdf文件和Excel文件的页面

html

<!-- 预览 -->
<el-dialog  :title='ylfileName + "预览"' :visible.sync="dialogPreview"width="60%">//判断数据格式<iframe v-if="yltite == 'pdf'" :src="pdfUrl" width="100%" height="600px"></iframe><vue-office-excel v-else :src="pdfUrl" width="100%" height="600px" @rendered="rendered"/>       <span slot="footer" class="dialog-footer"><el-button @click="dialogPreview = false">取 消</el-button><el-button type="primary" @click="dialogPreview = false">确 定</el-button></span>
</el-dialog>