|
| 1 | +--- |
| 2 | +title: Reports with Embedded PDF Content |
| 3 | +author: Eugene Polevikov |
| 4 | +--- |
| 5 | + |
| 6 | +# Reports with Embedded PDF Content |
| 7 | + |
| 8 | +This tutorial explains how to use the [PDF Content](../use-report-elements/use-basic-report-controls/pdf-content.md) control to do the following: |
| 9 | + |
| 10 | +* Append PDF file pages to a report and make their paper kind the same as in the inital report. |
| 11 | +* Add sequential page numbers to the report and PDF file pages. |
| 12 | +* Include additional information in the embedded PDF file pages. |
| 13 | + |
| 14 | +The image below shows an invoice report that contains information about order items. |
| 15 | + |
| 16 | + |
| 17 | + |
| 18 | +The following image illustrates the first PDF file page embedded to the invoice report. This page has the same paper kind as the initial report. [Report controls](../use-report-elements/use-basic-report-controls.md) are used to add item title, item price, line, logo image, and sequential page numbers to this page. |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | +To create the above report with PDF content, follow the steps described in these sections: |
| 23 | + |
| 24 | +* [Create the Main Report](#create-the-main-report) |
| 25 | +* [Create a Report with PDF Content](#create-a-report-with-pdf-content) |
| 26 | +* [Add the Report with PDF content to the Main Report](#add-the-report-with-pdf-content-to-the-main-report) |
| 27 | + |
| 28 | +## Create the Main Report |
| 29 | + |
| 30 | +1. Open the [Report Designer](../../report-designer-for-winforms.md) and [add a new blank report](../../report-designer-for-winforms/add-new-reports.md). |
| 31 | +2. Design the report layout. In this tutorial, we create an invoice report that contains information about order items. |
| 32 | + |
| 33 | +  |
| 34 | + |
| 35 | + To supply the report with data, use the following JSON string: |
| 36 | + |
| 37 | + ``` |
| 38 | + { |
| 39 | + "InvoiceNumber": 241756, |
| 40 | + "OrderDate": "2018-04-23T18:25:43.511Z", |
| 41 | + "Customer": { |
| 42 | + "Name": "Walters", |
| 43 | + "HomeOffice_Line": "200 Wilmot Rd", |
| 44 | + "HomeOffice_City": "Deerfield", |
| 45 | + "HomeOffice_StateName": "IL", |
| 46 | + "HomeOffice_ZipCode": "60015" |
| 47 | + }, |
| 48 | + "Store": { |
| 49 | + "Address_City": "Anaheim", |
| 50 | + "Address_Line": "1720 W La Palma Ave", |
| 51 | + "Address_StateName": "CA", |
| 52 | + "Address_ZipCode": "83709" |
| 53 | + }, |
| 54 | + "Employee": { |
| 55 | + "FullName": "Harv Mudd" |
| 56 | + }, |
| 57 | + "PONumber": "122023", |
| 58 | + "ShipMethod": 0, |
| 59 | + "OrderTerms": "15 Days", |
| 60 | + "OrderItems": [ |
| 61 | + { |
| 62 | + "ProductName": "SuperLED 42", |
| 63 | + "ProductPrice": 1050, |
| 64 | + "ProductUnits": 2, |
| 65 | + "Discount": 50, |
| 66 | + "Total": 2050 |
| 67 | + }, |
| 68 | + { |
| 69 | + "ProductName": "SuperLED 50", |
| 70 | + "ProductPrice": 1100, |
| 71 | + "ProductUnits": 5, |
| 72 | + "Discount": 500, |
| 73 | + "Total": 5000 |
| 74 | + }, |
| 75 | + { |
| 76 | + "ProductName": "Projector PlusHD", |
| 77 | + "ProductPrice": 600, |
| 78 | + "ProductUnits": 5, |
| 79 | + "Discount": 250, |
| 80 | + "Total": 2750 |
| 81 | + }, |
| 82 | + { |
| 83 | + "ProductName": "HD Video Player", |
| 84 | + "ProductPrice": 220, |
| 85 | + "ProductUnits": 10, |
| 86 | + "Discount": 200, |
| 87 | + "Total": 2000 |
| 88 | + } |
| 89 | + ], |
| 90 | + "ShippingAmount": 375, |
| 91 | + "TotalAmount": 12175 |
| 92 | + } |
| 93 | + ``` |
| 94 | +
|
| 95 | +The following image illustrates the main report's **Preview**: |
| 96 | +
|
| 97 | + |
| 98 | +
|
| 99 | +## Create a Report with PDF Content |
| 100 | +
|
| 101 | +1. Create a new blank report. Remove the report's margins. |
| 102 | +
|
| 103 | +  |
| 104 | +
|
| 105 | +2. Drop the [PDF Content](../use-report-elements/use-basic-report-controls/pdf-content.md) control from the **Toolbox** onto the *Detail* band. |
| 106 | +
|
| 107 | +  |
| 108 | +
|
| 109 | +3. Expand the control's smart tag, click the **Source** or **Source URL** property's ellipsis button, and select PDF file. In this demo, we use the following PDF specification: [Specification.pdf](https://github.com/DevExpress-Examples/DataSources/blob/master/Specification.pdf). |
| 110 | +
|
| 111 | +  |
| 112 | +
|
| 113 | +4. Disable the control's **Generate Own Pages** property. Adjust the control size to make PDF content fit the entire *Detail* band. For this, set the *Detail* band's **Height** to *1095* and the control's **Width** and **Height** to *850* and *1095*. |
| 114 | +
|
| 115 | +  |
| 116 | +
|
| 117 | +5. Disable the report's **Designer Options -> Show Export Warnings** property. Bind the report to the following JSON data: |
| 118 | + |
| 119 | + ``` |
| 120 | + { |
| 121 | + "InvoiceNumber": 241756, |
| 122 | + "OrderDate": "2018-04-23T18:25:43.511Z", |
| 123 | + "Customer": { |
| 124 | + "Name": "Walters", |
| 125 | + "HomeOffice_Line": "200 Wilmot Rd", |
| 126 | + "HomeOffice_City": "Deerfield", |
| 127 | + "HomeOffice_StateName": "IL", |
| 128 | + "HomeOffice_ZipCode": "60015" |
| 129 | + }, |
| 130 | + "Store": { |
| 131 | + "Address_City": "Anaheim", |
| 132 | + "Address_Line": "1720 W La Palma Ave", |
| 133 | + "Address_StateName": "CA", |
| 134 | + "Address_ZipCode": "83709" |
| 135 | + }, |
| 136 | + "Employee": { |
| 137 | + "FullName": "Harv Mudd" |
| 138 | + }, |
| 139 | + "PONumber": "122023", |
| 140 | + "ShipMethod": 0, |
| 141 | + "OrderTerms": "15 Days", |
| 142 | + "OrderItems": [ |
| 143 | + { |
| 144 | + "ProductName": "SuperLED 42", |
| 145 | + "ProductPrice": 1050, |
| 146 | + "ProductUnits": 2, |
| 147 | + "Discount": 50, |
| 148 | + "Total": 2050 |
| 149 | + }, |
| 150 | + { |
| 151 | + "ProductName": "SuperLED 50", |
| 152 | + "ProductPrice": 1100, |
| 153 | + "ProductUnits": 5, |
| 154 | + "Discount": 500, |
| 155 | + "Total": 5000 |
| 156 | + }, |
| 157 | + { |
| 158 | + "ProductName": "Projector PlusHD", |
| 159 | + "ProductPrice": 600, |
| 160 | + "ProductUnits": 5, |
| 161 | + "Discount": 250, |
| 162 | + "Total": 2750 |
| 163 | + }, |
| 164 | + { |
| 165 | + "ProductName": "HD Video Player", |
| 166 | + "ProductPrice": 220, |
| 167 | + "ProductUnits": 10, |
| 168 | + "Discount": 200, |
| 169 | + "Total": 2000 |
| 170 | + } |
| 171 | + ], |
| 172 | + "ShippingAmount": 375, |
| 173 | + "TotalAmount": 12175 |
| 174 | + } |
| 175 | + ``` |
| 176 | + |
| 177 | +6. Place two [labels](../use-report-elements/use-basic-report-controls/label.md), a [line](../use-report-elements/draw-lines-and-shapes/draw-lines.md), and a [picture box](..\use-report-elements\use-basic-report-controls\picture-box.md) on the PDF page header as shown below: |
| 178 | +
|
| 179 | +  |
| 180 | +
|
| 181 | + Use the following locations and sizes: |
| 182 | +
|
| 183 | + | Control Name | Location | Size | |
| 184 | + | --- | --- | --- | |
| 185 | + | label1 | 105, 94 | 280, 44 | |
| 186 | + | label2 | 105, 138 | 118, 30 | |
| 187 | + | line1 | 105, 69 | 687, 20 | |
| 188 | + | pictureBox1 | 647, 24 | 145, 45 | |
| 189 | +
|
| 190 | +7. Set the line's **Width** and **Fore Color** to *2* and *Orange* respectively. Assign the following image to the picture box's **Image Source** property: |
| 191 | +
|
| 192 | +  |
| 193 | +
|
| 194 | + Make the label1's font bold. Set up label appearance as shown in the table below: |
| 195 | +
|
| 196 | + | Control Name | Font | Font Size | Text Property's Expression | Text Format String | |
| 197 | + | --- | --- | --- | --- | --- | |
| 198 | + | label1 | Segoe UI | 21 | *ProductName* | - | |
| 199 | + | label2 | Segoe UI | 12 | *ProductPrice* | {0:$0} | |
| 200 | +
|
| 201 | +  |
| 202 | +
|
| 203 | + To display a product name and price of each order item on a corresponding PDF file page, set the PDF Content **Page Range** property's [expression](../use-expressions.md) to *[DataSource.CurrentRowIndex] + 1*. |
| 204 | +
|
| 205 | +  |
| 206 | +
|
| 207 | +8. Add the [Page Info](..\use-report-elements\use-basic-report-controls\page-info.md) control to the PDF page footer. Use the following settings for this control: |
| 208 | +
|
| 209 | + | Location | Size | Font | Font Size | Text Alignment | Text Format String | |
| 210 | + | --- | --- | --- | --- | --- | --- | |
| 211 | + | 0, 1045 | 850, 50 | Segoe UI | 12 | Middle Center | Page {0} of {1} | |
| 212 | +
|
| 213 | +  |
| 214 | +
|
| 215 | +Open **Preview** to show the result. The image below shows the report's first page: |
| 216 | +
|
| 217 | + |
| 218 | +
|
| 219 | +## Add the Report with PDF Content to the Main Report |
| 220 | +
|
| 221 | +1. Add a footer to the main report. Right-click the design surface, choose **Insert Band**, and select **ReportFooter**. |
| 222 | +
|
| 223 | +  |
| 224 | +
|
| 225 | +2. Add the [Subreport](..\use-report-elements\use-basic-report-controls\subreport.md) control to the footer. Assign the path the report with PDF content to the control's **Report Source URL** property. Enable the control's **Generate Own Pages** property. |
| 226 | +
|
| 227 | +  |
| 228 | +
|
| 229 | +3. Add the [Page Info](..\use-report-elements\use-basic-report-controls\page-info.md) control to the report's **Bottom Margin** band. Set the control's **Text Alignment** propery to *Middle Center* and the **Text Format String** property to *Page {0} of {1}*. |
| 230 | +
|
| 231 | +  |
| 232 | +
|
| 233 | +Open **Preview** to show the result. |
| 234 | +
|
| 235 | + |
| 236 | +
|
| 237 | + |
0 commit comments