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

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

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

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

详细代码如下所示:

 function changeImgToDataurl(){

    var charImg = document.all("exportdom").getElementsByTagName("img");
var imgURLs = "";
for (var i = ; 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,,,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中图片处理的更多相关文章

  1. 一段JS控制TD中图片的大小的代码

    一段JS控制TD中图片的大小的代码 <table><tr><td id="otd"><div></div><img ...

  2. 【java】Freemarker 动态生成word(带图片表格)

    1.添加freemarker.jar 到java项目. 2.新建word文档. 3.将文档另存为xml 格式. 4.将xml格式化后打开编辑(最好用notepad,有格式),找到需要替换的内容,将内容 ...

  3. HydroCMS-用ueditor无法实现word中图片转存的问题

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  4. Ckeditor IE下粘贴word中图片问题

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  5. 利用VBA宏批量解决Word中图片大小、居中设置

    需求:经常阅读网上的研报(没钱买排版漂亮的高质量研报),有些需要保存的复制下来到word里,图片很大都超出word的边界了,也没有居中,手工一张张调整不现实,上百页的研报,几十张图片. 解决方案:利用 ...

  6. Word中图片自动编号且与文中引用的编号对应

    当我们在进行大篇幅 word 文档的编写时, 为了节约修改文章中图片所花费的大量时间, 可以将图片自动编号,且让文中引用的顺序跟着图片顺序的变化而变化,具体操作如下: 1. 将鼠标定在欲加编号的下方, ...

  7. ueditor粘贴word中图片

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  8. js获取页面中图片的总数

    查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...

  9. node.js生成验证码及图片

    示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...

随机推荐

  1. dict.get()和dict['key']的区别

    a ={'name':'xxxx'} 1.a.get('gender') :如果不存在则返回一个默认值,如果设置了则返回默认的值,没有设置就返回None 2.a['gender'] :只能获取存在的值 ...

  2. Web Api 基于Zookeeper的服务注册与发现

    安装与差异 Zookeeper安装请参考我上篇文章 http://www.cnblogs.com/woxpp/p/7700368.html 基于Nginx的服务提供和消费 基于zookeeper的服务 ...

  3. greenplum在执行vacuum和insert产生死锁问题定位及解决方案

    首先声明:未经本人同意,请勿转载,谢谢! 本人使用自己编译的开源版本的greenplum数据库用于学习,版本为PostgreSQL 8.3.23 (Greenplum Database 4.3.99. ...

  4. Golang中的信号处理

    信号类型 个平台的信号定义或许有些不同.下面列出了POSIX中定义的信号. Linux 使用34-64信号用作实时系统中. 命令 man 7 signal 提供了官方的信号介绍. 在POSIX.1-1 ...

  5. quzrtz的使用

    Quartz是一个大名鼎鼎的Java版开源定时调度器,功能强悍,使用方便. 一.核心概念 1.Job 表示一个工作,要执行的具体内容,此接口只有一个方法 void execute(JobExecuti ...

  6. Java 中 for each

    格式: for(type element: array) {       System.out.println(element); } //ex:{ public static void main(S ...

  7. 为WebClient增加Cookie的支持

    我们经常会在应用程序中使用到WebClient模拟访问网站资源并且进行处理,如果多次访问之间我们希望为他们保存Cookie,换句话说,第一个请求产生的Cookie能自动带到第二个请求的话,可以通过自定 ...

  8. 五.RabbitMQ之路由(Routing)和主题(topics)

    翻译官网的文章已经翻译了几天了,这份官方文档写的总体算是很简洁易懂.它让我们很快的入门并了解了RabbitMQ的运作原理和使用方式.本篇最后介绍一下Exchange的另外两种类别,即direct和to ...

  9. Shell编程之文本处理

    cut 截取自定列 可以按照某个字符进行分割,然后取出其中的指定列: [root@iz8vbbqbnh4ug2q9so5jflz logs]# --.txt /Dec/::: +] - /Dec/:: ...

  10. Python学习日记:day1

    1.计算机基础 cpu:相当于人的大脑,用于计算. 内存:储存数据,运行速度快,成本高,断电数据消失. 硬盘 :固态硬盘(快).机械硬盘(有指针).储存数据,需要长期保持数据,重要文件 打开qq过程: ...