vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue excel导入导出

vue实现excel表格的导入导出的示例

作者:filter忠实信徒

本文主要介绍了vue实现excel表格的导入导出的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、下载xlsx插件

npm i xlsx

二、通过element-ui组件的upload组件上传文件

  <el-upload
    class="upload-demo"
    action //必选参数,上传的地址,这里我们不写地址自定义上传
    accept=".xlsx,.xls"  //文件类型
    :auto-upload="false" //是否在选取文件后立即进行上传
    :show-file-list="false" //是否显示已上传文件列表
    :on-change="handleChange" //文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
  >
    <el-button type="primary">选择文件</el-button>
  </el-upload>

三、把选择的Excel文件把文件内容转化为二进制

//把二进制文件进行读取
export function readFile(file) {
  return new Promise((resolve, reject) => {
    // FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件.
    let reader = new FileReader();
    // 异步按字节读取文件内容,结果为文件的二进制串
    reader.readAsBinaryString(file);
    reader.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
}

四、通过插件中的xlsx.read()读取二进制数据

//选择文件
const handleChange = async function (e) {
    const file = e.raw; //选择的文件内容
    let data = await readFile(file); //将内容转化为二进制
    let workbook = xlsx.read(data, { type: "binary" });  //通过插件读取二进制数据 binary二进制
}

五、通过xlsx.utils.sheet_to_json()把表格一中的数据转化为JSON格式

  //表格目录一中的数据
  let worksheet = workbook.Sheets[workbook.SheetNames[0]];
  //把数据转化为json数据格式
  data = xlsx.utils.sheet_to_json(worksheet);

六、把读取的JSON数据转化为可以传递给服务器的数据

 //把读取的数据变为最后可以传递给服务器的数据(所在地=>address,学校名称=>shcoolName......)
  let arr = [];
  data.forEach((item) => {
    let obj = {};
    for (let key in character) {
      //  hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)
      //  即使属性的值是 null 或 undefined,只要属性存在,hasOwnProperty 依旧会返回 true。
      //  判断是否有规定的属性没有就终止执行
      if (!character.hasOwnProperty(key)) break;
      let v = character[key],
        text = v.text,
        type = v.type;
      v = item[text] || "";
      //将数据转化为对应的数据类型 不符合的话不做操作
      type === "string" ? (v = String(v)) : null;
      type === "number" ? (v = Number(v)) : null;
      obj[key] = v;
    }
    arr.push(obj);
  });
  //给用户一点延迟
  await delay(100);
  //将导入数据展示到页面中
  result.tableData = arr;

导出

// 1.把数据转化为表格名称对应
  let arr = result.tableData.map((item) => {
    return {
      办学层次: item.levels,
      备注: item.message,
      学校名称: item.schoolName,
      所在地: item.address,
    };
  });
  //2.用于将 JSON 数据转换为 Excel 工作表中的单元格数据。
  let sheet = xlsx.utils.json_to_sheet(arr);
  //3.用于创建一个新的 Excel 工作簿对象它返回一个空白的工作簿,可以向其中添加工作表和单元格数据。
  let book = xlsx.utils.book_new();
  //4.用于向现有的 Excel 工作簿对象(Workbook)中添加一个新的工作表
  // book_append_sheet(wb, sheet, name=None)
  //参数wb是要将工作表添加到的 Workbook 对象;sheet 参数是要添加的 Worksheet 对象;name 参数是要为工作表指定的名称(如果未指定,则使用默认名称)
  xlsx.utils.book_append_sheet(book, sheet, "sheet1");
  //5.用于将 Excel 工作簿下载到本地文件系统中 book要下载的Eceial表格,第二个参数是表格名称
  xlsx.writeFile(book, `user${new Date().getTime()}.xls`);

到此这篇关于vue实现excel表格的导入导出的示例的文章就介绍到这了,更多相关vue excel导入导出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文