JSP解决跨域问题,将dom元素转为图片后下载

// JSP 解决跨域问题
<%@ page pageEncoding=“utf-8” import=“java.net.,java.util.,java.lang.,java.io.”%><%@ page contentType=“text/html;charset=utf-8”%><%
String url = null;
StringBuffer params = new StringBuffer();
Enumeration enu = request.getParameterNames();
int total = 0;
while (enu.hasMoreElements()) {
String paramName=(String)enu.nextElement();
if(paramName.equals(“url”)){
url=request.getParameter(paramName);
}else{
if(total==0){
params.append(paramName).append("=").append(URLEncoder.encode(request.getParameter(paramName), “UTF-8”));
} else {
params.append("&").append(paramName).append("=").append(URLEncoder.encode(request.getParameter(paramName), “UTF-8”));
}
++total;
}
}
//url = url; //+ “?” + params.toString();
System.out.println(“url:”+url+"=param:="+params.toString().split("=")[1]);

if(url != null){
// 使用GET方式向目的服务器发送请求
URL connect = new URL(url.toString());
URLConnection connection = connect.openConnection();
connection.connect();
BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream(), params.toString().split("=")[1])); //返回给页面,参数2为 UTF-8或 gbk
String line;
while((line = reader.readLine()) != null){
out.println(line);
}
reader.close();
}
%>

//使用html2canvas将dom元素 转为 图片

function visitJSP(dom, myiframesrc,spreadsheetReport,code,txt) {
var hadDown = false;
if(code == undefined) code = “UTF-8”;

 try {
     var thr = createXMLRequestObj();
     var url = getIP() + "proxy/" + "proxy.jsp?url=" + myiframesrc + "&code=" + code;
     thr.open("GET", url, true);
     thr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     //上面这句不可少啊
     thr.onreadystatechange = function getanswer() {
         try {
             // 将请求的文档 的 页面 插入到 dom中
             if (thr.readyState == 4 && !hadDown) {
                 if(txt == undefined) dom.html(thr.responseText);
                 else dom.html('<pre style="word-wrap: break-word; white-space: pre-wrap;">'+thr.responseText+'</pre>');
                 toPng(spreadsheetReport);
                 hadDown = true;
             }

         } catch (e) {
             alert("getanswer error:" + e.message);
             dom.find('#downImageDiv').css('display','block');
         }
     };
     if (thr == null) {
         alert("not create sucesst");
         return;
     }
     thr.send(null);
 } catch (e) {
     alert("error" + e.message);
 }

}

function createXMLRequestObj() {
var xmlReqObj = null;

 if (xmlReqObj == null) {
     try {
         xmlReqObj = new XMLHttpRequest();
     } //非IE  
     catch (e) {
         xmlReqObj = null;
     }
 }
 if (xmlReqObj == null) {
     try {
         xmlReqObj = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
         xmlReqObj = null;
     }
 }
 if (xmlReqObj == null) {
     try {
         xmlReqObj = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {
         xmlReqObj = null;
     }
 }
 return xmlReqObj;

}
// 将dom中的元素转为base64的图片后下载
function toPng(spreadsheetReport) {
var dom = $(’#downImageDiv’);
html2canvas(dom[0], {
useCORS: true,
}).then(function(canvas) {
var dataUrl = canvas.toDataURL(“image/png”);
dom.closest(‘body’).find(’#downImage’).attr(‘href’, dataUrl).attr(‘download’, ‘down.png’)
dom.closest(‘body’).find(’#downImage’)[0].click();
dom.closest(‘body’).find(’#downImageDiv’).css(‘display’,‘none’);
});
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值