需求描述：

需要一個組件，同時能預覽多種類型文件，一種類型文件可有多個的文件。

看過各種博主的方案，其中最簡單的是利用第三方地址進行預覽解析（無需任何插件）；

這里推薦三個地址：???????

????????@params 微軟解析地址

? ? ? ? @url ? ?https://view.officeapps.live.com/op/view.aspx?src=資料地址

? ? ? ? @params docx云服務解析 大小限制 50MB

? ? ? ? @url ? ?http://view.xdocin.com/xdoc?_xdoc=資料地址

? ? ? ? @params 豆瓣在線預覽解析 ?

? ? ? ? @url ? ?www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=資料地址

?效果圖：

已測試，因為單線程原因，可能有些文件無法同時展現(xiàn)，后期還會優(yōu)化

?注意：操作的文件必須是公網(wǎng)能訪問得到的，否則無法被解析；

組件代碼：

<!--多文件類型預覽-->
<template><el-dialogclass="filedialog"title="文件預覽"append-to-body:visible.sync="dialogVisible"close-on-press-escape@close="close"width="70%"><span slot="title" class="dialog-footer"><div class="title"><span>文件預覽</span></div><div class="select_box"><el-selectv-model="fileType"placeholder="請選擇文件類型"@change="selectChange"clearabletransfer="true":popper-append-to-body="false"popper-class="select-popper"><el-optionv-for="(item, index) in fileTypes":key="index":label="`文件類型` + (index + 1) + item":value="item">{{ `文件類型` + (index + 1) + item }}</el-option></el-select></div></span><template v-if="onImg"><iframev-for="(item, index) in fileListInfo":src="item"frameborder="0"width="100%"height="650"class="iframe"></iframe></template><template v-else><div class="block" :style="{ height: '600px' }"><!-- <span class="demonstration">默認 Hover 指示器觸發(fā)</span> --><el-carousel height="600px"><el-carousel-item v-for="item in fileListInfo" :key="item"><h3 class="small"><img:src="item"alt="":style="{ width: '100%', height: 'auto' }"/></h3></el-carousel-item></el-carousel></div></template></el-dialog>
</template><script>
export default {name: "file_Preview",data() {return {imgVisibleURL: "",onImg: true,dialogVisible: false,fileTypes: [],fileType: "",fileListInfo: null,};},props: {fileDialogVisible: {type: Boolean,},filePreview: {type: String,default: "",},},watch: {fileDialogVisible: {handler(newVal, oldVal) {this.dialogVisible = newVal;},deep: true,immediate: true,},filePreview: {handler(newVal, oldVal) {if (newVal) {this.imgVisibleURL = newVal;//類型收集this.fileTypes = this.conversion(newVal);//默認選中this.$nextTick(() => {this.fileType = this.fileTypes[0];this.selectChange(this.fileTypes[0]);});}},deep: true,immediate: false,},},created() {},mounted() {},methods: {/***  @params 微軟解析地址@url    https://view.officeapps.live.com/op/view.aspx?src=@params docx云服務解析 大小限制 50MB@url    http://view.xdocin.com/xdoc?_xdoc=@params 豆瓣在線預覽解析  @url    www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=*/conversion(str) {str.split(",").forEach((item, index) => {let extIndex = item.lastIndexOf(".");let ext = item.substr(extIndex);this.fileTypes.push(ext);});let unique = (arr) => {return Array.from(new Set(arr));};return unique([...this.fileTypes]);},selectChange(e) {const fileDataList = this.fileFilter(this.imgVisibleURL.split(","), e);if (e == ".xls" ||e == ".doc" ||e == ".docx" ||e == ".xlsx" ||e == ".detx" ||e == ".pptx" ||e == ".ppt" ) {//需二次處理this.onImg = true;this.fileListInfo = fileDataList;this.fileListInfo = this.fileListInfo.map((url, index) => {return `https://view.officeapps.live.com/op/view.aspx?src=${url}`;});} else if (e == ".png" || e == ".jpg" || e == ".webp" || e == ".gif") {//圖片類型直接this.onImg = false;this.fileListInfo = fileDataList;} else if (e == ".pdf") {//.pdf類型不需要二次處理this.onImg = true;this.fileListInfo = fileDataList;}},fileFilter(arr, callback) {let urlArr = [];arr.forEach((item, index) => {let extIndex = item.lastIndexOf(".");let ext = item.substr(extIndex);if (ext == callback) {urlArr.push(item);}});return urlArr;},close() {this.$emit("fileCloseDialog", false);this.fileTypes = [];this.fileListInfo = null;this.fileType = "";},},
};
</script><style lang="less" scoped>
.filedialog {width: 100%;height: 100%;z-index: 9999 !important;::v-deep .dialog-footer {height: 50px;font-size: 19px;display: flex;align-items: center;position: relative;.select_box {position: absolute;right: 100px;}}::v-deep .el-dialog {opacity: 0.9;.el-dialog__body {height: 700px;margin: 0;padding: 15px;background: #00132f;overflow: auto;// 滾動條整體部分&::-webkit-scrollbar {width: 6px;height: 6px;}// 滾動條的軌道的兩端按鈕，允許通過點擊微調(diào)小方塊的位置。&::-webkit-scrollbar-button {display: none;}// 滾動條的軌道（里面裝有Thumb）&::-webkit-scrollbar-track {background: transparent;}// 滾動條的軌道（里面裝有Thumb）&::-webkit-scrollbar-track-piece {background-color: transparent;}// 滾動條里面的小方塊，能向上向下移動（或往左往右移動，取決于是垂直滾動條還是水平滾動條）&::-webkit-scrollbar-thumb {background: #fff;cursor: pointer;border-radius: 4px;}// 邊角，即兩個滾動條的交匯處&::-webkit-scrollbar-corner {display: none;}// 兩個滾動條的交匯處上用于通過拖動調(diào)整元素大小的小控件&::-webkit-resizer {display: none;}}.el-dialog__header {background: #00132f;color: white;}}
}</style>

方法還是有很多的，下面給大家推薦幾個還不錯的網(wǎng)站；

可參考：

vue在線預覽word、excel、pdf、txt、圖片的相關(guān)資料,

https://www.jb51.net/article/266520.html

vue集成Luckyexcel實現(xiàn)在線編輯Excel，可自行導入，也可從服務器端獲取：

https://blog.csdn.net/weixin_45000975/article/details/121856816

希望對大家有所幫助，如有不妥，多多包涵