将html字符串拆分为多个页面

我正在尝试开发电子书阅读器类的android应用程序。我需要根据可用的屏幕空间将长的html字符串（由运行时由服务器发送）分割为页面。 Html内容是一篇文章，可能包含文本，图像，视频等。我使用WebView来显示HTML。将html字符串拆分为多个页面

任何人都可以告诉我如何实现这一目标。

在此先感谢。

来源

2012-04-04 Harshita

你能分享你如何解决这个问题吗？谢谢。 – Ravi 2014-03-24 15:20:15

你必须解析HTML，最好是使用一些库，你可以在JavaScript中访问DOM。然后，您可以为解析的内容创建自定义布局。 WebView是否支持JavaScript？这将是一个很好的开始尝试。

显然你不能在HTML文件的任意位置分割，你必须考虑HTML标签。在修改DOM或分割HTML之后，您可以为内容提供自定义CSS文件，以您喜欢的方式显示它，并使用您的库或JavaScript添加一些分页。使用<span style="display:none"></span>可以帮助您隐藏网站中的内容。然后你不需要物理分割（无论如何，它在加载页面后都在内存中）。

希望有所帮助。你不会在这里得到一个完整的解决方案，但也许你有一些想法。如果您发现更多具体问题，则可以更容易地提出更具体的问题。

来源

2012-04-04 08:06:01 Tarion

感谢您的回复。随着杰里科的HTML解析器，我已经解析了HTML，并提取了文本内容和图像，然后我已经设置了一个自定义的布局，在其顶部和下方的文本视图。如果有图像，我将它设置为imageview，如果不是我的textview适合屏幕。 – Harshita 2012-04-05 08:55:10

使用textview.getPaint（）。measureText（txt）我得到要显示的文本的宽度。我们如何计算适合屏幕的字符数或文本数。 – Harshita 2012-04-05 09:06:39

做任何形式的HTML/DOM解析都会让你走上困境，我想，这意味着你正在开始开发自己的HTML布局引擎。

使用CSS3列函数是一个更好的主意。基本上，让您的内容在固定的宽度和高度栏内呈现。这成为你的页面。然后将您的内容位置左移以在页面之间移动，并将其包装在隐藏溢出元素的容器中。

我们的HTML将主要是：

<body> 
    <div id="container"> 
     <div id="content"> 

      CONTENT GOES HERE 

      <span id="endMarker"></span> 
     </div> 
    </div> 
    <div> 
     <button id="previous">Previous</button> 
     <span id="page">Page N of M</span> 
     <button id="next">Next</button> 
    </div> 
</body>

我们基本的CSS是：

#container { 
    width: 240px; 
    overflow: hidden; 
    background-color: yellow; 
} 
#content { 
    position: relative; 
    height: 30em; 

    -moz-column-width: 240px; 
    -webkit-column-width: 240px; 
    column-width: 240px; 

    -moz-column-gap: 10px; 
    -webkit-column-gap: 10px; 
    column-gap: 10px; 
}

现在，我们将设置left CSS属性为＃内容，页面之间切换的倍数 - 250像素。

我们只需要计算出我们的内容需要多少列，并且我们已经分页。 How to get css3 multi-column count in Javascript给出了一个提示：我们将从#endMarker的左边位置找到它。

这是一个工作示例http://lateral.co.za/pages.html，第一章是Moby Dick。它适用于Chrome和Android，但不适用于Firefox - 我认为是因为CSS列实现的差异。由于我们对Android感兴趣，因此代码很好。

最重要的部分是：

的CSS设置如上。
加入<span id="endMarker"></span>的含量（但#content DIV内）后
加入#previous和#next按钮和#page跨度，所有的#container外部。

这个JavaScript的jQuery加载后：

var _column = 0; 
var _columnCount = 0; 
var _columnWidth = 240; 
var _columnGap = 10; 
$(function() { 
    _columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap)); 

    setColumn = function(i) { 
     _column = i; 
     document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap); 
     $('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1)); 
    } 
    $('#next').click(function() { 
     if (_column==_columnCount) return; 
     setColumn(_column+1); 
    }); 
    $('#previous').click(function() { 
     if (0==_column) return; 
     setColumn(_column-1); 
    }); 
    setColumn(0); 
});

就是这样。

有工作的空间。有人可能想要考虑计算列数，我把它从引用的SO帖子中吸取出来，但实际上并没有想到它......容器的宽度似乎影响了内容的列宽，这对我来说并不完全有意义。

但至少在一切似乎工作，而不必做任何HTML解析和自己的布局，至少在Chrome和Android。

来源

2014-08-11 10:53:53 craigmj

这真的很好，但我怎样才能设置宽度和高度来填充窗口？使用'width：$（window）.width（）;'而不是'width：240px;'和其他列宽度不起作用。 – mehdok 2014-11-18 07:36:14

它应该足以使容器填满窗户。或者使用'width：100％;'或'width：100vw;' – craigmj 2015-03-17 17:48:00

ok，但是'-moz-column-width：240px; -webkit-column-width：240px;列宽：240px;'如果我将它们设置为100％，只显示第一列。关于“高度”，我想填充“高度”和“宽度” – mehdok 2015-03-18 05:29:17

将html字符串拆分为多个页面

回答

相关问题