javaScript 预览图片,base64导出报表,打印

来源：互联网发布：众途软件多少钱编辑：程序博客网时间：2024/05/16 19:48

JavaScript 处理图片上传预览

base64方式预览

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript">     //图片上传预览    IE是用了滤镜。    function previewImage(file)    {        var MAXWIDTH  = 260;        var MAXHEIGHT = 180;        if (file.files && file.files[0])        {            var reader = new FileReader();reader.readAsDataURL(file.files[0]);            reader.onload = function(evt){//获得上传的base64数据            var src = evt.target.result;//获得上传的base64数据            document.getElementById('imgPre').src = this.result;//document.getElementById('imgPre').src = src;        }           }        else //兼容IE        {            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';            file.select();            var src = document.selection.createRange().text;            var img = document.getElementById('imgPre');            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";        }    }</script> </head> <body> <form action=""> <input type="file"  onchange="previewImage(this);" /> <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> </form> </body> </html>

blob方式预览

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> /** * 从 file 域获取 本地图片 url */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE")>=1) { // IE url = document.getElementById(sourceId).value; } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } /** * 将本地图片 显示到浏览器上 */ function preImg(sourceId, targetId) { var url = getFileUrl(sourceId); var imgPre = document.getElementById(targetId); imgPre.src = url; } </script> </head> <body> <form action=""> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> <img  src="blob:null/d040c1a5-2cf4-4082-b38f-c325cafc7a81" width="300px" height="300px" style="display: block;"></form> </body> </html>

base64导出html(table)

var exportTable = (function() {  var uri = 'data:application/vnd.ms-excel;base64,'    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }  return function(table, name) {    if (!table.nodeType) table = document.getElementById(table)    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}    console.log(uri + base64(format(template, ctx)))    window.location.href = uri + base64(format(template, ctx))  }})()

调用方式:exportTable('tableId');

JavaScript调用打印(html)

function printTable(str) {    var orderhtml = "";    if (document.getElementById(str)) { orderhtml = document.getElementById(str).outerHTML; }    else orderhtml = str;    /* 创建iframe */    var headobj = document.getElementsByTagName("head").item(0); //提取head      printFrame = document.getElementById("lldxi_printRegionFrame_2012_0112");    if (printFrame) { document.body.removeChild(printFrame); }    printFrame = document.createElement("iframe");    printFrame.setAttribute("src", "about:blank");    printFrame.setAttribute("id", "lldxi_printRegionFrame_2012_0112");    printFrame.setAttribute("marginheight", "0");    printFrame.setAttribute("marginwidth", "0");    printFrame.style.display = "none";    document.body.appendChild(printFrame);    if (window.ActiveXObject)//ie    {        var htmlobj = printFrame.contentWindow.document.createElement("html"); var bodyobj = printFrame.contentWindow.document.createElement("body");        bodyobj.innerHTML = orderhtml; htmlobj.appendChild(headobj.cloneNode(true)); htmlobj.appendChild(bodyobj);        printFrame.contentWindow.document.appendChild(htmlobj); printFrame.contentWindow.document.execCommand("Print", true);    }    else {        var htmlstr = "<html>" + headobj.outerHTML + "<body>" + orderhtml + "<script type=\"text/javascript\">window.print();<\/script><\/body>" + "<\/html>";        printFrame.contentWindow.document.write(htmlstr);    }}

调用方法:printTable("docId"); 或者printTable("html内容");

0 0