下载相关 #

/**
 * @description: 导出excel
 * @param {binary} data 导出excel 二进制数据
 * @param {string} fileName 导出excel文件名字，带后缀
 * @Author: zhs
 */
export const exportExcel = (data, fileName) => {
  if (!data) {
    return;
  }
  // 判断是否是二进制数据
  const isArrayBuffer = data instanceof ArrayBuffer || data instanceof Blob;
  window.URL = window.URL || window.webkitURL; // 兼容性
  // 创建一个 URL 这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
  let url = isArrayBuffer ? window.URL.createObjectURL(new Blob([data])) : data;
  let link = document.createElement("a"); // 创建一个a元素
  link.style.display = "none"; // 让a元素在页面中隐藏
  link.href = url; // 绑定 a 元素的 href 为当前的url
  let exportName = fileName || "导出明细.xlsx";
  link.setAttribute("download", exportName); // 设置 a 元素 download属性(下载保存的文件名称)，属性值为后面的值
  link.setAttribute("target", "_blank"); // 设置 a 元素 target属性，再开一个标签页打开或者下载
  document.body.appendChild(link); // 添加到页面中
  link.click(); // 点击a元素 下载excel文件
  window.URL.revokeObjectURL(url); //卸载url，释放内存
};
//   // 判断是否是二进制数据
//   const isArrayBuffer = data instanceof ArrayBuffer || data instanceof Blob;
//   // 兼容性
//   window.URL = window.URL || window.webkitURL
//   // 1. 创建链接
//   let url = isArrayBuffer ? window.URL.createObjectURL(new Blob([data])) : data;
//   // 2. 创建 a 链接
//   let link = document.createElement('a')
//   // 3. 让这个 a 链接在页面中隐藏
//   link.style.disl=play = 'none'
//   // 4. 绑定 a 元素的href 为创建的url链接
//   link.href = url
//   // 5. 指定文件名称
//   let exportName = fileName || '导出明细'
//   // 6. 设置 a 元素的 download 属性，属性值为后面的值 setAttribute('属性名','属性值')
//   link.setAttribute('download',`${exportName}.xlsx`)
//   // 7. 将 a 元素添加到页面中
//   document.body.appendChild(link)
//   // 8. 点击 a 元素进行下载 excel 文件
//   link.click()
//   // 9. 卸载url，释放内存
//   window.URL.removeObjectURL(url)

const json = { a: 3, b: 4, c: 5 };
const str = JSON.stringify(json, null, 2);
// 方案一：Text -> DataURL
const dataUrl = `data:,${str}`;
exportExcel(dataUrl, "demo.json");

// 方案二：Text -> blob -> ObjectURL
const url = URL.createObjectURL(new Blob(str.split("")));
exportExcel(url, "demo1.json");

pnpm i  jszip && pnpm i file-saver

// 需要用到的插件
import JSZip from "jszip";
import FileSaver from "file-saver";

/**
 * @description: 单个文件下载 导出excel
 * @param {string} url 下载的url
 * @param {string} name 下载文件的名字 带后缀
 * @Author: zhs
 */
export const singleExportFile = (url, name) => {
  if (!name) {
    FileSaver.saveAs(url); // 未传入导出文件名称
  } else {
    FileSaver.saveAs(url, name); // 通过fileSaver导出下载文件
  }
};

pnpm i xlsx@0.18.5

import * as XLSX from "xlsx";

/**
 * @description:  把文件按照二进制方式读取
 * @param {binary} file :文件
 */
export const readFile = (file) => {
  return new Promise((resolve) => {
    let reader = new FileReader();
    // 二进制
    reader.readAsBinaryString(file);
    reader.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
};

/**
 * @description: 把文件按照base64方式读取
 * @param {binary} file
 */
export const readFileBase = (file) => {
  return new Promise((resolve) => {
    let reader = new FileReader();
    // base64
    reader.readAsDataURL(file);
    reader.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
};

/**
 * @description: 将excel中文表头转换为对应的字段
 * @param {Array} excelData: 导入的excel列表数据
 * @param {Object} header : excel列表中文表头和字段对应的映射
 */
export const changeCnToEnFn = (excelData, header) => {
  let result = [];
  excelData.forEach((obj) => {
    let info = {};
    Object.keys(header).forEach((key) => {
      info[header[key]] = obj[key];
    });
    result.push(info);
  });
  return result || [];
};

/**
 * @description: 将导入的excel文件转换为json格式
 * @param {*} file ：转换的文件
 */
export const excelToJson = async (excelFile) => {
  // 将文件内容转换为二进制文件
  let binaryData = await readFile(excelFile);
  // 将二进制数据通过 XLSX.read(fileData, { type: "binary" }) 方法生成 workbook 对象 type :'binary' 类型为二进制
  let eleData = XLSX.read(binaryData, { type: "binary" });
  //  eleData.SheetNames[0] 获取第一个 Sheet 的名称，有多个，其实就是第一个表格的名字
  //  eleData.Sheets 根据eleData.SheetNames[0]为key存的数据内容
  let eleDataSheet = eleData.Sheets[eleData.SheetNames[0]];
  // 将解析出的数据转换为json格式
  eleData = XLSX.utils.sheet_to_json(eleDataSheet);
  // 判断是否有表格头 现在单元格的合并对表格头会有一些影响，目前用是否有 __EMPTY_1 字段来判断是否有表格头（单元格合并的话不会有 __EMPTY）
  const hasTableHead = !!eleData[0].__EMPTY_1;
  // 有表头转换后的数据格式
  let tableDataArr = [];
  // 有表头
  if (hasTableHead) {
    // 获取表头数据，并且去除获取的表格中的表头（就是第一行为表格数据，去除掉）
    const header = eleData.shift();
    eleData.forEach((obj) => {
      let info = {};
      Object.keys(header).forEach((key) => {
        info[header[key]] = obj[key] || "";
      });
      tableDataArr.push(info);
    });
    return tableDataArr;
  } else {
    return eleData;
  }
};