LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

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

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

需求是实现自定义打印模板,经过三天苦逼的调研,技术选型,分析,最佳的方式是拖拽参数变量到类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 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved