Print

ESM:
Use dark colors for code blocksCopy
1
import "@arcgis/map-components/components/arcgis-print";
CDN:
No specific import is needed for this component.

The Print component connects your application with a printing service to allow the map to be printed. It takes advantage of server-side, high-quality, full cartographic print functionality using the ExportWebMap service of ArcGIS, which can be configured with custom layout templates. One is provided that shows the map only, while another provides a layout with legend, etc. The Print component works with the print module, which generates a printer-ready version of the map.

The Print component uses the ArcGIS Online print service by default, but it can be configured to use a custom print service with the printServiceUrl property. The component can preserve map scale or map extent in the printout. By default, the map extent is preserved. Use TemplateOptions.scaleEnabled to preserve scale instead.

The Print component prints a localized date for all layouts except map-only. If using a custom print service, then customTextElements are supported for each print template. Values found there will be populated in the Print component under Advanced options. These values can be overwritten in the Print component UI, or programmatically using the templateCustomTextElements property.

For more information about printing with the MAP_ONLY layout, please see exportOptions.

Known limitations

See print for a detailed list of known limitations.

Use dark colors for code blocksCopy
1
2
3
<arcgis-map item-id="45725ba7d9fb47a0925398919b13d1fa">
 <arcgis-print position="top-right"></arcgis-print>
</arcgis-map>
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
// get a reference to the component
const components = document.querySelectorAll("arcgis-print");

const portal = new Portal({
 url: "https://user.maps.arcgis.com/sharing",
 authMode: "immediate",
 authorizedCrossOriginDomains: ["https://user.maps.arcgis.com"],
});

components.forEach((component) => {
 component.portal = portal;
});

Demo

Properties

PropertyAttributeType
allowed-formats
Array<string> | string
allowed-formats-for-saving
"all" | Array<string>
allowed-layouts
Array<string> | string
auto-destroy-disabled
boolean
exclude-default-templates
boolean
exclude-organization-templates
boolean
extra-parameters
any
heading-level
1 | 2 | 3 | 4 | 5 | 6
hide-header
boolean
icon
string
label
string
Record<string, unknown>
position
"bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
print-service-url
string
reference-element
show-print-area-enabled
boolean
state
readonly
state
"disabled" | "error" | "initializing" | "ready"
{ [x: string]: Array<HashMap<string>> | undefined; }

allowedFormats

Property
allowedFormats: Array<string> | string

Specify the print output file format(s) that the user can select based on the options available from the print service. This property can take a string value or an array of string values.

When this value is "all" (default value), all the print service formats are available to be used. When an array of string values is used, only those values that match the options available from the print service will be used. If none of the input string values match those available from the print service, allowedFormats will fallback to default behavior.

Attribute
allowed-formats
Default value
"all"

allowedFormatsForSaving

Property
allowedFormatsForSaving: "all" | Array<string>

Specifies the print output file format(s) that the user can select when saving the exported map printout. This property can take a string value or an array of string values.

Attribute
allowed-formats-for-saving

allowedLayouts

Property
allowedLayouts: Array<string> | string

Specify the print output layout(s) that the user can select based on the options available from the print service. This property can take a string value or an array of string values.

When this value is "all" (default value), all the print service layouts are available to be used. When an array of string values is used, only those values that match the options available from the print service will be used. If none of the input string values match those available from the print service, allowedLayouts will fallback to default behavior.

Attribute
allowed-layouts
Default value
"all"

autoDestroyDisabled

Property
autoDestroyDisabled: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy method when you are done to prevent memory leaks.

Attribute
auto-destroy-disabled
Default value
false

excludeDefaultTemplates

Property
excludeDefaultTemplates: boolean

Indicates whether or not to include defaultTemplates.

Attribute
exclude-default-templates
Default value
false

excludeOrganizationTemplates

Property
excludeOrganizationTemplates: boolean

Indicates whether or not to include templates from an organization's portal.

Attribute
exclude-organization-templates
Default value
false
Property
exportedLinks: Collection<FileLink>

The collection of links exported from the Print component.

