js生成word中图片处理方法

作者: 计算机网络技术  发布:2019-09-06

本文实例讲述了JavaScript将Web页面内容导出到Word及Excel的方法。分享给大家供大家参考。具体实现方法如下:

首先功能是要求前台导出word,但是前后台是分离的,图片存在后台,所以就存在跨域问题。

<HTML>
<HEAD>
 <title>WEB页面导出为EXCEL文档的方法
 </title>
</HEAD>
<body>
<BR>
<table id = "PrintA" width="100%" border="1" cellspacing="0" 
cellpadding="0" bgcolor = "#61FF13">
<TR style="text-align : center;">
<TD>单元格A</TD>
<TD>单元格A</TD>
<TD>单元格A</TD>
<TD>单元格A</TD>
</TR>
<TR>
<TD colSpan=4 style="text-align : center;">
<font color="BLUE" face="Verdana">单元格合并行A</FONT>
</TD>
</TR>
</TABLE>
<BR>
<table id="PrintB" width="100%" border="1" cellspacing="0"
 cellpadding="0">
<TR style="text-align : center;">
<TD>单元格B</TD>
<TD>单元格B</TD>
<TD>单元格B</TD>
<TD>单元格B</TD>
</TR>
<TR>
<TD colSpan=4 style="text-align : center;">单元格合并行B</TD>
</TR>
</TABLE>
<br><br><br>
<input type="button" onclick="javascript:AllAreaWord();" 
value="导出页面指定区域内容到Word">
<input type="button" onclick="javascript:AllAreaExcel();" 
value="导出页面指定区域内容到Excel">
<input type="button" onclick="javascript:CellAreaExcel();" 
value="导出表单单元格内容到Excel">
<SCRIPT LANGUAGE="javascript">
//指定页面区域内容导入Excel
function AllAreaExcel() 
{
var oXL = new ActiveXObject("Excel.Application"); 
var oWB = oXL.Workbooks.Add(); 
var oSheet = oWB.ActiveSheet; 
var sel=document.body.createTextRange();
sel.moveToElementText(PrintA);
sel.select();
sel.execCommand("Copy");
oSheet.Paste();
oXL.Visible = true;
}
//指定页面区域“单元格”内容导入Excel
function CellAreaExcel() 
{
var oXL = new ActiveXObject("Excel.Application"); 
var oWB = oXL.Workbooks.Add(); 
var oSheet = oWB.ActiveSheet; 
var Lenr = PrintA.rows.length;
for (i=0;i<Lenr;i++) 
{ 
 var Lenc = PrintA.rows(i).cells.length; 
 for (j=0;j<Lenc;j++) 
 { 
 oSheet.Cells(i+1,j+1).value = PrintA.rows(i).cells(j).innerText; 
 } 
} 
oXL.Visible = true; 
}

//指定页面区域内容导入Word
function AllAreaWord()
{
var oWD = new ActiveXObject("Word.Application");
var oDC = oWD.Documents.Add("",0,1);
var oRange =oDC.Range(0,1);
var sel = document.body.createTextRange();
sel.moveToElementText(PrintA);
sel.select();
sel.execCommand("Copy");
oRange.Paste();
oWD.Application.Visible = true;
//window.close();
}
</SCRIPT>
</body>
</html>

导出文字都是没有问题的(jquery.wordexport.js),但是导出图片就存在问题了:

希望本文所述对大家的javascript程序设计有所帮助。

图片是以链接形式存到word中,这样如果是需要vpn的网站就会存在生成的word在没有vpn的情况下打不开,有vpn的情况下必须启用编辑才能加载出来图片。

您可能感兴趣的文章:

  • 可以将word转成html的js代码
  • js生成word中图片处理方法
  • javascript打开word文档的方法
  • js清理Word格式示例代码
  • javascript中直接引用Microsoft的COM生成Word
  • JavaScript打开word文档的实现代码(c#)
  • 几个javascript操作word的参考代码
  • javascript 操作Word和Excel的实现代码
  • javascript下用ActiveXObject控件替换word书签,将内容导出到word后打印
  • JS实现获取word文档内容并输出显示到html页面示例

解决办法:将图片转换成Data URL格式,再导出。

详细代码如下所示:

function changeImgToDataurl(){
 var charImg = document.all("exportdom").getElementsByTagName("img"); 
 var imgURLs = ""; 
 for (var i = 0; i < charImg.length; i++) { 
   var imgURL = charImg[i].currentSrc; 
   getBase64(imgURL,charImg[i]);
 } 
}
function getBase64(url,charImg){
  var Img = new Image();
  Img.crossOrigin = "Anonymous";//跨域必须使用,且后台也得设置允许跨域
  dataURL='';
  Img.src=url;
  Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件
   var canvas = document.createElement("canvas"), //创建canvas元素
   width=Img.width, //确保canvas的尺寸和图片一样
   height=Img.height;
   canvas.width=width;
   canvas.height=height;
   canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
   dataURL=canvas.toDataURL('image/jpg'); //转换图片为dataURL
   condataurl?condataurl(dataURL,charImg):null; //调用回调函数
  };
} 
function condataurl(dataURL,charImg){
 charImg.src=dataURL;
 //console.log(charImg);
}

以上这篇js生成word中图片处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 可以将word转成html的js代码
  • JavaScript将Web页面内容导出到Word及Excel的方法
  • javascript打开word文档的方法
  • js清理Word格式示例代码
  • javascript中直接引用Microsoft的COM生成Word
  • JavaScript打开word文档的实现代码(c#)
  • 几个javascript操作word的参考代码
  • javascript 操作Word和Excel的实现代码
  • javascript下用ActiveXObject控件替换word书签,将内容导出到word后打印
  • JS实现获取word文档内容并输出显示到html页面示例

本文由今晚买四不像发布于计算机网络技术,转载请注明出处:js生成word中图片处理方法

关键词: