首先功能是要求前台导出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. Backbone简单示例

    要的资源: <script type="text/javascript" src="../dep/underscore-1.6.0.min.js"> ...

  2. Azure ARM (18) 将传统的ASM VM迁移到ARM VM (1)

    <Windows Azure Platform 系列文章目录> 目前很多客户陆续的把传统ASM VM迁移至ARM VM.我这里简单介绍一下. 整个迁移过程分为: 1.Validate,Az ...

  3. HDFS对象存储--Ozone架构设计

    前言 如今做云存储的公司非常多,举2个比較典型的AWS的S3和阿里云.他们都提供了一个叫做对象存储的服务,就是目标数据是从Object中进行读写的,然后能够通过key来获取相应的Object,就是所谓 ...

  4. [UWP]本地化入门

    1. 前言 上一篇文章介绍了各种WPF本地化的入门知识,这篇文章介绍UWP本地化的入门知识. 2. 使用resw资源文件实现本地化 在以前的XAML平台,resx资源文件是一种很方便的本地化方案,但在 ...

  5. IT运维如何防止陷入“中年油腻”和频繁被动地打“遭遇战”?

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:陈峻近期,我拜访了一家文化传播公司的 IT 运维总监 Tim,他向我讲述了他的团队是如何像当年玩<大航海时代>那样将 IT ...

  6. 使用Myeclipse为数据表创建hibernate实体对象

    hibernate是orm框架的一种,orm即Object Relational Mapping,对象映射关系,其主要作用是将数据库(mysql,mssql,oracle)的对象转换为具体编程语言(如 ...

  7. Elasticsearch短语搜索——match_phrase

    找出一个属性中的独立单词是没有问题的,但有时候想要精确匹配一系列单词或者短语 . 比如, 我们想执行这样一个查询,仅匹配同时包含 "rock" 和 "climbing&q ...

  8. Spring:Bean生命周期

    关于Bean生命周期,我在网上找了两张图: 图1: 图2: 总结起来就是: Bean构建: Bean对象创建 > @Autowired | @Resource> @PostConstruc ...

  9. Maven版本号中隐藏的惊天大秘密

    一.背景 现在主流的Java系的互联网公司里,绝大多数公司都使用Maven作为依赖管理工具,一般我们对于依赖的版本号,常见两种类型:一种以“-RELEASE”结尾,另一种以“-SNAPSHOT”结尾. ...

  10. jenkins学习之多项目构建

    多项目构建,即指的是同时构建多个源代码中的项目,我所知道的有两种方法,一种是在某个项目“构建完成后操作”中设置如下: 另外一种是借助于插件——Multijob plugin,如下: 使用方法其实比较简 ...