一、用dom-to-image和file-saver
步骤：
- 安装 dom-to-image@2.6.0 和 file-saver@2.0.5
npm install dom-to-image@2.6.0 file-saver@2.0.5
- 引入
import domtoimage from 'dom-to-image'
import {saveAs} from 'file-saver'
- 保存方法 - 以保存为png为例
domtoimage.toBlob(document.getElementById('tableBox')).then(function (blob) {
saveAs(blob, '文件名.png');
})
弊端：保存echarts时，Safari浏览器会出现保存为空的现象
二、用canvas
let canvas = document.getElementsByTagName('canvas')[0];
let image = canvas.toDataURL({
type:"png",
pixelRatio: 2,
});
let alink = document.createElement("a");
alink.href = image;
alink.download = '文件名';
alink.click();
优点：echarts图片在任何浏览器都OK
弊端：只能保存canvas标签的
三、JS保存Echarts的图表
实现思路
- 1.通过getDataURL()获取图片的base64编码字符；
- 2.字符解码，并转换成Blob对象；
- 3.通过Blob对象创建URL对象；
- 4.利用触发下载操作；
<div class="stacked-chart-box">
<input type="button" value="导出" onclick="saveAsImage()"/>
<div id="echartId" class="stacked-chart"></div>
</div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("echartId");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
// Echarts自带的下载功能
// toolbox: {
// show: true,
// feature: {
// saveAsImage: {}
// }
// },
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
function saveAsImage() {
let content = myChart.getDataURL();
let aLink = document.createElement('a');
let blob = this.base64ToBlob(content);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
aLink.download = "line.png";
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
}
//base64转blob
function base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
</script>
