Vue 导入 Excel 并修改数据并保留原始样式

要修改解析后的 Excel 文件数据并保持原有样式，需要以下步骤：

在 Vue 文件中引入 xlsx 和文件上传组件

import XLSX from 'xlsx';
import { Upload } from 'element-ui';

定义上传文件的方法

methods: {
  handleUpload(file) {
    let reader = new FileReader();
    reader.readAsBinaryString(file.raw);
    reader.onload = ev => {
      let data = ev.target.result;
      let workbook = XLSX.read(data, {type: 'binary'});
      let sheet_name_list = workbook.SheetNames;
      let worksheet = workbook.Sheets[sheet_name_list[0]];
      let json_data = XLSX.utils.sheet_to_json(worksheet, {header: 1});
      // 处理 json_data
      // ...
    }
  }
}

处理 json_data，修改需要修改的数据并保持原有样式

const range = XLSX.utils.decode_range(worksheet['!ref']);
for (let i = range.s.r + 1; i <= range.e.r; i++) {
  let row = worksheet[XLSX.utils.encode_row(i)];
  if (!row) continue;
  for (let j = range.s.c; j <= range.e.c; j++) {
    let cell_address = {c: j, r: i};
    let cell_ref = XLSX.utils.encode_cell(cell_address);
    let cell = row[j];
    if (cell) {
      // 处理需要修改的数据
      // ...
      // 保持原有样式
      if (worksheet[cell_ref]) {
        worksheet[cell_ref].v = cell;
        worksheet[cell_ref].t = 's';
        worksheet[cell_ref].s = worksheet[cell_ref].s || {};
        worksheet[cell_ref].s.font = {name: '宋体', sz: 11};
        worksheet[cell_ref].s.alignment = {horizontal: 'center', vertical: 'middle'};
        worksheet[cell_ref].s.border = {
          top: {style: 'thin', color: {auto: 1}},
          right: {style: 'thin', color: {auto: 1}},
          bottom: {style: 'thin', color: {auto: 1}},
          left: {style: 'thin', color: {auto: 1}}
        };
      }
    }
  }
}

将修改后的数据生成新的 Excel 文件，并提供下载

let wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, worksheet, sheet_name_list[0]);
let wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'binary'});
let filename = 'new.xlsx';
let blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'});
if (window.navigator.msSaveOrOpenBlob) {
  window.navigator.msSaveBlob(blob, filename);
} else {
  let link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
}
function s2ab(s) {
  let buf = new ArrayBuffer(s.length);
  let view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xff;
  }
  return buf;
}

在模板中使用文件上传组件，绑定上传文件的方法

<el-upload :show-file-list="false" :on-change="handleUpload">
  <el-button type="primary">上传文件</el-button>
</el-upload>