html2canvas将页面导出为图片

283 阅读1分钟
  1. 先安装html2canvas
npm run html2canvas
  1. 在组件中使用
import html2canvas from "html2canvas";

// 导出
onExport() {
  // 页面中需要有ref为content的容器,导出的时候就是这个容器部分
  html2canvas(this.$refs.content).then((canvas) => {
    const chartCode = canvas.toDataURL();
    // 拿到chartCode后按照与后端约定的形式将excel下载即可
    this.$axios({
      ...analysisApi.export,
      data: {
        chartCode,
        operatorMenu: "集客综合分析导出",
        fileFormat: "xlsx",
        zipOrNot: "0",
      },
    }).then((data) => {
      this.$axios({
        ...commonApi.download,
        data: { fileName: data.fileName, fileType: "export" },
      });
    });
  });
},