- 需求描述
用户浏览页面查看信息,点击按钮下载页面内容并包括页面所带附件的插件打包效果图如下:
这里特别说一下,下载的页面与原页面是一样的。(包含页面的样式也一并下载)
2. 代码展示
要想把页面下载打包首先要把整个页面的内容包括样式图片下载到临时文件,但是页面的内容怎么传到后台?说一下思路,先把页面拼接成字符串(包括样式)。然后创建iframe,把拼接好的页面塞在里面。再通过下载iframe下载页面。请看代码:
js代码
/**
* 共享资源查看下载
*/
var lm = _extMask('databox', '数据加载中,请稍候……');
var lmf = _extMask('databox', '正在生成压缩文件,请稍候……');
var flagZip = false;
var titles='';
/**
* 下载压缩文件
*/
function zipDownload1() {
if (flagZip) {
flagZip = false;
} else {
return;
}
var url = "/acws.file_download?class=com.huaxin.gxgc.service.balanceaudit.ZipDownloadService";
url = url + "¶=";
url = url + "BUSINESSOBJ_TYPE|XMYS";
url = url + "*ZIP_TYPE|5";
url = url + "*BUSINESSOBJ_ID|" + appId;
url = url + "*TEMPHTMLPREV|" + htmlFilePrevName;
lmf.show();
document.getElementById("fileDownIFrame").src = url;
var iframeDown = document.all.fileDownIFrame;
iframeDown.attachEvent("onreadystatechange", function() {
lmf.hide();
if (iframeDown.readyState === "complete" || iframeDown.readyState == "loaded") {
}
});
setTimeout(function() {
lmf.hide();
}, 10000);
}
var htmlFilePrevName = "";
/**
* 保存HTML
*/
function zipDownload(title) {
if ($("#htmlCreateIFrame").length == 0) {
$(document.body).append('<iframe src="about:blank" id="htmlCreateIFrame" style="display: none"></iframe>');
}
htmlFilePrevName = Math.round(Math.random() * 10000000000);
titles=$("#BEST_CASE_TITLE").html();
if(titles=='' || titles==null){
titles=$("#PROBLEM_TITLE").val();
}
_createHtml(titles, $("#databox").html(), true);
document.all.htmlCreateIFrame.src = '/projectweb/pages/common/htmlcreate.html';
setIframeComplete('htmlCreateIFrame');
flagZip = true;
}
/**
* 生成html
*/
var htmlCreateContent;
var htmlCreateTitle;
function _createHtml(title, contentHtml, flag) {
var bodyHtml = contentHtml;
htmlCreateContent = '<html><head><title>' + title + '</title><meta http-equiv="Content-Type" content="text/html; charset=GBK">' + '</head>' + htmlCss() + '<body style="width: 100%;">' + bodyHtml
+ '</body></html>';
htmlCreateTitle = title;
}
/**
* 定时扫描iframe是否加载完成
*/
function setIframeComplete(iframeName) {
try {
if (window.frames[iframeName].document.readyState == "complete" && window.frames['webWordView'].document.readyState == "complete") {
val