问答

读取excel表格中的数据展示到页面中,不是点击上传那种

作者:admin 2021-05-08 我要评论

我现在本地上传是可以用的,但是我这些数据都在excel中,就像图片一样的静态文件放在自己项目里,然后当我第一次进入页面就执行一次读取 xlsx 文件把这些数据展...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

我现在本地上传是可以用的,但是我这些数据都在excel中,就像图片一样的静态文件放在自己项目里,然后当我第一次进入页面就执行一次读取xlsx文件把这些数据展示到页面表格上,再把读取过的数据保存到浏览器中,这种可以实现吗?
我试了下,一用 import 导入 xlsx 文件就会报错。
0398fd01e1610cbfeeb992141a5db9d.png
// 子组件

<div class="table-box">
    <!-- <vxe-toolbar> // 这是上传按钮
      <template v-slot:buttons>
        <vxe-button @click="impotEvent">选择文件</vxe-button>
      </template>
    </vxe-toolbar>
    -->
    <vxe-table
      border
      resizable
      show-overflow
      keep-source
      ref="xTable"
      width="100%"
      height="auto"
      max-height="600"
      class="xTable"
      :loading="loading"
      :data="dataSource"
    >
      <vxe-table-column
        v-for="(item, i) in tableColumn"
        :key="i"
        :type="item.type"
        :title="item.title"
        :field="item.field"
        :fixed="item.fixed"
        :width="item.width"
        :min-width="item.mWidth"
      ></vxe-table-column>
    </vxe-table>
  </div>

<script>
import XLSX from "xlsx";
// import fires from '../assets/xlsx/fires.xlsx' // 会报错
export default {
  props: ["tableColumn"],
  data() {
    return {
      loading: false, // table蒙层
      dataSource: [],
    };
  },
  created() {
    this.impotEvent()
  },
  methods: {
    impotEvent() {
      this.$refs.xTable
        // .readFile({
        //   types: ["xls", "xlsx"]
        // })
        .then(params => {
          const { files } = params;
          const fileReader = new FileReader();
          fileReader.onload = ev => {
            const data = ev.target.result;
            const workbook = XLSX.read(data, { type: "binary" });
            const csvData = XLSX.utils.sheet_to_csv(workbook.Sheets.Sheet1);
            const tableData = [];
            // 解析数据
            csvData.split("\n").forEach(vRow => {
              if (vRow) {
                const vCols = vRow.split(",");
                const item = {};
                vCols.forEach((val, cIndex) => {
                  if(cIndex < this.tableColumn.length) {
                    const column = this.tableColumn[cIndex];
                    if(column.field) {
                        item[column.field] = val;
                    }
                  }                  
                });
                tableData.push(item);
              }
            });
            console.log(tableData)
            this.dataSource = tableData;
          };
          fileReader.readAsBinaryString(files[0]);
        });
    }
  }
};
</script>
###

xlsx文件只能通过本地文件读取方式去获取,如果是在浏览器中执行,还可能有浏览器安全限制。
关于解析xlsx的库需要用其它方式引入,而不是在html页面中import引入。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 读取excel表格中的数据展示到页面中,

    读取excel表格中的数据展示到页面中,

  • 关于sizeof的概念

    关于sizeof的概念

  • 请问下文章的分类或者标签在mongodb中

    请问下文章的分类或者标签在mongodb中

  • vue中子组件使用this.$emit给父组件传

    vue中子组件使用this.$emit给父组件传

腾讯云代理商
海外云服务器