I am trying to generate a PDF from a HTML string using PdfDocument:
https://developer.android.com/reference/android/graphics/pdf/PdfDocument.html
String example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
I know how to generate a PDF files from a WebView, but not from a string HTML. How i do this?
I don't found in stackoverflow.com or Google how do this with the native class PDFDOCUMENT
This class does what you are looking for.
But to compile, it must be in package ".../java/android/print/"
Here is a simple code example :
PdfConverter converter = PdfConverter.getInstance();
File file = new File(Environment.getExternalStorageDirectory().toString(), "file.pdf");
String htmlString = "<html><body><p>WHITE (default)</p></body></html>";
converter.convert(getContext(), htmlString, file);
// By now the pdf has been printed in the file.
react-native-html-to-pdf works great and has zero iText dependencies.
https://github.com/christopherdro/react-native-html-to-pdf
Renders SVG <svg> ( Very easy to reuse svg code from Google Material Icons in an HTML document )
Renders <img /> using base64 or local files ( make sure you close the img tag )
CSS style works great.
You can Control page breaks from your HTML.
<p style="page-break-before: always;" />
I forked it and added page size and orientation options to Android. I plan to do the same to iOS but it currently has width and height options that can accomplish this same thing.
This is a cross-platform Android and iOS React Native library.
Look in the Android directory if you just need the Java.
Related
For days...I try to find a solution to load a remote url with android webview. But with local css/js/images
But I couldn't.
I think it is impossible because of security issue... right?
I think mybe I could use a trick.
in remote server I just publish my webpage without <head> and <body>:
//<html>
// <head></head>
// <body>
... body code111 ... // there is only this part in remote url page
//</body>
//</html>
and then I create a index.html in android_asset folder:
<html>
<head>
<link css ...
<link java ...
</head>
<body>
... now put code111 here!
</body>
</html>
So now I can use local resource (in head)
I am new in android and java...I couldn't test it...but do you think is it possible?
well, let's start.
The easyer part is part B.
here you can find the answer:
Rendering HTML in a WebView with custom CSS
basically, what you have to do is have the html website on a String variable, ex:
String website = "<html><head>" + "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + <"javascript call to file that i don't remember right now"/>" + "</head>"
and then append to that website, your remote HTML code. you could do it via, for example, any of the Async HTTP libraries ( LoopJ's one is quite good loopj's http library ) .
and then append the rest of your website.
website += retrieved_website
website += "</body></html>"
finally load the website using the .loadDataWithBaseURL() method as explained in the accepted respose.
althought i have to say this is quite a complicated way of loading a website, this would be my approach.
I am working on an application in Android, where I am using a local html file which includes css files, but It won't work and I have no Idea why.
The Java code is like this:
view.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "UTF-8", null);
The HTML code is like this
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../css/main.css" rel="stylesheet">
<style>
</style>
The path is correct, Eclipse WebBrowser shows the html Page correct but if I test it on my Device it's without styles.
The Logcat throws the Error "Unknown Chromium Error: -6"
Thanks a lot in advance
you cannot refer to this path inside a webview. you probably need to store your css file in assets folder and refer to it dynamically:
put CSS in assets folder, do your manipulation with HTML, but refer to CSS by relative path, and load HTML to WebView by loadDataWithBaseURL() method:
webView.loadDataWithBaseURL("file:///android_asset/", htmlString, "text/html", "utf-8", null);
E.g. you have styles.css file, put it to assets folder, create HTML and load it:
StringBuilder sb = new StringBuilder();
sb.append("<HTML><HEAD><LINK href=\"styles.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(tables.toString());
sb.append("</body></HTML>");
webView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html","utf-8", null);
from: WebView, add local .CSS file to an HTML page?
On a related note, if you're not storing the file in the assets folder and want to use relative paths, Webview on Android sometimes requires dot-slash before relative paths.
<LINK href="./styles/file.css" type="text/css" rel="stylesheet">
See this post
In your case the error -6 means FILE_NOT_FOUND, which probably due to access permission issue on your device.
You may need to put the CSS file under the same folder of your HTML files. For security consideration, webkit engine will apply same-domain policy when accessing local files. i.e. accessing sub-resource files (such as CSS, JS, images) that are not in the same folder of your main HTML file is not allowed.
For my android app I want to load a html file to webview, this html file will be stored in "data/data/com.myapp/files/index.html". I am able to load it with the associated javascript files but when I want to load the image from "data/data/com.myapp/files/img/image.png" it doesn't work.
This is how i'm trying to do it:
webView.loadDataWithBaseURL(getFilesDir()+"/img/", html, "text/html","utf-8", ""); //html is my html string I get from index.html
I've also tried:
webView.loadUrl(getFilesDir()+"/img/"+index.html");
In my html file i have
<img id="image" src="/img/image.png"/>
I've verified and the file is loaded on the disk but i can't display it on webview, the display stays blank for image. I just can't make it work. So my question is: is it even possible? If yes can someone please tell me how?
I've searched and found that others had similar problems but none of the solutions is working.
EDIT: Putting my files in asset directorty is not an option for me, which i've already tested and it works.
I just tried the following code I found here: Load the image saved in sdcard in webview
String base = getFilesDir();
String imagePath = base + "/test.jpg";
String html = ("<html>
<head>
</head>
<body>
<img src=\""+ imagePath + "\">
</body>
</html>
");
mWebView.loadData(html, "text/html","utf-8");
But still no success, apparently it worked for the person who asked the question. I've also tested with the external storage but the result is same. All permissions are there in manifest.xml. So I really don't see what the problem is. Any suggestion or advice will be appreciated.
Consider putting static files in assets folder inside android project, and try loading file using:
mWebView.loadUrl("file:///android_asset/html/index.html");
And then, from HTML file refer to images, styles using relative path.
For example, in your case, you would have follwing directory structure:
PROJECT-ROOT
|-src/
|-assets/
|-html/index.html
|-img/image.png
|-css/style.css
After this, you can use normal html tags inside index.html as you would do to make any web page. Eg. <img id="image" src="img/image.png"/> or <link rel="stylesheet" type="text/css" href="css/style.css">
Don't forget to enable JavaScript using:
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Problem solved. It was actually coming from bad formatted data, once I checked and added correct files to phone memory it started working.
When you want to save image to internal storage, be sure not to use same code as downloading html file. That's the mistake I made. Instead, use
How to download and save an image in Android
to save your image, then the image should be fine
I am wondering how do I set the path for WebViews loadWithBaseURL correctly.
What I want to do is, to load html in a webview, that uses resources that are stored on the external storage.
For Example:
<html>
<head>
<style>body{ background-image:url(beach.jpg); }</style>
</head>
<body>
<img src="football.jpg" />
</body>
</html>
Where beach.jpg and ball.jpg are stored directly in the "root" directory of the phones external storage (/sdcard/beach.jpg and /sdcard/ball.jpg)
So I tried to load the content as follows:
String html = "<html> ... example from above ... </html>";
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
webView.loadDataWithBaseURL("file://" + base, html, "text/html", "utf-8", null);
However the path seems to be wrong, because I can't see the image in the webview.
Any suggestions?
Have you enabled file access on the webview?
webView.getSettings().setAllowFileAccess(true);
Additionally, if you are constructing the HTML yourself - you might consider using full paths for the images.
String html = "<html>... <img src=\"file://"+base+"/football.jpg\" />";
Have you give internet permission?
<uses-permission android:name="android.permission.INTERNET" />
These may also help..
Android webview loadDataWithBaseURL how load images from assets?
http://myexperiencewithandroid.blogspot.com/2011/09/android-loaddatawithbaseurl.html
Android v2.2-2.3.5: WebView : loadDataWithBaseURL : will only load page once
I'm trying to diplay a local image in my webview :
String data = "<body>" + "<img src=\"file:///android_asset/large_image.png\"/></body>";
webview.loadData(data, "text/html", "UTF-8");
This code doesn't display anything, instead of :
webview.loadUrl("file:///android_asset/large_image.jpg");
This one works, but I need to have complex web page, not just a picture.
Any ideas ?
Load Html file in Webview and put your image in asset folder and read that image file using Html.
<html>
<table>
<tr>
<td>
<img src="abc.gif" width="50px" alt="Hello">
</td>
</tr>
</table>
</html>
Now Load that Html file in Webview
webview.loadUrl("file:///android_asset/abc.html");
You can also try
String data = "<body>" + "<img src=\"large_image.png\"/></body>";
webView.loadDataWithBaseURL("file:///android_asset/",data , "text/html", "utf-8",null);
One convenient way (often forgotten) is to use base64 embedded images in HTML content. This will also work on mobile Webkit browsers (IOS, Android..).
Point of using this method is that you can embed images on HTML content, instead of fighting with image links from webview to restricted filesystem.
<img src="data:image/jpg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
xxxxx = base64 encoded string of images bytes
If you want to provide (base64 embedded) image data from filesystem, you can for example:
1) In Android use ContentProvider - which will provide base64 formatted image strings.
<img src="content://.............."/>
2) Or you can preprocess HTML with JSOUP or similar DOM parser (before setting it to webview) and adjust image src with properly base64 encoded image.
Disadvantages of this method is overhead included in converting image to base64 string and of course in proding larger HTML data to webview.
Use this method.
mview.loadDataWithBaseURL(folder.getAbsolutePath(), content, "text/html", "windows-1252", "");
folder.getAbsolutePath() can be "file:///android_asset" or just "/"
I think there is a \ missing in your code
String data = "<body>" + "<img src=\\"file:///android_asset/large_image.png\"/></body>";
The image will not load unless you have:
webSettings.setAllowFileAccessFromFileURLs(true);
If you are using a html file, it should be in a folder called "assets" in /app/src/main. If you don't have that folder then make it. Then load the html file with:
myWebView.loadUrl("file:///android_asset/test.html");
If you put the image in the same folder as the html file, then in the html file you can just do a normal:
<img src='myimage.jpg' />
webView.loadDataWithBaseURL("file:///android_asset/", sourse, "text/html", "UTF-8", null);
the best approach for me was to create my .html file with all the texts and images in MS word, and save the file as an .html file and copying both .html file and the corresponding attachments folder into assets folder and giving the address of .html file in asset folder to webview.loadUrl()...
Here is what you need to Do...
WebView webview = (WebView) findViewById(R.id.webView1);
webview.loadUrl("file:///android_asset/learning1/learning1.htm");
Zain's solution worked for me. I forgot to add my folder www having HTML files and other subfolders of css and images etc.
webView.loadDataWithBaseURL("file:///android_asset/www/",data , "text/html", "utf-8",null);
..
The most simple and straightforward way is to create a html file with a html editor like kompozer or whatever you like.
Put your html file in the assets folder and call webView.loadUrl(filename). The assets folder should also contain all pictures which you are referencing in your html files.
Correct in advance in the html file the path to your images in a way, that you only file down the pure filename. The file name you pass to loadUrl must be prefixed with file:///android_asset/.
If the picture or file does not load, check the filenames for blanks, hyphen and other weird stuff and change the filenames.
I Know the Question is answered correctly, but I am going to implement in an effective way.
Step-1 make an HTML file in asset folder
ex:-imageLaod.html
Note: Here In HTML file we have implemented FullScreen Image by giving style="width:100%"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Load Image</title>
<style type="text/css">
h3{
color:blue;
}
</style>
</head>
<body>
<h3>This image loaded from app asset folder.</h3>
<img src="yourimage.png" style="width:100%" alt="companylogo"/>
</body>
</html>
Step-2 put your image in the asset folder. (ex:yourimage.png)
Step-3 put below code in java file.
String folderPath = "file:android_asset/";
String fileName = "loadImage.html";
String file = folderPath + fileName;
WebView webView = findViewById(R.id.webview)
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);
webView.loadUrl(file);
and it is done. you can see the fullscreen image with zoom in-zoom out feature of WebView.
Hope it helps.