前端导出格式化文件

82 阅读2分钟

一、对象数组导出表格形式txt

思路

  1. 确定列名:从数组中提取所有键,作为数据的列名(一般取数组第一条对象数据即可
  2. 转换对象数组为符合CSV数据的格式:遍历数组,将每个对象的属性值按照列名顺序转换成CSV格式的行
  3. 创建Blob对象:使用 new Blob()构造函数将csv格式的字符串转为一个Blob对象
  4. 创建下载链接:创建一个临时的a元素,并设置href属性为Blob对象的URL

注意下map、Object.keys()的使用

function downloadObjectArrayAsCSV(objArray, filename) {
    // 确定列名
    const kyes = objArray.length > 0 ? Object.keys(objArray[0]) : []; //['Name', 'Age', 'City']
    
    //列名转为csv格式的字符串 
    const csvContent = keys.join('   |    ') + '\n'; // Name     |     Age     |     City
     
    
    //转换数组的数据为csv的每一行 ['John     |     30     |     New York', 'Jane     |     25     |     Los Angeles', 'fang     |     31     |     beijing']
    const csvRows = objArray.map(obj => {
        return keys.map(key => obj[key]).join('     |     ');
    });
    
    
    // 将所有行添加到csv内容中
    csvContent += csvRows.join('\n');
    
    // 创建blob对象,使用utf-8编码
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
    
    // 创建链接元素
    const link = document.createElement('a'); 
    link.href = URL.createObjectURL(blob);
    
    // 设置下载文件的名称
    link.download = fileName;
    
    // 触发、下载
    link.click();
    
    // 删除URL
    URL.revokeObjectURL(link.href);
   
}

结果:

image.png

json数据下载格式化json文件

思路:

  1. 转换JSON数据为字符串: 将JSON对象转换为一个格式化的字符串,使用JSON.stringify(),并添加空格参数美化
  2. 创建blob对象
  3. 创建下载链接
  4. 触发下载

注意JSON.stringify参数

function downloadJSONAsText(jsonObj, fileName) {
  // 将JSON对象转换为格式化的字符串
  const jsonStr = JSON.stringify(jsonObj, null, 4); // 第三个参数是缩进的空格数

  // 创建一个新的Blob对象,使用utf-8编码
  const blob = new Blob([jsonStr], { type: 'text/plain;charset=utf-8' });

  // 创建一个链接元素
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);

  // 设置下载文件的名称
  link.download = fileName;

  // 模拟点击链接,触发文件下载
  link.click();

  // 清理DOM
  URL.revokeObjectURL(link.href);
}

// 使用示例
const jsonData = {
  name: "John",
  age: 30,
  city: "New York"
};

// 调用函数,下载JSON数据为文本文件
downloadJSONAsText(jsonData, 'data.txt');