如何将 RadGantt 的完整视图导出为 PDF？

Question

我正在使用 Telerik RadGantt，如代码所示。使用 RadClientExportManager，我无法导出图表的完整视图。仅导出可见的部分。它不导出可滚动部分

我尝试使用 RadGanttt 本身的 EnablePDFExport 功能，但它也一样。

telerik 在https://demos.telerik.com/aspnet-ajax/gantt/examples/functionality/pdf-export/defaultcs.aspx 提供的演示示例完美地完成了它。由于他们没有在这里显示 css，我无法找到问题所在。

   //Javascript
    <script type="text/javascript">
           function exportElement() 
                 {
                  var exp = $find("<%=rcExportManager.ClientID%>");
                  exp.exportPDF($telerik.$(".exportArea"));
                 }
    </script>

    //Asp.net

    <div class="exportArea">
     <telerik:RadGantt 
        runat="server"
        ID="RadGantt1" Skin="Metro"
        ReadOnly="true"
        Height="450px"
        AutoGenerateColumns="false"
        EnablePdfExport="true">
        <Columns>
            <telerik:GanttBoundColumn DataField="Title" DataType="String" Width="160px"></telerik:GanttBoundColumn>
            <telerik:GanttBoundColumn DataField="Start" HeaderText="Start" Width="85px" DataFormatString="dd-MMM-yyyy" DataType="DateTime"></telerik:GanttBoundColumn>
            <telerik:GanttBoundColumn DataField="End" HeaderText="End" Width="85px" DataFormatString="dd-MMM-yyyy" DataType="DateTime"></telerik:GanttBoundColumn>
        </Columns>
        <DataBindings>
            <TasksDataBindings
                IdField="ID" ParentIdField="ParentID" SummaryField="Summary"
                StartField="CurrentStartDate" EndField="CurrentEndDate"
                TitleField="Title" PercentCompleteField="PerCompleted" />

        </DataBindings>
      </telerik:RadGantt>

     </div> 
    <input type="button" onclick="exportElement()" value="export" />
    <telerik:RadClientExportManager runat="server" ID="rcExportManager">

    </telerik:RadClientExportManager>

Answer 1

---

更新：该问题已在 2016 Q1 版本中修复。对于以前的版本，可以使用 OnClientPdfExporting 事件作为解决方法

<telerik:RadGantt OnClientPdfExporting="OnClientPdfExporting" ... >

<script>
var $ = $ || $telerik.$;
function OnClientPdfExporting(sender, args) {
    var elem = sender.get_element();
    var originalWidth = sender.get_width();
    var originalListWidth = sender.get_listWidth();
    var width = $(elem).find(".rgtTreelistWrapper").width() +
        $(elem).find(".radFauxRows").width();

    sender.set_listWidth($(elem).find(".rgtTreelistWrapper").width())
    sender.set_width(width);

    // http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful
    setTimeout(function () {
        sender.set_width(originalWidth);
        sender.set_listWidth(originalListWidth);
    })
}

---

我已经测试了提供的 sn-p 和内置的导出工作，如 this screenshot 所示。

这是我使用的完整代码。

<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.7/pako_deflate.min.js"></script>
<telerik:RadGantt
    runat="server"
    ID="RadGantt1" Skin="Metro"
    ReadOnly="true"
    Height="450px"
    AutoGenerateColumns="false"
    EnablePdfExport="true">
    <Columns>
        <telerik:GanttBoundColumn DataField="Title" DataType="String" Width="160px"></telerik:GanttBoundColumn>
        <telerik:GanttBoundColumn DataField="Start" HeaderText="Start" Width="85px" DataFormatString="dd-MMM-yyyy" DataType="DateTime"></telerik:GanttBoundColumn>
        <telerik:GanttBoundColumn DataField="End" HeaderText="End" Width="85px" DataFormatString="dd-MMM-yyyy" DataType="DateTime"></telerik:GanttBoundColumn>
    </Columns>
    <DataBindings>
        <TasksDataBindings
            IdField="ID" ParentIdField="ParentID" SummaryField="Summary"
            StartField="Start" EndField="End"
            TitleField="Title" PercentCompleteField="PercentComplete" />
    </DataBindings>
</telerik:RadGantt>

private DataTable GetGanttTasksSource()
{
    DataTable dataTable = new DataTable();

    dataTable.Columns.Add(new DataColumn("ID", typeof(int)));
    dataTable.Columns.Add(new DataColumn("ParentID", typeof(int)));
    dataTable.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dataTable.Columns.Add(new DataColumn("Title", typeof(string)));
    dataTable.Columns.Add(new DataColumn("Start", typeof(DateTime)));
    dataTable.Columns.Add(new DataColumn("End", typeof(DateTime)));
    dataTable.Columns.Add(new DataColumn("PercentComplete", typeof(decimal)));
    dataTable.Columns.Add(new DataColumn("Expanded", typeof(bool)));
    dataTable.Columns.Add(new DataColumn("Summary", typeof(bool)));

    dataTable.PrimaryKey = new DataColumn[] { dataTable.Columns["ID"] };

    int parentsCount = 4;

    for (int i = 1; i <= parentsCount; i++)
    {
        DataRow row = dataTable.NewRow();
        row["ID"] = i;
        row["ParentID"] = DBNull.Value;
        row["OrderID"] = i;
        row["Title"] = "Task #" + (i);
        row["Start"] = DateTime.Now.AddDays(i - 1);
        row["End"] = DateTime.Now.AddDays(i);
        row["PercentComplete"] = 0.2M;

        if (i == parentsCount)
        {
            row["Expanded"] = false;
        }
        else
        {
            row["Expanded"] = DBNull.Value;
        }

        row["Summary"] = i == parentsCount; // last task is a parent/summary

        dataTable.Rows.Add(row);
    }

    for (int i = parentsCount + 1; i <= parentsCount + 5; i++)
    {
        DataRow row = dataTable.NewRow();
        row["ID"] = i;
        row["ParentID"] = parentsCount;
        row["OrderID"] = i;
        row["Title"] = "Task #" + (i);
        row["Start"] = DateTime.Now.AddDays(i - 1);
        row["End"] = DateTime.Now.AddDays(i);
        row["PercentComplete"] = 0.4M;
        row["Expanded"] = DBNull.Value;
        row["Summary"] = false;

        dataTable.Rows.Add(row);
    }

    return dataTable;
}

我建议检查的一些事情是：

• 最新版本的 Telerik 是否重现了该问题
• 这是一个特定于浏览器的问题，即它是在所有浏览器上观察到还是仅在其中一个浏览器上观察到
• 浏览器控制台中是否有任何 JavaScript 错误