Vue XLSX实现解析excel文件并将数据保存到服务器端

最新推荐文章于 2024-11-22 20:23:32 发布

laoyaotask

最新推荐文章于 2024-11-22 20:23:32 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/laoyaotask/article/details/122356005

版权

本文介绍了如何在Vue.js应用中使用XLSX库解析Excel文件，并将处理后的数据通过PHP上传到服务器端。关键在于理解和操作XLSX库，以及在前端进行数据清洗和格式化的步骤。

摘要由CSDN通过智能技术生成

需求如题。这里的关键点是对XLSX使用方式的理解与掌握，难点是数据本身的清洗、格式化过程。
html部分

<el-button size="mini" type="success" round @click="importFromxlsx()" title="导入人员"><i class="el-icon-upload2"></i>
    </el-button>&emsp;&emsp;
    <a href="/static/看护人员基本信息表-模板（空）.xlsx" target="_blank">下载模板</a>

    <!-- 弹窗：批量上传人员 -->
    <el-dialog title="上传人员表" :visible.sync="showDialogFile" width="30%">
      <el-upload action="" :auto-upload="false" :on-change="uploadFile" :limit="1">
        <el-button size="mini" type="success">上传文件</el-button>
      </el-upload>
    </el-dialog>

js部分

  import FileSaver from "file-saver";
  import XLSX from "xlsx";

  export default {
    name: "Member",
    data: function() {
      return {
        showDialogFile: false,
      }
    },
    methods: {
    //打开上传文件弹窗
      importFromxlsx: function() {
        this.showDialogFile = true
      },

      //执行文件解析并保存数据
      async uploadFile(file) {
        this.$message.info("开始解析文件，请稍后……")
        let dataBinary = await readFile(file.raw)
        let workBook = XLSX.read(dataBinary, {
          type: 'binary',
          cellDates: true
        })
        let workSheet = workBook.Sheets[workBook.SheetNames[0]]
        const sheet2JSONOpts =

最低0.47元/天解锁文章