改变elementui卡片crad样式_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);

思路来源：

https://www.cnblogs.com/zhang1f/p/11093779.html

https://jingyan.baidu.com/article/6b182309dcd748ba59e15974.html

二、 实现导出word

EChart柱状图

导出

aaaaa！！！

bbbb

jQuery(document).ready(function($) {

$("a.word-export").click(function(event) {

$("#page-content").wordExport("aaa");

});

});

核心代码：

//输出word

$("#page-content").wordExport("aaa");

在哪下载？

https://github.com/Jasmine1227/jquery.wordexport.js.git

下载链接来自文章 https://www.cnblogs.com/jas0203/p/9205607.html

三、 Ueditor 生成 word

就在Ueditor 上一级 添加一个

然后 $("#id").wordExport("aaa");

四、 Ueditor图文 + echarts 图 生成 word

同上 在他们两个的上一级加一点 id。

五 、Ueditor 中显示 echarts 中生成的图片

只需要 在 Ueditor 中加一个 image，然后把base64 位数据赋值给src 属性就好了！

也可以参考 一种的配置调节base64位图片样式。

同时可以隐藏 echarts 图表 ，让用户开起来 就是在一个网页版的word里生成了文章和图片。

六 百度搜索：

jQuery-Word-Export

jquery.wordexport.js

还有很多可以拓展学习的内容！！

七、拓展思考：

生成pdf ？

查看pdf ：pdf.js https://www.cnblogs.com/hao-1234-1234/p/8353593.html

生成excel：

jquery.table2excel.js

Echarts 数据视图 生成Excel的方法

https://www.cnblogs.com/hao-1234-1234/p/9257043.html

后端生成 word、excel、pdf、图片？

后端 生成 带有echarts 图片的word？

八、其它没用上的：

1、base64转图片，网站 imgbase64.duoshitong.com

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)

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/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAF+AoADASIAAhEBAxEB/8QAGwABAAIDAQEAAAAAAAAAAAAAAAIFAwQGAQf/xAAaAQEAAwEBAQAAAAAAAAAAAAAAAgMEAQUG/9oADAMBAAIQAxAAAAHvwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHjj1r4Yy3la5KyaOfsc7z2UTz3oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeHrzUj3b06TVya7Kv39