解决VUE将对象数组导出excel表

解决VUE将对象数组导出excel表

1.使用数组对象的对象的字段当列标题

/**
 * 将JSON数据导出为Excel文件
 * @param {Array} jsonData - 要导出的对象数组
 * @param {String} filename - 导出文件的名称，默认为'exported_data'
 */
function exportToJsonExcel(jsonData, filename = 'exported_data') {
  // 创建一个新的工作簿
  const workbook = XLSX.utils.book_new()

  // 定义列标题，使用JSON数据的第一个对象的键名作为标题
  const header = Object.keys(jsonData[0])

  // 创建一个新的工作表，并将JSON数据转换为Excel工作表，同时设置列标题
  const worksheet = XLSX.utils.json_to_sheet(jsonData, { header })

  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

  // 将工作簿转换为二进制数据，准备下载
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })

  // 创建一个Blob对象，用于表示二进制数据
  const data = new Blob([excelBuffer], { type: 'application/octet-stream' })

  // 创建一个URL表示这个Blob对象，以便可以在网页上访问它
  const url = URL.createObjectURL(data)

  // 创建一个隐藏的可下载链接，并模拟点击以触发下载
  const a = document.createElement('a')
  a.href = url
  a.download = `${filename}.xlsx`
  a.click()
  // 清理：撤销对URL的引用，以释放资源
  URL.revokeObjectURL(url)
}

注意：

• header为行标题，也就是表格第一行

2.如果你想自定义列标题而不是使用 JSON 数据或者对象数组中的键名作为默认标题，你可以在 XLSX.utils.json_to_sheet 方法中传入一个自定义的标题数组

/**
 * 将JSON数据导出为Excel文件
 * @param {Array} jsonData - 要导出的对象数组
 * @param {Array} customHeaders - 自定义的列标题数组
 * @param {String} filename - 导出文件的名称，默认为'exported_data'
 */
function exportToExcel(jsonData, customHeaders, filename = 'exported_data') {
  // 创建一个新的工作簿
  const workbook = XLSX.utils.book_new()

  // 使用自定义的列标题
  const header = customHeaders

  // 创建一个新的工作表，并将JSON数据转换为Excel工作表，同时设置列标题
  const worksheet = XLSX.utils.json_to_sheet(jsonData, { header })

  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')

  // 将工作簿转换为二进制数据，准备下载
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })

  // 创建一个Blob对象，用于表示二进制数据
  const data = new Blob([excelBuffer], { type: 'application/octet-stream' })

  // 创建一个URL表示这个Blob对象，以便可以在网页上访问它
  const url = URL.createObjectURL(data)

  // 创建一个隐藏的可下载链接，并模拟点击以触发下载
  const a = document.createElement('a')
  a.href = url
  a.download = `${filename}.xlsx`
  a.click()
  // 清理：撤销对URL的引用，以释放资源
  URL.revokeObjectURL(url)
}

3.以上两个代码会出现生成的excel出现两组标题行，一组是自定义的，一组是键名，只使用自定义标题行，解决代码如下

function exportToExcel(jsonData, customHeaders, filename = 'exported_data') {  
  // 创建一个新的工作簿  
  const workbook = XLSX.utils.book_new();  
  
  // 使用 json_to_sheet 转换数据，但不自动添加标题行  
  const worksheet = XLSX.utils.json_to_sheet(jsonData, { header: [] }); // 使用空数组来明确不添加自动标题  
  
  // 如果有自定义标题，则添加到工作表中  
  if (customHeaders && customHeaders.length > 0) {  
    const range = XLSX.utils.decode_range(worksheet['!ref']);  
    const headerRow = {};  
    customHeaders.forEach((header, colIdx) => {  
      headerRow[XLSX.utils.encode_col(colIdx + 1)] = { t: 's', v: header }; // 注意列索引从1开始  
    });  
    XLSX.utils.sheet_add_json(worksheet, [headerRow], { origin: { r: 0, c: 0 } }); // 在第一行添加自定义标题  
  }  
  
  // 将工作表添加到工作簿中  
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');  
  
  // 将工作簿转换为二进制数据，准备下载  
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  
  
  // 创建一个Blob对象，用于表示二进制数据  
  const data = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });  
  
  // 创建一个URL表示这个Blob对象，以便可以在网页上访问它  
  const url = URL.createObjectURL(data);  
  
  // 创建一个隐藏的可下载链接，并模拟点击以触发下载  
  const a = document.createElement('a');  
  a.href = url;  
  a.download = `${filename}.xlsx`; // 注意这里使用了模板字符串的正确语法  
  document.body.appendChild(a); // 添加到DOM中（有些浏览器需要这样做才能触发下载）  
  a.click();  
  document.body.removeChild(a); // 清理  
  
  // 清理：撤销对URL的引用，以释放资源  
  URL.revokeObjectURL(url);  
}s

使用：

const jsonData = [
  { name: 'Alice', age: 30, city: 'New York' },
  { name: 'Bob', age: 25, city: 'San Francisco' }
];

const customHeaders = ['姓名', '年龄', '城市'];

exportToExcel(jsonData, customHeaders, 'my_data');

这个不知道为什么会出现导出的EXcel出现BCD。。。标题头，另一篇文章已经解决，大家可以看另一篇文章https://blog.csdn.net/weixin_65363325/article/details/141142226?spm=1001.2014.3001.5501