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

向右看齐 2022-09-29 04:10 282阅读 0赞

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

# 1、canvas #

## 1）不支持问题 ##

使用excanvas.js可以解决游览器不支持canvas问题，下载地址为：[https://github.com/arv/ExplorerCanvas][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: "<html>\n_html_</html>",
    			head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
    			body: "<body>_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){
    	}
    }

[https_github.com_arv_ExplorerCanvas]: https://github.com/arv/ExplorerCanvas