echarts 图片导入到 word pdf
需求
现在做的项目是，将网页导出成一个word文件，文字部分直接把字符串传给后端就行了。
网页上echarts生成的图表不知道怎么传递给后端，后端还要能够把前端传来的图片写入到word文档中。
百度后，知道了需要将echarts图表的base64编码传递给后端。
获取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
至此即可得到有数据的图片
服务器处理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 base64img_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),});},
附录
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>
参考链接
- ECHART导出图片无数据解决
- Python base64编码，转图片
- Vue中用echarts生成图表的base64编码
- 官方文档 echartsInstance.getDataURL
- new Image()的应用
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！