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问题
---------------------
作者：风水月
来源：优快云
原文：https://blog.youkuaiyun.com/fengshuiyue/article/details/61931905
版权声明：本文为博主原创文章，转载请附上博文链接！

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 = '<!--   /* Font Definitions */   @font-face   {font-family:宋体;   panose-1:2 1 6 0 3 1 1 1 1 1;}  @font-face   {font-family:"Cambria Math";   panose-1:2 4 5 3 5 4 6 3 2 4;}  @font-face   {font-family:"\@宋体";   panose-1:2 1 6 0 3 1 1 1 1 1;}   /* Style Definitions */   p.MsoNormal, li.MsoNormal, div.MsoNormal   {margin:0cm;   margin-bottom:0pt;   font-size:12.0pt;   font-family:宋体;}  p.MsoHeader, li.MsoHeader, div.MsoHeader   {mso-style-link:"页眉 Char";   margin:0cm;   margin-bottom:.0001pt;   text-align:center;   layout-grid-mode:char;   border:none;   padding:0cm;   font-size:9.0pt;   font-family:宋体;}  p.MsoFooter, li.MsoFooter, div.MsoFooter   {mso-style-link:"页脚 Char";   margin:0cm;   margin-bottom:.0001pt;   layout-grid-mode:char;   font-size:9.0pt;   font-family:宋体;}  p.MsoAcetate, li.MsoAcetate, div.MsoAcetate   {mso-style-link:"批注框文本 Char";   margin:0cm;   margin-bottom:.0001pt;   font-size:9.0pt;   font-family:宋体;}  span.msonormal0   {mso-style-name:msonormal;}  span.Char   {mso-style-name:"批注框文本 Char";   mso-style-link:批注框文本;   font-family:宋体;}  span.Char0   {mso-style-name:"页眉 Char";   mso-style-link:页眉;   font-family:宋体;}  span.Char1   {mso-style-name:"页脚 Char";   mso-style-link:页脚;   font-family:宋体;}  .MsoChpDefault   {font-size:10.0pt;}   /* Page Definitions */   @page WordSection1   {size:595.3pt 841.9pt;   margin:72.0pt 90.0pt 72.0pt 90.0pt;}  div.WordSection1   {page:WordSection1;}  -->';
 
		//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://blog.youkuaiyun.com/fengshuiyue/article/details/61931905 —— 风水月