Webview from a downloaded file

Question

My app needs to download a zip from a server, unpack it and use the files inside on a webview.

I've done all the above steps but the webview shows only html. The css and javascript don't work.

All the paths are relative and the files work on a browser.

The code for the webview is this

    WebSettings ws = myWebView.getSettings();
    ws.setAllowFileAccess(true);
    String dir = getFilesDir().getAbsolutePath();
    String saveDir = dir+"/Download/";
    Toast.makeText(getApplicationContext(),"file:/"+ saveDir+"352_1332.html" ,Toast.LENGTH_LONG).show();
    myWebView.loadUrl("file://"+saveDir+"352_1332.html");

Possible duplicate of [using javascript in android webview](http://stackoverflow.com/questions/10472839/using-javascript-in-android-webview) — Elcan, Dec 15 '16 at 12:57

Manohar · Answer 1 · 2016-12-15T13:28:38.787

0

You have to unzip the file at a spesific location in phone and give that folder path

webView.loadDataWithBaseURL("file://"+outPutFolder, finalDataToLoad, "text/html", "utf-8", null);

here outputFolder is folder path , finalDataToLoad is the data/html which you want to load

    private void DownloadResource(String directory) {
try {

    Resources rst = book.getResources();
    Collection<Resource> clrst = rst.getAll();
    Iterator<Resource> itr = clrst.iterator();

    while (itr.hasNext()) {
        Resource rs = itr.next();

        if ((rs.getMediaType() == MediatypeService.JPG)
                                        || (rs.getMediaType() == MediatypeService.PNG)
                                        || (rs.getMediaType() == MediatypeService.GIF)) {

            Log.d("Href", rs.getHref());

            File oppath1 = new File(directory, rs.getHref().replace("OEBPS/", ""));    

            oppath1.getParentFile().mkdirs();
            oppath1.createNewFile();

            System.out.println("Path : "+oppath1.getParentFile().getAbsolutePath());


            FileOutputStream fos1 = new FileOutputStream(oppath1);
            fos1.write(rs.getData());
            fos1.close();

        } else if (rs.getMediaType() == MediatypeService.CSS) {

            File oppath = new File(directory, rs.getHref());

            oppath.getParentFile().mkdirs();
            oppath.createNewFile();

            FileOutputStream fos = new FileOutputStream(oppath);
            fos.write(rs.getData());
            fos.close();

        }

    }


} catch (Exception e) {

}
}

here book is my epubfile

edited Dec 15 '16 at 13:28

answered Dec 15 '16 at 13:01

Manohar

22,116
9
108
144

finalDataToLoad needs to be a string right? i have to convert each file to strings? – Tiago Roque Dec 15 '16 at 13:02
get all data from your html page and store it in string, – Manohar Dec 15 '16 at 13:04
for unzipping follow this http://stackoverflow.com/a/40124766/6478047 – Manohar Dec 15 '16 at 13:04
The problem is that my struture of html files is index.html and then a.html b.html ....... z.html Can i still use the same structure? – Tiago Roque Dec 15 '16 at 13:06
you can i guess, i am not an expert in html ,by the way are you creating Epub reader? – Manohar Dec 15 '16 at 13:11
also dont forget to enable javascript webview.getSettings().setJavaScriptEnabled(true); – Manohar Dec 15 '16 at 13:16
Something very similar. My client has a website that sells digital books with videos and sound and want a offline viewer for it. For their online app i just created a webview and wanted to make something similar for online. On php i made a script that go through each book an creates a offline version of it and zips it. The only problem i'm having is the last step. Html works fine, css, js and linking pages does't due to the way android works with relative paths i believe. – Tiago Roque Dec 15 '16 at 13:18
what i did in my project was extract all resources in side a singe directory. all images & css files and specied that path in epub reader project which i am doing , that might help you i updated it – Manohar Dec 15 '16 at 13:30
all css files should be in same directory from which your are loading your html page , not in a sub directory – Manohar Dec 15 '16 at 13:31

A.D. · Answer 2 · 2016-12-16T12:11:59.803

I guess the WebView lookup for resources (css, js) went wrong. For example your 352_1332.html looks like this:

<html>
<head>
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <!-- some elements -->
</body>  
</html>

By default the webview won't try to find stylesheet.css under your saveDir directory. You have to point to the file. To do this, you have to override WebViewClient.shouldInterceptRequest:

myWebView.setWebViewClient(new WebViewClient() {

    @Override
    public WebResourceResponse shouldInterceptRequest (WebView view, String  url) {

        //url = stylesheet.css -> now point to resource file
        FileInputStream data = null;
        try {

            data = new FileInputStream("file://" + saveDir + File.separator + url));
        } catch (FileNotFoundException e) {

             return  null;
        }
        return new WebResourceResponse(this.getMimeTyp(url), null, data);
    }
}

/**
 * returns mime-typ
 * @param url String
 * @return String
 */
private String getMimeTyp (String url) {

    if (url.endsWith(".css") == true) {

        return "text/css";
    } else if (url.endsWith(".js") == true) {

        return "text/javascript";
    } else if (url.endsWith(".html") == true) {

        return "text/html";
    } else if (url.endsWith(".png") == true) {

        return "image/png";
    } else if (url.endsWith(".jpg") == true || url.contains(".jpeg") == true) {

        return "image/jpeg";
    } else if (url.endsWith(".gif") == true) {

        return "image/gif";
    } else {

        //fallback for everything else
        return "application/octet-stream";
    }
}

Code above is totally untested...

Webview from a downloaded file

2 Answers2