前端js实现自定义表格导出

1.npm下载xlsx插件

2.utils下新建一个名为excelExport的js文件

const xlsx = require('xlsx')

const s2ab = (s) => {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
};

const excelExport = (header, exportList, sheetName = "列表",colsWidth) => {
  if (!header || !exportList) {
    return;
  }

  // 生成workbook
  const workbook = xlsx.utils.book_new();
  debugger
  // 插入表头
  const headerData = [header];
  exportList.forEach((info) => {
    headerData.push(info);
  });
  // 生成worksheet
  const worksheet = xlsx.utils.json_to_sheet(headerData, {
    skipHeader: true,
  });
  // 组装

  if(colsWidth){
    worksheet['!cols']=colsWidth.map(a=>({wpx:a}))
  }

  xlsx.utils.book_append_sheet(workbook, worksheet, sheetName);

  const f = xlsx.write(workbook, {
    bookType: "xlsx",
    type: "buffer",
  });
  const eleLink = document.createElement("a");
  const blob = new Blob([s2ab(f)], {
    type: "application/octet-stream",
  });
  eleLink.download = `${sheetName}.xls`;
  eleLink.href = URL.createObjectURL(blob);
  document.body.appendChild(eleLink);
  eleLink.click();
  document.body.removeChild(eleLink);
};

export { excelExport };

3.在需要用到的页面引用

<el-button size="mini" icon="el-icon-download" type="primary" plain  @click="uploadTemplateHandle">下载</el-button>

import { excelExport } from "@/utils/ExcelExport";
export default {
	methods: {
		uploadTemplateHandle() {
             const exportHeadData = {
                name: "姓名",
                gender: "性别",
                age: "年龄",
                hobby: "爱好",
                education: "学历",
                occupation: "职业",
            };
            const list =  [
                    {
                        name: "新新子",
                        gender: "女",
                        age: "18",
                        hobby: "撸猫",
                        education: "大专",
                        occupation: "前端开发工程师",
                    }
                ]
            excelExport(
                exportHeadData,   // 表头
                list , // 列表数据
                "xxx文件",  // 文件名称
                [
                    50, 50, 40, 40, 60, 50  // 列宽
                ]
            );
        },
	}
}