Get Your Pdf button for Your Web Site

Get your pdf button and convert your html content in pdf document in a instant with jsPDF

// get jsPDF library - url
var jsPDF = "http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"
// set css class for button
var pdfclass = ".pdf{-moz-box-shadow:inset 0 1px 0 0 #f5978e;-webkit-box-shadow:inset 0 1px 0 0 #f5978e;box-shadow:inset 0 1px 0 0 #f5978e;background-color:#f24537;-webkit-border-top-left-radius:16px;-moz-border-radius-topleft:16px;border-top-left-radius:16px;-webkit-border-top-right-radius:16px;-moz-border-radius-topright:16px;border-top-right-radius:16px;-webkit-border-bottom-right-radius:16px;-moz-border-radius-bottomright:16px;border-bottom-right-radius:16px;-webkit-border-bottom-left-radius:16px;-moz-border-radius-bottomleft:16px;border-bottom-left-radius:16px;text-indent:0;border:1px solid #d02718;display:inline-block;color:#fff;font-family:Arial;font-size:15px;font-weight:bold;font-style:normal;height:27px;line-height:27px;width:120px;text-decoration:none;text-align:center;text-shadow:1px 1px 0 #810e05}.pdf:hover{background-color:#c62d1f}.pdf:active{position:relative;top:1px}";
var head = document.head || document.getElementsByTagName('head')[0];
// create style button
var style = document.createElement('style');
var btnpdf = document.createElement("button");
style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = pdfclass;
} else {
  style.appendChild(document.createTextNode(pdfclass));
}
head.appendChild(style);
// append pdf library
var scriptjspdf =  document.createElement('script');
scriptjspdf.src = jsPDF;
head.appendChild(scriptjspdf);
btnpdf.setAttribute("id", "printpdf");
btnpdf.setAttribute("class", "pdf");
var textBtn = document.createTextNode("Save PDF");
btnpdf.appendChild(textBtn)
document.body.appendChild(btnpdf);
// now build your pdf function
function saveinPdf(){	
	var pdf = new jsPDF('p', 'pt', 'letter')
	, source = document.body
	, specialElementHandlers = {
		'#bypassme': function(element, renderer){
			return true
		}
	}

   margins = {
      top: 20,
      bottom: 20,
      left: 20,
      width: 210
    };
    pdf.fromHTML(
    	source 
    	, margins.left 
    	, margins.top 
    	, {
    		'width': margins.width 
    		, 'elementHandlers': specialElementHandlers
    	},
    	function (dispose) {
	    	try {
	    		var inputFilename = prompt("Enter file name to save html result in pdf");
		    		if(inputFilename == "") {
		    			alert('You must enter file name to save result in pdf, please')
		    		} else {
		    			pdf.save(inputFilename + '.pdf');
		    		}	    		
	    		} catch(e) {
	    			 txt="There was an error on save.\n\n";
	    			 txt+="Error description: " + e.message + "\n\n";
	    			 txt+="Click OK to continue.\n\n";
	    			 alert(txt);
	    		}
    		
        },
    	margins
    )	
}
document.getElementById("printpdf").addEventListener("click", saveinPdf, false);
PrintFriendly and PDF

Drag&Drop Image in pure Javascript

Drag&Drop Image with download Firefox Extension, for You

