淘宝联盟 网站备案,微信内转发的网页怎么制作,泊头那家做网站,杭州学校网站开发一、插件
通过xlsx插件解析excel数据#xff0c;对解析后的html组件进行渲染展示。
npm install xlsx
二、完整代码
template!-- excel文件预览 --divelement-loading-text拼命加载中element-loading-spinnerel-icon-loading对解析后的html组件进行渲染展示。
npm install xlsx
二、完整代码
template!-- excel文件预览 --divelement-loading-text拼命加载中element-loading-spinnerel-icon-loadingelement-loading-backgroundrgba(0, 0, 0, 0.8)classpanel-box pd-15div classfile-preel-tabs v-modelactiveName typeborder-card styleoverflow:autoel-tab-pane v-for(item,index) in excelSheet :keyindex :labelitem.name :nameitem.name styleoverflow:autodiv classtable v-htmlitem.innerHTML/div/el-tab-pane/el-tabs/divdiv classtc mgt-20button classbtn-submit clickclose()关闭/button/div/div
/templatescript
import { read, utils } from xlsx;export default {name:excelFilePreview,data() {return {activeName:,excelSheet:[],};},created() {const params this.$commonUtil.decodeQuery(this.$route.query.info);this.previewFile(params);},methods: {previewFile(docId){this.excelSheet [];const inParam {DOC_ID: docId,STAFF_NAME: this.$store.getters.staffName,SYS_USER_CODE: this.$store.getters.systemUserCode};const loading this.$commonUtil.loading.open();this.$downloadBuffer(this.mciApi.common.file.previewFile, {...inParam}).then(r {loading.close();const data new Uint8Array(r);const workbook read(data, {type: array});// 删除掉没有数据的sheetObject.values(workbook.Sheets).forEach((sheet, index) {if (Object.keys(sheet).indexOf(!ref) -1) {delete workbook.Sheets[workbook.SheetNames[index]];}});this.tableToHtml(workbook);}).catch((e) {loading.close()})},tableToHtml(workbook) {const sheetList workbook.SheetNames.filter((v) v.indexOf(数据源) -1);this.activeName sheetList[0];sheetList.forEach((sheet) {const worksheet workbook.Sheets[sheet];if (worksheet) {const innerHTML utils.sheet_to_html(worksheet);this.excelSheet.push({name: sheet,innerHTML: innerHTML});} else {this.excelSheet.push({name: sheet,innerHTML: 暂无数据,});}});},close(){this.$commonUtil.closeCurrentTagBackLast(this.$route,false);},}
};
/scriptstyle langscss scope
.file-pre {padding: 20px;.table-html-wrap /deep/ table {border-right: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;border-collapse: collapse;margin: auto;}.table-html-wrap /deep/ table td {border-left: 1px solid #e8eaec;border-top: 1px solid #e8eaec;white-space: wrap;text-align: left;min-width: 100px;padding: 4px;}table {border-top: 1px solid #EBEEF5;border-left: 1px solid #EBEEF5;width: 100%;overflow: auto;tr {height: 44px;}tr:first-child{background: #f2f8ff;}td {min-width: 200px;max-width: 400px;padding: 4px 8px;border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;}}
}
/style
注意 $downloadBuffer封装的post请求请求中的 responseType 需要设置为 arraybuffer 三、预览效果
