XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能

卷毛崽

已于 2023-02-23 09:39:56 修改

阅读量1.3k

点赞数

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

于 2022-08-11 14:53:51 首次发布

本文链接：https://blog.csdn.net/qq_42221321/article/details/126285345

版权

安装依赖

npm install xlsx --save

template-用的element

          <el-upload
            :file-list="fileList"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            class="btn"
            :auto-upload="false"
            :show-file-list="false"
            :limit="1"
            :on-change="uploadfile"
          >
            导入
          </el-upload>

导入表格

接受el-input传过来的文件流，使用xlsx读取内容

    uploadfile(file) {
   
      console.log("上传的文件", file);
      let _this = this;
      let f = file.raw;
      let rABS = false; //是否将文件读取为二进制字符串

      let reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
   
      FileReader.prototype.readAsBinaryString = function (f) {
   
        let binary = "";
        let rABS = false; //是否将文件读取为二进制字符串
        let wb; //读取完成的数据
        let outdata;
        let reader = new FileReader();
        reader.onload = function (e) {
   
          let bytes = new Uint8Array(reader.result);
          let length = bytes.byteLength;
          for (let i = 0; i < length; i++) {
   
            binary += String.fromCharCode(bytes[i]);
          }
          let XLSX = require("xlsx"