JS导出Word——修正jquery.wordexport.js不支持IE8问题

由于IE8不支持Blob类型、Canvas类型，致使jquery.wordexport.js无法使用，在此记录一下该问题的解决方式

1、canvas

1）不支持问题

使用excanvas.js可以解决游览器不支持canvas问题，下载地址为：https://github.com/arv/ExplorerCanvas

2）getContext is not function问题

var canvas = document.createElement("CANVAS");
var context = canvas.getContext('2d');

上面的代码在IE8下会报 getContext is not function，解决办法如下代码：

var canvas = document.createElement("CANVAS");

document.body.appendChild(canvas);
if(!canvas.getContext&&$.browser.msie){
	canvas=window.G_vmlCanvasManager.initElement(canvas);
}
if(!canvas.getContext&&console){
	console.error("not support canvas.getContext");
}

var context = canvas.getContext('2d');

3）toDataURL is not function 问题

jquery.wordexport.js处理导出图片地址的代码如下：

var uri = canvas.toDataURL("image/png");
$(img[i]).attr("src", img[i].src);
img[i].width = w;
img[i].height = h;
//Save encoded image to array
images[i] = {
	type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
	encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),
	location: $(img[i]).attr("src"),
	data: uri.substring(uri.indexOf(",") + 1)
};

toDataUrl is not function该问题在在excanvas中并没有解决，但是我们导出word的这段使用toDataUrl代码的目的是获取图片的完整访问路径，因此在解决该问题是我们采取的策略有两个：

第一种：img标签中的src使用完整的图片路径

第二种：img标签src仍用相对路径，通过获取工程访问路径，通过字符串拼接出完整路径

//获取工程路径代码
function getRootPath() {
	//获取当前网址，如： http://localhost:8080/imgs/doc/abc.jsp
	var curWwwPath = window.document.location.href;
	//获取主机地址之后的目录，如： imgs/doc/abc.jsp
	var pathName = window.document.location.pathname;
	var pos = curWwwPath.indexOf(pathName);
	//获取主机地址，如： http://localhost:8080
	var localhostPaht = curWwwPath.substring(0, pos);
	//获取带"/"的项目名，如：/uimcardprj
	var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
	return (localhostPaht + projectName);
}
//重新设置图片访问路径
$('#img').attr('src',getRootPath()+$('#img').attr('src'));

2、Blob类型

我们使用Blob类型，目的是用于文件保存，但是IE8不支持该类型，因此在文件保存处，我们采用如下方式进行保存

function fileSave(filename,exportData) {
	var w = window.open("about:blank", "export", "height=0,width=0,toolbar=no,menubar=no,scrollbars=no,resizable=on,location=no,status=no");
	w.document.charset = "gb2312";
	w.document.write(exportData);
	w.document.execCommand("SaveAs", false, filename);
	w.close();
}

3、IE8导出word完整代码

$.fn.wordExport = function(fileName){
	try {
		fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
		
		var static = {
		mhtml: {
			top: "\n_html_",
			head: "\n\n\n\n",
			body: "_body_"
		}
		};
		var options = {
			maxWidth: 624
		};
		//Clone selected element before manipulating it
		var markup = $(this).clone();

		//Remove hidden elements from the output
		markup.each(function() {
			var self = $(this);
			if (self.is(':hidden'))
				self.remove();
		});
		
		//TODO: load css from included stylesheet
		var styles = '';

		//Aggregate parts of the file together
		var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html()));

		fileSave(fileName+".doc",fileContent);
		function fileSave(filename,exportData) {
			var w = window.open("about:blank", "export", "height=0,width=0,toolbar=no,menubar=no,scrollbars=no,resizable=on,location=no,status=no");
			w.document.charset = "gb2312";
			w.document.write(exportData);
			w.document.execCommand("SaveAs", false, filename);
			w.close();
		}
	}catch(e){
	}
}