分销网站建立,公司网站优化软件,网络任务推广,网站兼容手机浏览器需求描述#xff1a;
需要一个组件#xff0c;同时能预览多种类型文件#xff0c;一种类型文件可有多个的文件。
看过各种博主的方案#xff0c;其中最简单的是利用第三方地址进行预览解析#xff08;无需任何插件#xff09;#xff1b; 这里推荐三个地址#xff1a…需求描述
需要一个组件同时能预览多种类型文件一种类型文件可有多个的文件。
看过各种博主的方案其中最简单的是利用第三方地址进行预览解析无需任何插件 这里推荐三个地址 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?_functo_formathtml_cache1_xdoc资料地址 效果图 已测试因为单线程原因可能有些文件无法同时展现后期还会优化 注意操作的文件必须是公网能访问得到的否则无法被解析
组件代码
!--多文件类型预览--
templateel-dialogclassfiledialogtitle文件预览append-to-body:visible.syncdialogVisibleclose-on-press-escapecloseclosewidth70%span slottitle classdialog-footerdiv classtitlespan文件预览/span/divdiv classselect_boxel-selectv-modelfileTypeplaceholder请选择文件类型changeselectChangeclearabletransfertrue:popper-append-to-bodyfalsepopper-classselect-popperel-optionv-for(item, index) in fileTypes:keyindex:label文件类型 (index 1) item:valueitem{{ 文件类型 (index 1) item }}/el-option/el-select/div/spantemplate v-ifonImgiframev-for(item, index) in fileListInfo:srcitemframeborder0width100%height650classiframe/iframe/templatetemplate v-elsediv classblock :style{ height: 600px }!-- span classdemonstration默认 Hover 指示器触发/span --el-carousel height600pxel-carousel-item v-foritem in fileListInfo :keyitemh3 classsmallimg:srcitemalt:style{ width: 100%, height: auto }//h3/el-carousel-item/el-carousel/div/template/el-dialog
/templatescript
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?srcparams docx云服务解析 大小限制 50MBurl http://view.xdocin.com/xdoc?_xdocparams 豆瓣在线预览解析 url www.xdocin.com/xdoc?_functo_formathtml_cache1_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 ;},},
};
/scriptstyle langless 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;}// 滚动条的轨道的两端按钮允许通过点击微调小方块的位置。::-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;}// 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件::-webkit-resizer {display: none;}}.el-dialog__header {background: #00132f;color: white;}}
}/style
方法还是有很多的下面给大家推荐几个还不错的网站
可参考
vue在线预览word、excel、pdf、txt、图片的相关资料,
https://www.jb51.net/article/266520.html
vue集成Luckyexcel实现在线编辑Excel可自行导入也可从服务器端获取
https://blog.csdn.net/weixin_45000975/article/details/121856816 希望对大家有所帮助如有不妥多多包涵
