Ueditor文字和echarts图片 生成 word 前端解决方案

时间：2024-02-25 09:21:04

 

编程就像搭积木，少了任何一个就拼接不起来，所有积木都找到就只剩下调试。

 

一、echarts  获取图片方法getDataURL 

详细配置：https://www.echartsjs.com/zh/api.html#echartsInstance.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

思路来源： https://bbs.csdn.net/topics/392294267

<!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://github.com/Jasmine1227/jquery.wordexport.js.git
下载链接来自文章  https://www.cnblogs.com/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
还有很多可以拓展学习的内容！！

 

 

 

 

 

七、拓展思考：

生成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转图片，代码

https://www.cnblogs.com/ryze/p/Ryze1.html

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编码的图片转化为图片文件 （核心代码同上）
https://www.jianshu.com/p/e26aaca7e201
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,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\';
// 转成图片文件
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 


 










JS 将 base64编码的图片转化为图片文件




R_X