js生成word中图片处理
首先功能是要求前台导出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中图片处理的更多相关文章
- 一段JS控制TD中图片的大小的代码
一段JS控制TD中图片的大小的代码 <table><tr><td id="otd"><div></div><img ...
- 【java】Freemarker 动态生成word(带图片表格)
1.添加freemarker.jar 到java项目. 2.新建word文档. 3.将文档另存为xml 格式. 4.将xml格式化后打开编辑(最好用notepad,有格式),找到需要替换的内容,将内容 ...
- HydroCMS-用ueditor无法实现word中图片转存的问题
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- Ckeditor IE下粘贴word中图片问题
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- 利用VBA宏批量解决Word中图片大小、居中设置
需求:经常阅读网上的研报(没钱买排版漂亮的高质量研报),有些需要保存的复制下来到word里,图片很大都超出word的边界了,也没有居中,手工一张张调整不现实,上百页的研报,几十张图片. 解决方案:利用 ...
- Word中图片自动编号且与文中引用的编号对应
当我们在进行大篇幅 word 文档的编写时, 为了节约修改文章中图片所花费的大量时间, 可以将图片自动编号,且让文中引用的顺序跟着图片顺序的变化而变化,具体操作如下: 1. 将鼠标定在欲加编号的下方, ...
- ueditor粘贴word中图片
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
- js获取页面中图片的总数
查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...
- node.js生成验证码及图片
示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...
随机推荐
- em标签和strong标签的区别
今天模拟面试,第一个问题就是这个,然后我回答说就是表示强调,然后老师说还有吗,我说不知道了,然后,就没有然后了... 第一个层次的区别: <em>标签是告诉浏览器把其中的文本表示为强调的内 ...
- WIN7下安装SVNserver端及client搭建协作环境
一.客户场景: 客户现场须要在虚拟机上封闭开发,所以须要搭建一个SVN协作开发环境.客户提供了一台全新的裸机安装的操作系统是WIN7旗舰版64位. 二.SVNserver搭建 1. SVNserver ...
- 二叉排序树(BST)构造与应用
二叉排序树(BST)构造与应用 本文取自<数据结构与算法>(C语言版)(第三版).出版社是清华大学出版社. 本博文作为学习资料整理. 源码是VC+ ...
- Django的url使用方法
利用Django开发站点.能够设计出很优美的url规则,假设url的匹配规则(包括正則表達式)组织得比較好,view的结构就会比較清晰.比較easy维护. 最简单的形式 from django.con ...
- C - The C Answer (2nd Edition) - Exercise 1-7
/* Write a program to print the value of EOF. */ #include <stdio.h> main() { printf("EOF ...
- 自己手写WEB程序框架并执行
1.新建目录,起名MyWeb 2.目录下,新建两个目录 WEB-INF, META-INF,,还能够新建一些jsp,html文件 ,如 index.html 3在WEB-INF中必须存在一个文件WEB ...
- One-Based Arithmetic
One-Based Arithmetic time limit per test 0.5 seconds memory limit per test 256 megabytes input stand ...
- Nginx服务编译安装、日志功能、状态模块及访问认证模式实操
系统环境 [root@web ~]# cat /etc/redhat-release CentOS release 6.9 (Final) [root@web ~]# uname -a Linux d ...
- F01:金融学第一定律:时间的价值
很小的时候,我们就听大人们讲过:时间就是金钱. 长大了,也觉得这句话应该是对的.我们很珍惜时间,但是似乎没有看到金钱的急剧增加啊.总之,这是模糊,体验感又不强的一句话. 既然谈到时间的价值,价值最容易 ...
- Winform开发框架中工作流模块之审批会签操作
在前面介绍了框架中工作流的几个开发过程,本篇随笔重点介绍一下日常审批环节中的具体处理过程,从开始创建表单,以及各个审批.会签过程的流转过程,希望大家对其中流程的处理有一个大概的印象. 1.请假申请表单 ...