依赖
npm install file-saver
页面
<ve-chart ref="chart"></ve-chart> <el-button type="danger" @click="exportChart">导出图表</el-button>
JS
exportChart () { if (typeof Blob !== 'function') { this.$alert('您的浏览器不支持!请使用最新版本chrome/firefox浏览器!') return } const canvas = this.$refs.chart.$el.getElementsByTagName('canvas')[0] try { canvas.toBlob((blob) => { FileSaver.saveAs( blob, 'chart.png' ) }) } catch (e) { console.error(e) this.$alert('导出失败!') } }
兼容的浏览器:
如果浏览器不兼容可以使用 canvas-toBlob.js 作为pollyfill