• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue项目实现表格预览

开发技术 开发技术 3小时前 1次浏览
装依赖:npm install XLSX

页面:

<template> <div class="el-container" id="xlsxView"></div> </template> <script> import * as XLSX from 'xlsx'; export default { data() { return { tableUrl: "", }; }, created() { this.tableUrl = "/docs/cc.xlsx"; }, components: {}, mounted(){ this.initTable(this.tableUrl); }, methods: { initTable(tableUrl) { let _self = this; const xhr = new XMLHttpRequest(); xhr.open("get", tableUrl, true); xhr.responseType = "arraybuffer"; xhr.onload = function () { if (xhr.status == 200) { let data = new Uint8Array(xhr.response); let workbook = XLSX.read(data, { type: "array" }); let sheetName = workbook.SheetNames; let innerHTML = ""; // 遍历多个表 for (let i in sheetName) { let sheet = workbook.Sheets[sheetName[i]]; innerHTML += sheetName[i]+ XLSX.utils.sheet_to_html(sheet); } _self.$nextTick(() => { document.querySelector("#xlsxView").innerHTML = innerHTML; }); } }; xhr.send(); }, }, }; </script> <style > table { border-collapse:collapse; border:none; font-size:0.23rem; } td,th { width:1px; white-space:nowrap; /* 自适应宽度*/ word-break:keep-all; /* 避免长单词截断,保持全部 */ border:solid #d5d5d5 1px; text-align:center; white-space:pre-line; display:table-cell; vertical-align:middle !important; height:auto; padding:2px 2px 0 2px; display: table-cell; } </style>

  

<template>
  <div class=“el-container” id=“xlsxView”></div>
</template>
<script>
import * as XLSX from ‘xlsx’;
export default {
  data() {
    return {
      tableUrl: “”,
    };
  },
  created() {
    this.tableUrl = “/docs/cc.xlsx”;
  },
  components: {},
  mounted(){
    this.initTable(this.tableUrl);
  },
  methods: {
    initTable(tableUrl) {
        let  _self = this;
        const xhr = new XMLHttpRequest();
        xhr.open(“get”tableUrltrue);
        xhr.responseType = “arraybuffer”;
        xhr.onload = function () {
            if (xhr.status == 200) {
                let data = new Uint8Array(xhr.response);
                let workbook = XLSX.read(data, { type: “array” });
                let sheetName = workbook.SheetNames;
                let innerHTML = “”;
                // 遍历多个表
                for (let i in sheetName) {
                    let sheet = workbook.Sheets[sheetName[i]];
                    innerHTML += sheetName[i]+ XLSX.utils.sheet_to_html(sheet);
                }
                _self.$nextTick(() => {
                    document.querySelector(“#xlsxView”).innerHTML = innerHTML;
                });
            }
        };
        xhr.send();
    },
  },
};
</script>
<style >
table {
    border-collapse:collapse;
    border:none;
    font-size:0.23rem;
}

td,th {
    width:1px;
    white-space:nowrap/* 自适应宽度*/
    word-break:keep-all/* 避免长单词截断,保持全部 */
    border:solid #d5d5d5 1px;
    text-align:center;
    white-space:pre-line;
    display:table-cell;
    vertical-align:middle !important;
    height:auto;
    padding:2px 2px 0 2px;
    displaytable-cell;
}    
</style>

程序员灯塔
转载请注明原文链接:vue项目实现表格预览
喜欢 (0)