html2canvas保存el-table到图片

来源：恒创科技编辑：恒创科技编辑部

2024-01-19 15:37:59

Vue

1、安装html2canvas

npm install --save html2canvas

2、使用

# template部分

<el-button
  size="mini"
  class="el-icon-download"
  @click="saveSummaryToPic"
  circle
></el-button>
<el-table
  :data="summaryData"
  size="small"
  id="sumtable"
>
</el-table>

# mehods部分
saveSummaryToPic() {
  let opts = {};
  let domobj = document.getElementById("sumtable");
  html2canvas(domobj, opts).then((canvas) => {
    document.body.appendChild(canvas);
    let url = canvas.toDataURL("image/png");
    this.downloadSummary(url);
  });
},
downloadSummary(url) {
  let link = document.createElement("a");
  link.href = url;
  link.setAttribute("download", "summaryTable.png");
  link.click();
},