如何复制html格式化单元格的数据而不是标记

时间:2015-07-13 13:13:20

标签: javascript handsontable

我在Handsontable中有一些单元格,使用“html”渲染器显示。当我复制这些单元格并将它们粘贴到Excel中时,我得到的是html内容而不是数据。有没有办法按原样显示单元格,并在复制时获取它们的值?

JSFiddle示例: example

document.addEventListener("DOMContentLoaded", function() {
    var
    data = [
      {
        title: "Title 1",
        description: "<div style='text-align:right'>148</div>"
      },
      {
        title: "Title 2",
        description: "<div style='text-align:right'>2002</div>"
      }
    ],
    container1,
    hot1;

    container1 = document.getElementById('example1');
        hot1 = new Handsontable(container1, {
        data: data,
        colWidths: [200, 200],
        colHeaders: ["Title", "Description"],
        columns: [
           {data: "title", renderer: "html"},
           {data: "description", renderer: "html"}
        ]
    });
});

1 个答案:

答案 0 :(得分:1)

您可以尝试将输入数据转换为json格式,并使用自定义渲染器显示json中的值。将toString属性添加到数据中,该属性将准确返回您要复制的内容。

这是一个更新的小提琴:http://jsfiddle.net/mpusarla/gng4wqzy/6/

document.addEventListener("DOMContentLoaded", function() {
  var item1 = {};
  item1.title = "Title 1 ";
  item1.description = {};
  item1.description.text = "Desc 1";
  item1.description.toString = function() {
    return 'Updated Desc for 1';
  }

  var item2 = {};
  item2.title = "Title 2";
  item2.description = {};
  item2.description.text = "Desc 2";

  item2.description.toString = function() {
    return 'Updated Desc for 2 ';
  }

  var data = [];
  data.push(item1);
  data.push(item2);
  var container1, hot1;

  function customRenderer(instance, td, row, col, prop, value, cellProperties) {
    td.innerHTML = '<div style="text-align:right">' + value.text;
  }

  container1 = document.getElementById('example1');
  hot1 = new Handsontable(container1, {
    data: data,
    colWidths: [200, 200],
    colHeaders: ["Title", "Description"],
    columns: [{
      data: "title",
      renderer: "text"
    }, {
      data: "description",
      renderer: customRenderer
    }]
  });
});
</style><!-- Ugly Hack due to jsFiddle issue --> <script src="http://docs.handsontable.com/0.15.0/scripts/jquery.min.js"></script> <script src="http://docs.handsontable.com/0.15.0/bower_components/handsontable/dist/handsontable.full.js"></script> <link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.15.0/bower_components/handsontable/dist/handsontable.full.min.css">
<div id="example1" class="hot handsontable"></div>