跳到主要内容

exportToPDF

Description​

将甘特图导出为 PDF 文件

exportToPDF: (export?: any) => void

Parameters​

  • export - (optional) object - 可选，包含导出设置（详见下文）

Example​

gantt.exportToPDF();
 
//或者
gantt.exportToPDF({
  name: "mygantt.pdf"
});

gantt.exportToPDF({
    name:"mygantt.pdf",
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>",
    locale:"en",
    start:"01-04-2013",
    end:"11-04-2013",
    skin:'terrace',
    data:{ },
    server:"https://myapp.com/myexport/gantt",
    raw:true,
    callback: function(res){
        alert(res.url);
    }
});

Details​

注释

此方法属于 export 扩展，因此请确保激活了 export_api 插件。更多信息请参见 导出为 PDF 和 PNG 文章。

注释

对于 8.0 之前的 Gantt 版本，您需要在页面中引入 https://export.dhtmlx.com/gantt/api.js 来启用在线导出服务，例如:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

exportToPDF 方法接受一个对象参数，包含多种可选属性:

name(string) 导出 PDF 的文件名
skin('terrace', 'skyblue', 'meadow', 'broadway') 应用于导出甘特图的主题
locale(string) 设置导出甘特图中使用的语言
start(string) 定义导出图表中显示数据范围的起始日期。日期格式遵循 date_format 的设置
end(string) 定义导出图表中显示数据范围的结束日期。日期格式遵循 date_format 的设置
data(object) 允许指定导出图表的自定义数据源
header(string) 作为导出 PDF 页眉的 HTML 内容
footer(string) 作为导出 PDF 页脚的 HTML 内容
server(string) 处理导出请求的 API 端点 URL。可用于本地导出服务。默认值为 https://export.dhtmlx.com/gantt
raw(boolean) 如果为 true，则精确导出甘特图的 markup，包括自定义元素。默认为 false。更多详情
callback(function) 接收包含下载生成 PDF 文件 URL 的 JSON 对象的回调函数
additional_settings(object) 额外设置，可包含:
  • format - (string) 输出文件格式:'A3', 'A4', 'A5', 'Legal', 'Letter', 'Tabloid'
  • landscape - (boolean) 设置纵向或横向打印；仅在指定了 "format" 时生效
  • width - (string|number|"content") 页面宽度，导出多页时使用
  • height - (string|number|"content") 页面高度，导出多页时使用
  • merge_pages - (boolean) 启用多页导出为单个文件；为 false 时，需要多次导出以覆盖所有数据
  • fixed_headers - (boolean) 在每页显示 grid 和 timeline 的表头；默认为 false，且需启用 merge_pages

时间限制​

注释

导出服务有时间限制。

如果导出时间超过 20 秒，导出过程将被取消，并显示以下错误:

Error: Timeout trigger 20 seconds

如果多个用户同时导出甘特图，可能导致过程比平时更长。但每个用户的导出时间是单独计算的。

注释

对于大型图表导出，建议使用独立导出模块。该模块随 Commercial、Enterprise 或 Ultimate 许可证免费提供，也可单独购买，详见 这里。

多页导出​

请注意，导出模块无法:

  • 控制分页位置，任务可能被拆分到不同页面
  • 在每页显示刻度而不重叠任务
  • 在每页显示页眉和页脚而不重叠任务行

这些需要自定义解决方案。以下提供一些示例。

自动导出多页到单个文件​

若要将多页导出合并为单个文件，可使用在线导出服务（受时间限制约束）或无时间限制的独立导出模块。 只需在 additional_settings 中设置 merge_pages 选项:

gantt.exportToPDF({
    additional_settings: {
        merge_pages: true, /*!*/
        format: "A4"
    }
});

在线导出服务适合较小甘特图。对于大型图表，数据可能分批导出。此时，您可以进行多次手动导出或使用独立导出模块，它能处理所有数据并生成包含所有页面的单一文件。

注释

Sample: 多页导出到单个文件示例

请注意，多页导出比单页导出耗时更长。为加快速度，可调整缩放级别至周、月或年，减少甘特图宽度和导出时间。

详情请见相关文章。

手动多次导出​

由于甘特图通常宽度超过标准页面尺寸，导出时每次只捕获最左侧部分。 要导出全部数据，需要多次导出，每次将图表向左移动。

要在导出文件中移动甘特图，可通过 header 参数为 #gantt_here 添加如下样式规则:

const width = 1000;
const height = 1000;
const total_width = gantt.$task_bg.scrollWidth + gantt.$grid.scrollWidth;

for (let i = 0; i < total_width; i += width) {
  gantt.exportToPDF({
    header:`<style>#gantt_here{left:-${i}px;position: absolute;}</style>`,
    //raw: true,
    additional_settings:{
      width: width,
      height: height,
    }
  });
}
注释

Sample: 指定大小导出示例

如果导出为特定格式如 'A3'，请注意文件格式单位为毫米，而 HTML 尺寸为像素。 您需要将毫米转换为像素作为偏移值:

const widthMM = 297;
const width = widthMM / (25.4 inch / 96 PDF PPI);
注释

Sample: 指定格式导出示例


注意: 如果多页导出只生成一个 PDF 文件，可能是浏览器阻止了弹窗，因为多次导出会同时打开多个弹窗。 请启用弹窗后重试导出。

blocked_popup

在每页显示 timeline 和 grid 表头​

要在导出文件的每一页显示 timeline 和 grid 的表头，请在 additional_settings 中启用 fixed_headers 选项。 此功能仅在启用 merge_pages 时有效:

gantt.exportToPDF({
    additional_settings: {
        merge_pages: true,  /*!*/
        fixed_headers: true,  /*!*/
        format: "A4"
    }
});
注释

Sample: 多页导出，每页带表头示例

注释

Sample: 资源面板视图多页导出，每页带表头示例

若不使用配置，例如导出多个文件后手动合并，可使用以下 CSS:

.grid_cell .gantt_grid_scale,
.timeline_cell .gantt_task_scale {
  position: fixed;
  top:0;
  z-index:99999;
}