Question

我的webapp中有'导出文本/ PDF到Excel'功能。我在同一个域中显示原始报告，以便在jsp（父文档）中的iFrame中导出到excel

<iframe name="imgbox" id="imgbox" scrolling="yes" width="80%" height="400" src="/xxx/xx.txt" ></iframe>

在现有页面中，我要求用户单击iFrame内的位置/点以进行列拆分，即，两个选定拆分点之间的文本在生成的Excel工作表中形成一列，并使用jQuery的事件记录位置。 pageX属性。现在我需要帮助的是我希望所选位置由垂直的彩色细线突出显示为iFrame顶边到底边的列标记

这就是我想要的： Click to view the resultant jsp page

有人请帮忙!!!

Answer 1

将元素放在彼此之上，文本文件是我从谷歌中选择的随机文件。您必须跟踪点击次数，但是硬件部分已经完成，代码可能会更清晰，但它可以解决您希望的问题。

答案需要jQuery

现场演示：http://jsfiddle.net/3aQC4/1/

<html><head>
<style>
#con, .line{
    display:block;
    position:absolute;    
    top:0;
    left:0;
    height:300px;
    width:600px;
    border:1px solid black;
z-index:10;
    background-color:transparent;
}

.line{
    border:none;
    border-right:1px solid black;
    z-index:5;
}

iframe {
    position:absolute;    
    top:0;
    left:0;
    z-index:1;
    height:300px;
    width:600px;
}
</style>
</head>
<body>
  <div id="con"></div>
  <iframe class="stack" src="http://textfiles.com/bbs/dljunkie.txt"></iframe>


<script>
$('#con').click(function(e){
var html='<div style="width:'+e.offsetX+'px;border:1px solid red" class="line"></div>';
$('body').append(html);
});
</script>

</body>
</html>

将CSS（垂直线）应用于父文档的iFrame

1 个答案: