【WEB】自定义打印模板？如何实现拖拽元素到在线电子表格x-spreadsheet？

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2024年6月11日 16:10 本文热度 2524

需求是实现自定义打印模板，经过三天苦逼的调研，技术选型，分析，最佳的方式是拖拽参数变量到类Excel的电脑表格中，毕竟办公人使用最多的就是Excel。最后选择了x-spreadsheet，使用的是原生的HTML5拖拽API。

预览地址： https://codepen.io/hlmcdh2023/pen/yLGgajp

页面代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>x-data-spreadsheet电子表格</title>
  <link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css">
  <script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
  <script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/locale/zh-cn.js"></script>
  <style type="text/css">
    .uni-flex {
      display: flex;
      flex-direction: row;
    }
    .uni-flex-item {
      flex: 1;
    }
    .menu-item {
      width: 200px;
    }
    .border-gray {
      border: solid 1px #DEDEDE;
    }
  </style>
</head>
<body>
<div class="uni-flex">
  <div class="menu-item">
    <ul>
      <li draggable="true" id='name'><span>【姓名】</span></li>
    </ul>
  </div>
  <div class="uni-flex-item border-gray" id="x-spreadsheet-demo"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (evtAll) => {
  x_spreadsheet.locale('zh-cn');
  const xs = new x_spreadsheet("#x-spreadsheet-demo", {
    mode: 'edit', // edit | read
    showToolbar: true,
    showGrid: true,
    showContextmenu: true,
    view: {
      height: () => document.documentElement.clientHeight,
      width: () => document.documentElement.clientWidth - 200,
    },
    row: {
      len: 100,
      height: 25,
    },
    col: {
      len: 26,
      width: 100,
      indexWidth: 60,
      minWidth: 60,
    },
    style: {
      bgcolor: '#ffffff',
      align: 'left',
      valign: 'middle',
      textwrap: false,
      strike: false,
      underline: false,
      color: '#0a0a0a',
      font: {
        name: 'Helvetica',
        size: 10,
        bold: false,
        italic: false,
      },
    },
  })
  .loadData({}) // load data
  .change(data => {
    // save data to db
  });
 
  // data validation
  xs.validate();
 
  // 测试xs的方法
  setTimeout(() => {
    console.log('xs.data:', xs.sheet.data.getCellRectByXY(550, 310));
  }, 2000);
 
  function onSelected(event) {
    // event.target.style = 'background-color: blue';
    console.log('xxx')
  }
 
  document.getElementById('name').addEventListener('click', onSelected, false);
 
  /**
   * 拖拽开始
   * @param {DragEvent} event事件对象
   *
  */
  function onDragStart(event) {
    if(!event.target || !event.dataTransfer) {
      return;
    }
    let text = event.target.innerText;
    let children = event.target.children[0].innerText;
    console.log('from text:', text, 'children:', children);
    // 传送的数据
    event.dataTransfer.setData('key', 'name');
    // 传送的数据
    event.dataTransfer.setData('value', text);
  }


  document.getElementById('name').addEventListener('dragstart', onDragStart, false);


  // 拖动事件
  function onDragOver(event) {
    event.stopPropagation();
    event.preventDefault();
  }
 
  // 松开拖放
  function onDrop(event) {
    event.stopPropagation();
    event.preventDefault();
 
    const target = event.currentTarget;
    if(!target || !event.dataTransfer) {
      return;
    }
 
    let key = event.dataTransfer.getData('key');
    let value = event.dataTransfer.getData('value');
    // 目标位置
    var targetPosition = getTargetPosition(event);
    /**
     * 通过鼠标目标位置的x、y坐标，获取所在的行下表、列下标
     * ri 行下标
     * ci 列下标
     */
    const { ri, ci } = xs.sheet.data.getCellRectByXY(targetPosition.x, targetPosition.y);
    xs.cellText(ri, ci, `${key}:${value}`).reRender();
  }
 
  // 监听事件
  document.getElementById('x-spreadsheet-demo').addEventListener('dragover', onDragOver, false);
  document.getElementById('x-spreadsheet-demo').addEventListener('drop', onDrop, false);
 
  // 获取拖拽松开鼠标时，目标位置的x、y坐标
  function getTargetPosition(event) {
    const canvas = document.querySelector('.x-spreadsheet-table');
    const x = event.pageX - canvas.getBoundingClientRect().left;
    const y = event.pageY - canvas.getBoundingClientRect().top;
    return { x: x, y: y };
  }
 
});
</script>
</body>
</html>

该文章在 2024/6/11 16:10:01 编辑过