echarts 图片导入到 word pdf

需求

现在做的项目是，将网页导出成一个word文件，文字部分直接把字符串传给后端就行了。

网页上echarts生成的图表不知道怎么传递给后端，后端还要能够把前端传来的图片写入到word文档中。
百度后，知道了需要将echarts图表的base64编码传递给后端。

获取echarts的base64编码

echarts 声明的代码

var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
1
2
3

获取base64编码只有一行代码：

let chartBase64 = myChart.getDataURL();
1

在附录查看完整代码

getDataURL()的参数，我使用的是，官网给的参数官方文档 echartsInstance.getDataURL

myChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: "#fff",
      });
1
2
3
4

若你想先预览获取到的 base64的图片
添加如下代码后，在chrome调试窗口预览

var img = new Image();
img.src = myChart.getDataURL({
  pixelRatio: 2,
  backgroundColor: "#fff",
});
1
2
3
4
5

但我们发现echarts的base64生成的图片内，没有数据。

只需要在 option （关闭动画效果）:

生成的图片是在有动画效果出来以前的样子，数据还没渲染上去，因此导出的图片没有数据

animation: false   
1

至此即可得到有数据的图片

服务器处理base64编码的图片

前端使用axios将base64编码的图片传递到后端后，由后端代码进行处理
axios POST传递数据，参考这篇文章

python django 将base64编码的图片 保存为png图片的代码

@csrf_exempt
def printPost(request):
    if request.method == "POST":
        data = simplejson.loads(request.body)
        # base64 编码的图片
        if data.get("img"):
            img_data = data.get("img")
            saveImg(img_data)
            # print("图片保存成功")
        return JsonResponse(data)
    else:
        return HttpResponse("只接受post传参", status=406)


def saveImg(ImgBase64):
    import base64
    img_data = base64.b64decode(ImgBase64)
    with open("./test.png", "wb") as f:
        f.write(img_data)
        f.close()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

【注意】
base64图片格式如下，需要删去 data:image/png;base64,才能在python中保存为图片

data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAABLAAAAMgCAYAAAAz4JsCAAAAAXNSR0IArs4c6QAAIABJREFUeF7s3Qd0FWX6x/EnlYSE0EKR3iEGkCbi2kVdOyoK6K4NLIsKQuggiPQaIIQuILqKoIKyC/pHwcayKorCQiItQIAQQggQAoQ0/ucdyOVOCtwkt8yd+c45e3TNzPu+z+e

我是在前端js POST上传数据的部分，通过 slice(22) 就删除了data:image/png;base64,，所以我在后端没有对头部进行处理

upImg() {
      let url = "http://localhost:8080/jango/print/post";
      this.postData(url, {
        img: this.imgData.slice(22),
      });
    },
1
2
3
4
5
6

附录

vue 代码

<template>
  <div>
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/grid");
require("echarts/lib/chart/line");

export default {
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        animation: false,
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
      let chartBase64 = myChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: "#fff",
      });
      console.log(chartBase64);

      // chrome 窗口预览图片
      /*
      var img = new Image();
      img.src = myChart.getDataURL({
        pixelRatio: 2,
        backgroundColor: "#fff",
      });
      */
    },
  },
};
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

参考链接

• ECHART导出图片无数据解决
• Python base64编码，转图片
• Vue中用echarts生成图表的base64编码
• 官方文档 echartsInstance.getDataURL
• new Image()的应用