vue dhtmlxgantt 导出

dhtmlxGantt提供了一些方式用于导出 Gantt 图表，包括导出图片和导出 PDF 文件。在使用导出功能之前，需要先在项目中引入 `dhtmlxgantt-export.js` 文件。

以下是使用 dhtmlxGantt 导出 Gantt 图表的步骤：

1. 引入 `dhtmlxgantt-export.js` 文件

<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<script src="https://cdn.dhtmlx.com/gantt/edge/ext/dhtmlxgantt_export.js"></script>

2. 创建导出按钮

<button id="export-btn" onclick="exportGantt()">导出</button>

3. 实现导出函数

function exportGantt() {
  var format = "png"; // 导出格式：png 或 pdf
  var name = "gantt"; // 导出文件名
  var data = gantt.serialize(); // 获取 Gantt 数据

  // 导出图片
  if (format === "png") {
    var img = gantt.export.toPNG();
    download(img, name + ".png", "image/png");
  }

  // 导出 PDF
  if (format === "pdf") {
    var pdf = gantt.export.toPDF({
      data: data,
      columns: gantt.config.columns,
      tasks: {
        template: function (task) {
          return {
            text: task.text,
            start_date: task.start_date,
            duration: task.duration,
            progress: task.progress,
            parent: task.parent,
          };
        },
        scale_height: 50,
      },
    });
    download(pdf, name + ".pdf", "application/pdf");
  }
}

function download(data, filename, type) {
  var file = new Blob([data], { type: type });
  if (window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(file, filename);
  } else {
    var a = document.createElement("a");
    var url = URL.createObjectURL(file);
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    setTimeout(function () {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }, 0);
  }
}

以上代码会在点击导出按钮时，将 Gantt 图表导出为指定格式的文件并自动下载。

注意事项：

- 导出 PDF 文件需要引入 `jspdf.min.js` 和 `html2canvas.min.js` 文件。
- 在使用导出 PDF 功能时，需要在服务器上安装字体文件以保证 PDF 文件的显示效果。