导出

前置工作：这个功能在我们课程一开始学习的vue-element-admin中有现成的功能参考，我们也在项目资源里提供了现成的插件包vendor，大家先把它复制到自己项目的src目录下

vue-element-admin源码 src/views/excel/export-excel.vue · 花裤衩/vue-element-admin - Gitee.com 步骤

npm i file-saver xlsx -S
import ElementUI from 'element-ui' 引用elementui (这里我项目用的是element，看你个人用不用)
引用vendor里的方法

import("@/vendor/Export2Excel").then((excel) => {
    // excel表示导入的模块对象
    console.log(excel);
    excel.export_json_to_excel({
      header: [
        id,
        name,
      ], // 表头 必填
      data: datas, // 具体数据 必填
      filename: 文件名称
      autoWidth: true, // 宽度是否自适应
      bookType: "xlsx", // 生成的文件类型
    });
});

或者创建工具类文件 utils.js（核心）

import XLSX from "xlsx"; //这里报错就用 import * as XLSX from "xlsx"
import FileSaver from "file-saver";

/**
 * 异步读取Excel文件的sheet表为json数据
 * 不支持合并单元格
 * @param {File对象} file
 */
export function readExcelToJson(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = (e) => {
      let data = new Uint8Array(e.target.result);
      let workbook = XLSX.read(data, { type: "array" });
      //  console.log("workbook: ", workbook);

      //将Excel 第一个sheet内容转为json格式
      let worksheet = workbook.Sheets[workbook.SheetNames[0]];
      let json = XLSX.utils.sheet_to_json(worksheet);
      //   console.log("jsonExcel:", jsonExcel);
      resolve(json);
    };

    reader.readAsArrayBuffer(file.raw);
  });
}

/**
 * 保存json为Excel文件
 * @param {*} data
 * @param {*} filename  文件名后缀为.xlsx
 */
export function saveJsonToExcel(data, filename) {
  let sheet = XLSX.utils.json_to_sheet(data);

  let workbook = {
    SheetNames: ["sheet1"],
    Sheets: {
      sheet1: sheet,
    },
  };

  let wbout = XLSX.write(workbook, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });

  FileSaver.saveAs(
    new Blob([wbout], { type: "application/octet-stream" }),
    filename
  );
}

根据url，导出pdf文件

export function downBlobFileByType(url, fileType, fileName) {
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      // 将链接地址字符内容转变成blob地址
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = `${fileName}`; // 下载文件的名字
      document.body.appendChild(a);
      a.click();
      window.setTimeout(function () {
        window.URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      }, 0);
    });
}

导入

import { readExcelToJson } from "@/vendor/Export2Excel.js";
readExcelToJson(uploadFile).then((res) => {
    //导入的数据处理
    transExcel(res)
});

transExcel(results) {
  const mapInfo = {
    '入职日期': 'timeOfEntry',
    '手机号': 'mobile',
    '姓名': 'username',
    '转正日期': 'correctionTime',
    '工号': 'workNumber',
    '部门': 'departmentName',
    '聘用形式': 'formOfEmployment'
  }
  return results.map(zhObj => {
    const enObj = {}
    const zhKeys = Object.keys(zhObj) // ['姓名', '手机号']

    zhKeys.forEach(zhKey => {
      const enKey = mapInfo[zhKey]

      enObj[enKey] = zhObj[zhKey]
    })

    return enObj
  })
}

vue实现纯前端导入、导出与解析excel表格文件

导出

导入