Ueditor文字和echarts图片生成word前端解决方案
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Ueditor⽂字和echarts图⽚⽣成word前端解决⽅案编程就像搭积⽊，少了任何⼀个就拼接不起来，所有积⽊都找到就只剩下调试。
⼀、echarts 获取图⽚⽅法getDataURL
var element = document.getElementById("元素id");
var chart = echarts.init(element);
var option={} //省略
chart.setOption(option);
var picInfo = chart.getDataURL(); // 获取 base64 位格式的图⽚
// console.log("echarts.getDataURL", picInfo);
思路来源：
⼆、实现导出word
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EChart柱状图</title>
<script src="jquery-1.10.2.min.js"></script>
<script src="FileSaver.js"></script>
<script src="jquery.wordexport.js"></script>
</head>
<body>
<a class="word-export" href="javascript:void(0)"> 导出 </a>
<div id="page-content" >
<font size="3" color="red">aaaaa</font>
<div style="width:30px;height:30px;background-color:red">bbbb<div>
</div>
</body>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$("#page-content").wordExport("aaa");
});
});
</script>
</html>
核⼼代码：
<script src="jquery-1.10.2.min.js"></script>
<script src="FileSaver.js"></script>
<script src="jquery.wordexport.js"></script>
//输出word
$("#page-content").wordExport("aaa");
在哪下载？
https:///Jasmine1227/jquery.wordexport.js.git
下载链接来⾃⽂章 https:///jas0203/p/9205607.html
三、 Ueditor ⽣成 word
就在Ueditor 上⼀级添加⼀个
<div id="myid"> <div>
然后 $("#id").wordExport("aaa");
四、 Ueditor图⽂ + echarts 图⽣成 word
同上在他们两个的上⼀级加⼀点 id。
五、Ueditor 中显⽰ echarts 中⽣成的图⽚
只需要在 Ueditor 中加⼀个 image，然后把base64 位数据赋值给src 属性就好了！
<image id ="imgID" src=" Base64位图⽚数据" style=“这⾥还可以调节样式”>
也可以参考⼀种的配置调节base64位图⽚样式。
同时可以隐藏 echarts 图表，让⽤户开起来就是在⼀个⽹页版的word⾥⽣成了⽂章和图⽚。
六百度搜索：
jQuery-Word-Export
jquery.wordexport.js
还有很多可以拓展学习的内容！！
七、拓展思考：
后端⽣成带有echarts 图⽚的word？
⼋、其它没⽤上的：
1、base64转图⽚，⽹站
2、base64转图⽚，代码
function dataURLtoFile(dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
}
var base64Img = imgDataUrl // base64编码的图⽚
var imgFile = dataURLtoFile(base64Img)
console.log('imgFile====>', imgFile)
JS 将 base64编码的图⽚转化为图⽚⽂件（核⼼代码同上）
function dataURLtoFile(dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
}
// base64编码的图⽚
var base64Img = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMj // 转成图⽚⽂件
var imgFile = dataURLtoFile(base64Img);
## 如果想要预览转出来的图⽚可以：
const fileReader = new FileReader(); // 创建⼀个 fileReader
fileReader.readAsDataURL(imgFile); // 将⽣成的图⽚⽂件读到 fileReader中
const img = new Image();
img.src = fileReader.result; // 将 fileReader.result 设置为图⽚的 src
document.body.appendChild(img);
还可以继续百度 base64。