如何根据屏幕大小将 Epub Html 拆分为页面

Posted 2023-03-10

【中文标题】如何根据屏幕大小将 Epub Html 拆分为页面

【英文标题】：How to split up Epub Html into pages according to screen size

【发布时间】：2013-09-28 15:28:49

【问题描述】：

我正在开发一个阅读电子书（epub 格式）的 android 应用程序，目前我正在使用 Paul Siegeman 的 epublib 库，它确实是一个非常好的 epub 阅读器，但它有一些限制，例如，我需要，你不能水平浏览页面（就像你阅读一本真正的书一样），所以我需要我自己的实现，但我被卡住了。

实际读取 epub 然后将其放入 webview 的方法是下一个：

private void openEpub(String bookFilename)

    WebView webView = (WebView) findViewById(R.id.webView);

    nl.siegmann.epublib.domain.Book book=null;
    try 
        book = (new EpubReader()).readEpub(new FileInputStream(Environment.getExternalStorageDirectory().getPath() + "/" + bookFilename));
     catch (FileNotFoundException e) 
        e.printStackTrace();
     catch (IOException e) 
        e.printStackTrace();
    

    String baseUrl = Environment.getExternalStorageDirectory().getPath() + "/";
    String data=null;
    try 
        data = new String(book.getContents().get(1).getData());
     catch (IOException e) 
        e.printStackTrace();
    
    webView.loadDataWithBaseURL(baseUrl, data, "text/html", "UTF-8", null);

如您所见，我在 webview 中显示电子书，据我所知 webview 提供的唯一滚动可能性是向上/向下。

我正在考虑将getData()返回的html字符串和webview加载到页面中，并用viewpager一一显示，但是如何根据屏幕大小正确拆分html？

你认为我的这个想法是正确的吗？从左到右/从右到左（分页）或任何其他“免费或廉价”库显示 epub 的任何其他解决方案？ （我试过PageTurner，真的很好，但是商业版对我来说太贵了）

【参考方案1】：

关注这个github 帐户。

FbReader 为 epub 和 pdf 阅读器提供了一些很棒的库。试试这个....

或

您可以通过扩展 WebView 来制作自己的自定义 WebView。您可以在此处放置和修改 WebView 所需的所有功能。

我的同事使用这个 FbReader 做了一个阅读器，非常棒。

【讨论】：

非常感谢 Jatin，最后在没有找到解决我的问题的方法后，因为这是一个重要的项目，我决定购买阅读器。现在我正在使用 Page Turner Reader，它不是免费的，但它只是一个了不起的应用程序。

【参考方案2】：

嘿，我想这会对你有所帮助。 Nacho L 的回答对我有用。这里HTML book-like pagination？

【讨论】：

非常感谢 atihska，正如我在下面对 Jatin 所说的，最终没有找到解决方案我决定购买阅读器，现在我正在使用 Page Turner 阅读器，它不是免费的，但它是只是一个了不起的应用程序。

@Atishka，我测试了你的建议并且它有效。我不擅长js，你能告诉我如何通过点击或滚动来改变页面吗？提示将不胜感激。

【参考方案3】：

我在android中做过这样的分页效果..

-> 创建一个自定义的 webview 类。 -> 在客户端下方设置并加载 url，然后您将获得带有页数的水平滚动。 -> 锁定 webview 默认滚动。 ->为了平滑的分页效果而不是移动webview的滚动，移动整个webview，这样一页就会有一个webview。 -> 使用您自己的取景器来缓冲上一页和下一页。 我已经完成了所有这些实现，并为一个组织制作了一个产品。只是我正在分享我的想法如何接近最佳解决方案。而不是使用第三方并由于该 sdk 的限制而停留在中间，而是让每一件事都成为你的拥有。

private class MyWebClient extends WebViewClient
    
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) 

            super.onPageStarted(view, url, favicon);
        
        @Override
        public void onPageFinished(WebView view, String url) 
        
            super.onPageFinished(view, url);

            final MyWebView myWebView = (MyWebView) view;


                String varMySheet = "var mySheet = document.styleSheets[0];";

                String addCs-s-rule = "function addCs-s-rule(selector, newRule) "
                        + "ruleIndex = mySheet.cssRules.length;"
                        + "mySheet.insertRule(selector + '' + newRule + ';', ruleIndex);"

                        + "";

                String insertRule1 = "addCs-s-rule('html', 'padding: 0px; height: "
                        + (myWebView.getMeasuredHeight()/getContext().getResources().getDisplayMetrics().density )
                        + "px; -webkit-column-gap: 0px; -webkit-column-width: "
                        + myWebView.getMeasuredWidth() + "px;')";



                myWebView.loadUrl("javascript:" + varMySheet);
                myWebView.loadUrl("javascript:" + addCs-s-rule);
                myWebView.loadUrl("javascript:" + insertRule1);




        
    

    private class MyWebChromeClient extends WebChromeClient
    
        @Override
        public void onProgressChanged(WebView view, int newProgress) 
        
            super.onProgressChanged(view, newProgress);

            if(newProgress == 100)
            
                postDelayed(new Runnable() 
                
                    @Override
                    public void run() 
                    
                        calculateNoOfPages();
                           

                ,200);
            
        
    
private void calculateNoOfPages()
    
        if(GlobalSettings.EPUB_LAYOUT_TYPE == GlobalConstants.FIXED)
        

        
        else
        
            if(getMeasuredWidth() != 0)
            
                int newPageCount = computeHorizontalScrollRange()/getMeasuredWidth();
                getData().getChapterVO().setPageCount(newPageCount);

            
        
    
@Override
    public int computeHorizontalScrollRange() 
        // TODO Auto-generated method stub
        return super.computeHorizontalScrollRange();
    

一个你加载到的网址

【讨论】：

兄弟最后通牒...我真的在寻找一个一周的解决方案。最后通牒兄弟，你真的为我解决了一个地狱般的问题。希望我能给你100个赞。任何寻找解决方案的人，上述解决方案都可以完美运行。您可能需要稍微更改 addCSS 规则，但该解决方案绝对有效。非常感谢兄弟

感谢您的评论 arunavh！非常欢迎您提供任何进一步的帮助:)

非常感谢您抽出宝贵时间 Uday，我会尽我所能尝试一下，但您认为您的解决方案是否易于实施？ （我在办公室的时候很快就读完了）

这是真的。我刚刚开始开发并且能够拿起它。我建议只是试一试，很简单。我可以尽可能地帮助你

已经集成这个并且在WebView中有水平滚动，现在我可以水平看书了。但是你能告诉我如何为每个新页面集成 viewflipper 吗？