预览word，excel，ppt，pdf、图片————使用vue实现
需要下载的依赖:template模板实现：方法的实现：需要下载的依赖:
npm i xlsx // 预览excel插件npm i mammoth// 预览word插件npm i vue-pdf // 预览pdf插件
template模板实现：
<template><div><input type="file" @change="handleClick($event)" /><el-dialog:before-close="closePreviewClick":close-on-click-modal="false":visible.sync="iframeState"><div v-if="showExcel == true" style="width: 100%; height: 650px"><el-table:data="tableData"style="width: 100%"height="450"size="mini"><el-table-column:prop="item":label="item"v-for="(item, index) in checkboxTableColumn":key="'column' + index"></el-table-column></el-table><div class="block"><el-paginationv-if="excelData != 0"@size-change="handleSizeChange"@current-change="CurrentChange":current-page="currentPage":page-sizes="[10, 20, 30, 40, 50, 100, 200, 500]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></div><divv-else-if="showDoc == true"style="margin-bottom: 20px;display: flex;justify-content: center;height: 850px;width: 100%;padding: 15px;"><divv-loading="docVisible"element-loading-text="加载中"element-loading-spinner="el-icon-loading"v-html="vHtml"/></div><divv-else-if="showPdf == true"style="margin-bottom: 20px;display: flex;justify-content: center;height: 850px;width: 100%;padding: 15px;"><div style="position: fixed; top: 10px; z-index: 100"><el-button-group><el-buttontype="primary"icon="el-icon-arrow-left"size="mini"@click="prePage">上一页</el-button><el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group><div style="margin-top: 10px; margin-left: 60px; color: #409eff">{{pageNum }} / {{pageTotalNum }}</div></div><pdfstyle="width: 70%; margin: 0 auto; height: 850px"ref="pdf":src="src":page="pageNum"@num-pages="pageTotalNum = $event"></pdf></div><divv-else-if="showImg == true"class="dialog-body-content-base-style"style="margin-bottom: 20px; display: flex; justify-content: center"><img :src="imgUrl" /></div><divv-else-if="showPPt == true"style="margin-bottom: 20px;display: flex;justify-content: center;width: 800px;height: 800px;"><iframe:src="pptUrl"scrolling="no"frameborder="0"style="z-index: 1000; height: 100%; width: 100%"></iframe></div></el-dialog></div></template>
方法的实现：
（包括预览pdf，excel，ppt，word，图片的方法）
<script>import pdf from "vue-pdf"; // 预览pdf插件import mammoth from "mammoth"; // 预览word插件import * as XLSX from "xlsx"; // 预览excel插件export default {name: "",components: {pdf,},props: {},data() {return {// start:控制那个标签显示的变量showPPt: false,showExcel: false,showPdf: false,showDoc: false,showImg: false,iframeState: false,// start:控制那个标签显示的变量src: "", // pdf的url地址// start:excel所需要的变量columnHeader: [], //所有键的值excelData: [], // 导入的excel的数据checkboxTableColumn: [], // 表格显示列tableData: [], //表格数据currentPage: 1, // 当前分页pageSize: 10, // 每页显示数量total: 0, // 数据总数// end:excel所需要的变量// start:pdf需要的变量vHtml: "", // doc文件变成html标签的变量docVisible: false, // 控制doc加载的变量pageNum: 1, // pdf的页码数量pageTotalNum: 1, // 总页数currentPage: 0, // pdf文件页码pageCount: 0, // pdf文件总页数// end:pdf需要的变量imgUrl: "", // 图片的url地址 （转化成了base64）pptUrl:"", // ppt的url地址 （转化成了base64）};},methods: {// 控制对话框展示与否的方法closePreviewClick() {if (this.showExcel === true) {this.showExcel = false;this.iframeState = false;} else if (this.showPdf === true) {this.showPdf = false;this.iframeState = false;} else if (this.showImg === true) {this.showImg = false;this.iframeState = false;} else if (this.showDoc === true) {this.showDoc = false;this.iframeState = false;} else if (this.showPPt === true) {this.showPPt = false;this.iframeState = false;}},// 根据文件类型处理不同的文件handleClick(e) {let file = e.target.files[0];let type = this.iconByType(e);if (type.indexOf("pdf") !== -1) {this.iframeState = true;this.showPdf = true;this.viewPdf(file);} else if (type.indexOf("doc") !== -1 || type.indexOf("docx") !== -1) {this.iframeState = true;this.showDoc = true;this.viewDoc(file);} else if (type.indexOf("xsl") !== -1 ||type.indexOf("xslx") !== -1 ||type.indexOf("xls") !== -1) {this.iframeState = true;this.showExcel = true;this.exportData(e);} else if (type.indexOf("jpg") !== -1 ||type.indexOf("png") !== -1 ||type.indexOf("jpeg") !== -1) {this.showImg = true;this.iframeState = true;this.viewImg(file);} else if (type.indexOf("pptx") !== -1 || type.indexOf("ppt") !== -1) {this.showPPt = true;this.viewPPt(file);}},// 判断文件类型的方法iconByType(e) {let filename = e.target.files[0].name;return filename.substring(filename.lastIndexOf(".") + 1, filename.length);},// start:解析excel的方法exportData(event) {if (!event.currentTarget.files.length) {return;}const that = this;let f = event.currentTarget.files[0];let reader = new FileReader();reader.onload = function (e) {var data = e.target.result;var wb = XLSX.read(data, {type: "buffer",});var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);console.log(outdata);that.excelData = outdata;that.tableData = outdata.slice(0, 10);that.total = outdata.length;var importDataThead = Array.from(Object.keys(outdata[0])).map((item) => {return item;});that.columnHeader = importDataThead;that.checkboxTableColumn = importDataThead.slice(0, 9);console.log(importDataThead);};reader.readAsArrayBuffer(f);},// 分页切换CurrentChange(val) {this.currentPage = val;this.tableData = this.excelData.slice((val - 1) * this.pageSize,val * this.pageSize - 1);},// 每页显示数量改变handleSizeChange(val) {this.pageSize = val;this.tableData = this.excelData.slice((this.currentPage - 1) * val,this.currentPage * val - 1);},// end:解析excel的方法// 预览doc文件viewDoc(file) {const that = this;var reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = function () {const buffer = this.result; //此时是arraybuffer类型console.log(buffer);mammoth.convertToHtml({arrayBuffer: buffer }).then((result) => {that.vHtml = result.value;});};},// srart: 预览pdf文件// 预览pdf文件viewPdf(file) {var fileReader = new FileReader();let that = this;fileReader.onload = function () {that.src = this.result;};fileReader.readAsDataURL(file);},// 上一页prePage() {let page = this.pageNum;page = page > 1 ? page - 1 : this.pageTotalNum;this.pageNum = page;},// 下一页nextPage() {let page = this.pageNum;page = page < this.pageTotalNum ? page + 1 : 1;this.pageNum = page;},// end: 预览pdf文件// 预览图片viewImg(file) {let _this = this;let reader = new FileReader();reader.readAsDataURL(file); // 文件转换reader.onload = function () {_this.imgUrl = this.result;};},// 预览pptviewPPt(file) {let _this = this;let reader = new FileReader();reader.readAsDataURL(file); // 文件转换reader.onload = function () {_this.pptUrl = this.result;};},},};</script><style scoped>.block {height: 40px;padding: 0;display: flex;justify-content: center;align-items: center;}</style>
借鉴该篇文章（/weixin_44378416/article/details/119543832?spm=1001..3001.5502）
