现在做的项目是,将网页导出成一个word文件,文字部分直接把字符串传给后端就行了。
网页上echarts生成的图表不知道怎么传递给后端,后端还要能够把前端传来的图片写入到word文档中。
百度后,知道了需要将echarts图表的base64编码传递给后端。
echarts 声明的代码
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
获取base64编码只有一行代码:
let chartBase64 = myChart.getDataURL();
在附录查看完整代码
getDataURL()的参数,我使用的是,官网给的参数官方文档 echartsInstance.getDataURL
myChart.getDataURL({
pixelRatio: 2,
backgroundColor: "#fff",
});
若你想先预览获取到的 base64的图片
添加如下代码后,在chrome调试窗口预览
var img = new Image();
img.src = myChart.getDataURL({
pixelRatio: 2,
backgroundColor: "#fff",
});
但我们发现echarts的base64生成的图片内,没有数据。
只需要在 option
(关闭动画效果):
生成的图片是在有动画效果出来以前的样子,数据还没渲染上去,因此导出的图片没有数据
animation: false
前端使用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()
【注意】
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),
});
},
<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>