extraParameters

Property
extraParameters: any

This option allows passing extra parameters (in addition to templateOptions) to the print (export webmap) requests.

Attribute
extra-parameters

headingLevel

Property
headingLevel: 1 | 2 | 3 | 4 | 5 | 6

Indicates the heading level to use for the "Exported files" text where users can access the exported map printout. By default, this text is rendered as a level 3 heading (e.g. <h3>Exported files</h3>). Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

Attribute
heading-level
Default value
3

hideHeader

Property
hideHeader: boolean

Indicates whether the component's header is hidden.

Attribute
hide-header
Default value
false

icon

Property
icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also
Attribute
icon
Default value
"print"

label

Property
label: string

The component's default label.

Attribute
label

messageOverrides

Property
messageOverrides: Record<string, unknown>

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

outSpatialReference

Property
outSpatialReference: SpatialReference

The spatial reference used to render the printed map on the server.

portal

Property
portal: Portal

It is possible to search a specified portal instance's locator services. Use this property to set this ArcGIS Portal instance to search. This is especially helpful when working with a custom template.

If this property is set, it is not necessary to set the printServiceUrl property.

position

reflected

Attribute changes are reflected on the DOM.

Property
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

The UI position of a component.

Attribute
position
Default value
"top-left"

printServiceUrl

Property
printServiceUrl: string

The URL of the REST endpoint of the Export Web Map Task. Defaults to the ArcGIS Online print service if this property is not specified. If the portal property is set, this property will use the portal's print service URL.

Attribute
print-service-url

referenceElement

Property

By passing the id of the Map or Scene component into this property, you can position components from the @arcgis/map-components package anywhere in the DOM while still maintaining a connection to the Map or Scene.

See Associate components with a Map or Scene component.

Attribute
reference-element

showPrintAreaEnabled

Property
showPrintAreaEnabled: boolean

The initial state of the print area toggle in the Print component UI. When set to true, the print area toggle is enabled by default. When set to false, the print area toggle is disabled by default.

Attribute
show-print-area-enabled
Default value
false

state

readonlyreflected

Attribute changes are reflected on the DOM.

Property
state: "disabled" | "error" | "initializing" | "ready"

The state of the Print component.

Attribute
state
Default value
"disabled"

templateCustomTextElements

Property
templateCustomTextElements: { [x: string]: Array<HashMap<string>> | undefined; }

An object containing an array of customTextElements name-value pair objects for each print template in a custom print service. Use this property to update the text for custom text elements on the page layout.

The Print component calls the Get Layout Templates Info task on the GPServer to discover possible customTextElements values for each template. The name of the task must match Get Layout Templates Info, templates must be published with customTextElements, and values must be strings. Values found there will be populated in the Print component under Advanced options. These values can be overwritten in the Print component UI, or programmatically using this property. To list all print templates available on the print service to see see which templates were published with customTextElements, use the effectiveTemplateCustomTextElements property.

templateOptions

Property
templateOptions: TemplateOptions

Defines the layout template options used by the Print component to generate the print page.

Slots

No slots to display.

Events

EventType
PrintCompleteEvent
CustomEvent<{ name: "state"; }>
PrintSubmitEvent

arcgisComplete

Event
arcgisComplete: PrintCompleteEvent

Emitted when the component is complete.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisPropertyChange

Event
arcgisPropertyChange: CustomEvent<{ name: "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisReady

Event
arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is is ready to be interacted with.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisSubmit

Event
arcgisSubmit: PrintSubmitEvent

Emitted when the component is submitted.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Methods

MethodSignature
componentOnReady(): Promise<void>
destroy(): Promise<void>

componentOnReady

Method
componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example
Use dark colors for code blocksCopy
1
2
3
4
const arcgisPrint = document.querySelector("arcgis-print");
document.body.append(arcgisPrint);
await arcgisPrint.componentOnReady();
console.log("arcgis-print is ready to go!");
Returns
Promise<void>

destroy

Method
destroy(): Promise<void>

Permanently destroy the component.

Returns
Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.