New to Kendo UI for jQuery? Start a free 30-day trial

Pdf

configuration

Configures the export settings for the saveAsPDF method.

pdf

Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            content: {
                text: "My Shape"
            },
            x: 100,
            y: 100
        }
    ],
    pdf: {
        author: "John Doe",
        creator: "MyApp",
        title: "Diagram Export",
        margin: {
            left: "2cm",
            top: "2cm",
            right: "2cm",
            bottom: "2cm"
        }
    }
});

// Export the diagram as PDF
$("#diagram").data("kendoDiagram").saveAsPDF();
</script>

pdf.author

String

The author of the PDF document that will be visible in the PDF file metadata.

Default: null

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          author: "John Doe"
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.creator

String

The creator of the PDF document.

Default: "Kendo UI PDF Generator"

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          creator: "John Doe"
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.date

Date

The date when the PDF document is created. Defaults to new Date().

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          date: new Date("2014/10/10")
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.fileName

String

Specifies the file name of the exported PDF file.

Default: "Export.pdf"

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          fileName: "Products.pdf"
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.forceProxy

Boolean

If set to true, the exported content is forwarded to the endpoint specified using the proxyURL setting, even if the browser supports saving of files in the user's local file system.

Default: false

pseudo

    <div id="diagram"></div>
    <script>
    $("#diagram").kendoDiagram({
        shapes: [
            { id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
        ],
        pdf: {
            forceProxy: true,
            proxyURL: "/Home/ExportDiagram"
        }
    });

    var diagram = $("#diagram").getKendoDiagram();
    diagram.saveAsPDF();
    </script>

pdf.keywords

String

Specifies the keywords that will appear in the metadata of the exported PDF file.

Default: null

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          keywords: "monthly report"
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.landscape

Boolean

If set to true, changes the document orientation to landscape. This property takes effect when pdf.paperSize is set.

Default: false

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          paperSize: "A4",
          landscape: true
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

Sets the paper margins. The value has to be an object containing top, left, right, and bottom numbers which specify the paper margins. If numbers are passed, they are assumed to be in points (pt). By using strings, you can specify the units. The supported units are mm, cm, in, and pt (default).

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          margin: {
              left: 10,
              right: "10pt",
              top: "10mm",
              bottom: "1in"
          }
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.paperSize

String|Array

Specifies the paper size of the PDF document. The default setting is auto and determines the paper size by content.

The size of the content in pixels matches the size of the output in points (1 pixel = 1/72 inch).

The supported values are:

A predefined size: A0-A10, B0-B10, C0-C10, Executive, Folio, Legal, Letter, Tabloid.
An array of two numbers specifying the width and height in points (1pt = 1/72in)
An array of two strings specifying the width and height in units. The supported units are mm, cm, in, and pt.

Default: "auto"

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          paperSize: ["20cm", "20cm"]
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.proxyTarget

String

A name or keyword indicating where to display the document returned from the proxy.

If you want to display the document in a new window or an iframe, the proxy method has to set the Content-Disposition header of the response to inline; filename="<fileName.pdf>".

Default: "_self"

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          forceProxy: true,
          proxyURL: "/save",
          proxyTarget: "_blank"
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.proxyURL

String

The URL of the server side proxy which will stream the file to the end user.

When the browser is not capable of saving files locally, a proxy will be used. Such browsers are Internet Explorer version 9 (and older) and Safari. You are responsible for implementing the server-side proxy. The proxy receives a POST request with the following parameters in the request body:

contentType - The MIME type of the file
base64 - The base-64 encoded file content
fileName - The file name, as requested by the caller.

The proxy is expected to return the decoded file with a set Content-Disposition header.

You can see sample server proxy implementations here: Server Proxy Implementations.

Default: null

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          proxyURL: "/save"
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.subject

String

Sets the subject of document, which will be shown in the PDF file metadata.

Default: null

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          subject: "Placement of Products"
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

pdf.title

String

Sets the title of the document, which will be shown in the PDF file metadata.

Default: null

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
      pdf: {
          title: "Products"
      },
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      }
  });

  var diagram = $("#diagram").getKendoDiagram();
  diagram.saveAsPDF();
</script>

Related Members