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

最新推荐文章于 2024-06-17 21:52:03 发布

高国藩

最新推荐文章于 2024-06-17 21:52:03 发布

阅读量1.4w

点赞数

分类专栏：前端开发文章标签：图片 js 预览

本文链接：https://blog.csdn.net/u014201191/article/details/47837871

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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"  οnchange="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" οnchange="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

收藏

觉得还不错? 一键收藏
0
评论
javaScript 预览图片,base64导出报表,打印

JavaScript 处理图片上传预览base64方式预览 //图片上传预览 IE是用了滤镜。 function previewImage(file) { var MAXWIDTH = 260; var MAXHEIGHT = 180; if (file.files && file
复制链接

扫一扫

专栏目录