2023-11-10 JS复制表格到Excel.md

简单示例，这里用的是Fusion的Table

import { Table, Button } from "@alifd/next";

function App() {

  const dataSource = [
    {
      item: '棉鞋1',
      img: 'https://img.alicdn.com/imgextra/i3/O1CN01oa2oWk1THYOTjD8um_!!6000000002357-2-tps-110-110.png',
      sku: '34码',
      amount: 999,
      induction: {
        a: 10,
        b: 12
      }
    },
    {
      item: '棉鞋1',
      img: 'https://img.alicdn.com/imgextra/i2/O1CN010URR3q1qa5aKdpsOh_!!6000000005511-2-tps-110-110.png',
      sku: '35码',
      amount: 88,
      induction: {
        a: 23,
        b: 77
      }
    },
    {
      item: '拖鞋1',
      img: 'https://img.alicdn.com/imgextra/i4/O1CN01xUEUfU1TCyQuxXEps_!!6000000002347-2-tps-110-110.png',
      sku: '38码',
      amount: 0,
      induction: {
        a: 0,
        b: 100
      }
    },
    {
      item: '拖鞋2',
      img: 'https://img.alicdn.com/imgextra/i2/O1CN01wtSTlr28OmrVgPKQ9_!!6000000007923-2-tps-200-200.png',
      sku: '35码',
      amount: 123,
      induction: {
        a: 90,
        b: 8
      }
    },

  ]
  const cellProps = (rowIndex, colIndex) => {
    if (rowIndex === 0 && colIndex === 0) {
      return {
        // take 3 rows's space
        rowSpan: 2
      };
    }

  };

  const convertTableToExcel = (
    id = undefined, // Fusion Table 的id 
    filterHeader = false, // 复制时是否滤掉表头
  ) => {
    return new Promise((resolve, reject) => {
      try {
        let htmlString = document.getElementById(id).innerHTML
        const filterDOM = (selector) => { 
          // 创建一个临时div元素
          var tempDiv = document.createElement('div');
          // 将HTML字符串赋值给临时div的innerHTML属性
          tempDiv.innerHTML = htmlString;
          // 使用querySelectorAll方法获取所有要过滤的元素，并将其从临时div中移除
          tempDiv.querySelectorAll(selector).forEach(function (element) {
            element.remove();
          });
          // 获取过滤后的HTML字符串
          return tempDiv.innerHTML;
        }
        htmlString = filterDOM('.next-table-lock-left')
        if (filterHeader) {
          htmlString = filterDOM('thead')
        }

        console.log(htmlString)
        const type = "text/plain";
        const blob = new Blob([htmlString], { type });
        const data = [new ClipboardItem({ [type]: blob })];

        navigator.clipboard.write(data).then(
          () => resolve(),
          (error) => reject(error),
        );
      } catch (error) {
        reject(error)
      }
    })
  }
  return (
    <div>
      <Button type="primary" onClick={() => convertTableToExcel('table1')} style={{ marginRight: 10 }}>复制</Button>
      <Button type="primary" onClick={() => convertTableToExcel('table1', true)}>复制（不含表头）</Button>
      <Table id="table1" dataSource={dataSource} cellProps={cellProps}>
        <Table.Column title="商品" width={300} dataIndex="item" lock="left" />
        <Table.ColumnGroup title="信息">
          <Table.Column title="规格" width={200} dataIndex="sku" />
          {/* <Table.Column title="图片" width={200} dataIndex="img" cell={(val) => <img src={val} />} /> */}
          <Table.Column title="库存" width={200} dataIndex="amount" />
          <Table.Column title="说明" width={200} dataIndex="induction" cell={(val) => {
            return <div>
              <div>全包：{val.a}%</div>
              <div>半包：{val.b}%</div>
            </div>
          }}  />

        </Table.ColumnGroup>
      </Table>
    </div>
  )
}

export default App

实际上核心代码就这几行

const htmlString = '' // 这里就是你要复制的东西
const type = "text/plain";
const blob = new Blob([htmlString], { type });
const data = [new ClipboardItem({ [type]: blob })];

navigator.clipboard.write(data).then(
  () => resolve(),
  (error) => reject(error),
);