(function() {
  
  var zoneDrop = document.getElementById('zone-drop');
  zoneDrop.addEventListener("dragover", function(e){
  e.preventDefault();
    
    zoneDrop.setAttribute("class", "over");
    
  
  }, false);

  zoneDrop.addEventListener("drop", function(e){
      e.preventDefault();
    var files = e.dataTransfer.files;
    var fileCount = files.length;
    var i;
    
    if(fileCount > 0) {
      for (i = 0; i < fileCount; i = i + 1) {
        var file = files[i];
        var name = file.name;
        var size = bytesToSize(file.size);
        var type = file.type;
        var reader = new FileReader();
        
        zoneDrop.removeAttribute("class");
        
        reader.onload = function(e) {
        zoneDrop.innerHTML+= '
' + name +', ' + type +', ' + size +' bytes'; }; reader.readAsDataURL(file); } } }, false); })(); function bytesToSize(bytes) { var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes == 0) return '0 Bytes'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]; };

click here for download

PrintFriendly and PDF
html5editor

HTML5 Editor Advanced

HTML5 Editor Advanced è la mia nuova applicazione mobile ibrida che impiega il metodo “addJavascriptInterface” offerto dalla libreria Android per la scrittura e la lettura dei files. Il progetto è in continua evoluzione ed è ispirato a l’applicazione web server jsfiddle come editor html, css e javascript. Puoi caricare le più celebri librerie javascript con il metodo CDN per lo sviluppo direttamente sul tuo device mobile dei tuoi progetti targati HTML5. È sottinteso che puoi impiegare tutte le api, includendo anche quelle più recenti, del core di javascript e se desideri archiviare i tuoi dati puoi scegliere tra le tre più diffuse opzioni: localStorage, IndexedDB e Web SQL. Per la prossima release di HTML5 Editor ho deciso di includere anche il compilatore HAML e SASS e l’highlight code per la validazione del codice html, css e javascript.

Update 02.07.2014: Nuova Interfaccia grafica e nuove funzioni per HTML5 editor for Android


Get it on Google Play

PrintFriendly and PDF

Add Javascript Interface Android write pdf with iText

You use iText® under AGPL license for opensource project to create and manipulate pdf documents


    
    ...

// for iText library import this packages
import com.itextpdf.text.Document;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.html.simpleparser.HTMLWorker; // simple parser html
import com.itextpdf.text.pdf.PdfWriter;
import com.itextpdf.text.Paragraph;

// start code
@SuppressLint({"SetJavaScriptEnabled","JavascriptInterface"})
public class MainActivity extends Activity {
public WebView webView;
 
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main); // source activity_main.xml
webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
webView.setWebViewClient(new WebViewClient());
// important set Web Chrome Client
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl(url); //local or remote
}
// final class for save and write file in external storage
final class WebAppInterface {
        Context mContext;
 
        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }
         @SuppressWarnings("deprecation")
	public void writeToPdf(String data, String filename, String tag) {
	        try {
	        	File root = android.os.Environment.getExternalStorageDirectory();
	        	File dir = new File (root.getAbsolutePath() + "/folderpdf/");
	        	dir.mkdirs();
	        	File file = new File(dir, filename + ".pdf");
	        	try {
	            	       Document document = new Document();
			       PdfWriter.getInstance(document, new FileOutputStream(file));
			       document.open();
			       @SuppressWarnings("deprecation")
                               document.add(new Paragraph(data));                               
                               // if you want to set Font and Alignment
                               // This tutoria is getting started
                               // for all advanced settings you consult documentation iText
			       /* if you want to parse html data use this code
                                  HTMLWorker htmlWorker = new HTMLWorker(document);
			          htmlWorker.parse(new StringReader(data)); */
			       document.close();
				} catch (DocumentException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
	        }
	        catch (IOException e) {
	            Log.e(tag, "File write failed: " + e.toString());
	        }
	    }
    }
 
}
// Now open html file in www folder
 



PrintFriendly and PDF

Text To Speech Api HTML5 – Android

New useful function bridge between HTML5 and Android to listen text from input textarea

package com.example.tts;
// here imports in Eclipse command "Source->Organize Imports"
.......
@SuppressLint({ "SetJavaScriptEnabled", "JavascriptInterface" })
public class MainActivity extends Activity implements OnInitListener {
       private TextToSpeech tts;
       private WebView ttsweb;
        @Override
   public void onConfigurationChanged(Configuration newConfig){
	    super.onConfigurationChanged(newConfig);
	}
	@SuppressWarnings("deprecation")
   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);	
	setContentView(R.layout.activity_main);
        tts = new TextToSpeech(this, this);
        ttsweb = (WebView) findViewById(R.id.webtweetsfeeds);
        ttsweb.getSettings().setJavaScriptEnabled(true);
	ttsweb.getSettings().setLoadWithOverviewMode(false);
	ttsweb.getSettings().setUseWideViewPort(false);
	ttsweb.getSettings().setBuiltInZoomControls(false);
	ttsweb.getSettings().setPluginState(WebSettings.PluginState.ON);
	ttsweb.getSettings().setRenderPriority(RenderPriority.HIGH);
	ttsweb.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        ttsweb.setWebChromeClient(new WebViewChromeClient());
        ttsweb.setWebViewClient(new WebViewClient());
        // bridge interface java/javascript
        ttsweb.addJavascriptInterface(new WebAppInterface(this), "Android");
	ttsweb.loadUrl("file:///android_asset/www/index.html");
   }
  final class WebAppInterface {
	    Context mContext;
	   /*My interface*/
	    /** Instantiate the interface and set the context */
	    WebAppInterface(Context c) {
	        mContext = c;
	    }
	    public void ttsInput(String inputText, String setLang){
	    	tts.setLanguage(new Locale(setLang));
	    	Toast.makeText(getApplicationContext(), tts.toString(), 
	    		      Toast.LENGTH_SHORT).show();
	    	tts.speak(inputText, TextToSpeech.QUEUE_FLUSH, null);	    	
	    }
	    public void ttsStop(){
	    	if (tts != null) {
	            tts.stop();
	           // tts.shutdown();
	        }	
	    }
	   	    
	}
       public void onInit(int status) {
		// TODO Auto-generated method stub
		return;
	}
}
// Now open html file index in asset/www main folder project Android and to add this code:
// javascript functions 
function tts(){
	try{
		var ttsinout = document.getElementById("textarea").value;
		var setLanguage = document.getElementById("setlanguage").value;
		Android.ttsInput(ttfeeds, setLanguage);
	} catch(e){
		alert("Error Description: " + e.message);
	}
}

function stoptts(){
	try{
		Android.ttsStop();
	} catch(e){
		alert("Error Description: " + e.message);
	}
}
document.getElementById("ttstop").addEventListener("click", stoptts, false);
document.getElementById("tts").addEventListener("click", tts, false);
// end javascript

// start html 




PrintFriendly and PDF