导出为 PNG

从 4.1 版本开始，dhtmlxScheduler 提供了一个在线导出服务，允许您将调度器导出为 PNG 图像。

该服务是免费的，但导出的 PNG 图片将在 GPL 许可下包含库的水印。如果您购买了许可证，在有效支持期内（所有 PRO 许可证为 12 个月），导出将不会有水印。

使用导出服务

您可以选择不同的导出服务。可以将它们本地安装在您的机器上，从而无需依赖在线服务即可导出 Scheduler 为 PNG。

请注意，导出服务并未与 Scheduler 包一起提供。有关各服务的使用条款，请参阅相关文档。

请求大小限制

所有导出方法（如 exportToPDF、exportToPNG 等）都使用统一的 API 端点 https://export.dhtmlx.com/scheduler。允许的最大请求大小为 10 MB。

默认导出为 PNG

要将调度器导出为 PNG 图像，请按照以下步骤操作：

使用 plugins 方法启用 export_api 插件：

scheduler.plugins({
    export_api: true
});

对于 7.0 之前的 Scheduler 版本，还需要在页面中引入 https://export.dhtmlx.com/scheduler/api.js 脚本以激活在线导出服务，例如：

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

使用 exportToPNG 方法触发导出：

<input value="Export to PNG" type="button" onclick='scheduler.exportToPNG()'>

Related sample: Export to PDF/PNG

导出方法的参数

exportToPNG() 方法接受一个包含多个可选属性的对象：

name	(string) 指定输出文件的名称
format	('A0', 'A1', 'A2', 'A3', 'A4', 'A5') 设置输出 PNG 图片的格式
orientation	('portrait', 'landscape') 设置输出 PNG 图片的方向
zoom	(number) 控制输出 PNG 图片的缩放级别
header	(string) 为输出 PNG 图片添加页眉；可以使用任意 HTML
footer	(string) 为输出 PNG 图片添加页脚；可以使用任意 HTML
server	(string) 指定导出请求的 API 端点。如果您运行了本地导出服务，可用此参数。默认值为 https://export.dhtmlx.com/scheduler

调用导出方法并带有可选参数的示例

scheduler.exportToPNG({
    format:"A4",
    orientation:"portrait",
    zoom:1,
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>",
    server:"https://myapp.com/myexport/scheduler"
});

输出文件名

您可以在 exportToPNG 方法中通过 name 属性自定义导出的 PNG 文件名：

scheduler.exportToPNG({
    name:"my_beautiful_scheduler.png"});

输出文件的页眉/页脚

要在输出 PNG 中包含页眉或页脚，请在 exportToPNG 方法中使用 header 和 footer 属性：

这里可以插入任意 HTML。若包含图片，请确保 "src" 属性使用全局 URL。

scheduler.exportToPNG({
    name:"myscheduler.png",
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>"
});

输出文件的自定义样式

要为导出的调度器应用自定义样式，可以通过以下任一方法添加 CSS：

引入样式表链接：

scheduler.exportToPNG({
    name:"calendar.png",
    header:'<link rel="stylesheet" href="http://mysite.com/custom.css">' });

或直接通过 'style' 标签内嵌样式：

scheduler.exportToPNG({
    name:"calendar.png",
    header:'<style>... custom css classes here ...</style>' });

如果您的 CSS 存放在本地或内网，也可以将所有样式内联嵌入，如下所示：

scheduler.exportToPNG({
    header:"<style>.tier1{   background: red;   color:white;}</style>"
});

导出 HTML 元素

导出 Scheduler 为 PNG 时，请注意，出于安全考虑，某些 HTML 元素的导出是受限的。

如 <canvas>、<svg>、<script> 以及 Base64 src 属性的图片等元素并不完全支持。但您可以通过安全方式在 SVG 和 Base64 格式中包含图片：

使用带 src 属性的 <img> 标签，指向 SVG 图片 URL（适用于 PNG 和 JPG 导出，但不适用于 Base64），例如：

<img src=https://www.svgrepo.com/download/530597/hat.svg>

使用 CSS 样式如 background 或 background-image，其 url 可指向图片 URL 或 Base64 编码的图片（适用于 PNG/JPG/SVG 导出）：

.red {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat;
    display: inline-block;
    width: 32px;
    height: 32px;
}

如果您拥有自己的导出模块，并需要导出在线导出服务器不支持的 HTML 元素，请联系技术支持获取如何调整模块以移除这些限制的建议。但请注意，这么做可能会使您的服务器暴露于 XSS 漏洞风险中。

返回顶部