# Simple export
This tutorial outlines how to create the PDF export
This example shows how to export a simple plot to pdf. The pdf export is initiated by clicking on the print button which in turn executes the printToPdf function. After the pdf is generated it is displayed in pdf format in new window.
import { UnitFactory } from "@int/geotoolkit/util/UnitFactory.ts";
import { PaperFormatFactory } from "@int/geotoolkit/scene/exports/PaperFormatFactory.ts";
import { PaperOrientation } from "@int/geotoolkit/scene/exports/PaperOrientation.ts";
import { NodeAdapter } from "@int/geotoolkit/scene/exports/NodeAdapter.ts";
import { PdfExport } from "@int/geotoolkit/pdf/PdfExport.ts";
import { StringStream } from "@int/geotoolkit/util/stream/StringStream.ts";
import { CompositeDocumentElement } from "@int/geotoolkit/scene/exports/CompositeDocumentElement.ts";
import { FreeLayout } from "@int/geotoolkit/scene/exports/FreeLayout.ts";
import { Document } from "@int/geotoolkit/scene/exports/Document.ts";
import { AnnulusArc } from "@int/geotoolkit/scene/shapes/AnnulusArc.ts";
import { Arc } from "@int/geotoolkit/scene/shapes/Arc.ts";
import { Text } from "@int/geotoolkit/scene/shapes/Text.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import { KnownColors } from "@int/geotoolkit/util/ColorUtil.ts";
import { ScalingOptions } from "@int/geotoolkit/scene/exports/ScalingOptions.ts";
function simple(plotRoot, exportBounds) {
const px = UnitFactory.getInstance().getUnit("px");
const paper = PaperFormatFactory.getInstance().getPaper("Letter", px, PaperOrientation.Portrait);
const printSettings = {
"paperformat": paper,
"top": 0.85,
"bottom": 0.85,
"left": 1.1,
"right": 1.1,
"units": "in",
"scaling": ScalingOptions.AsIs,
"keepaspectratio": true,
"continuous": false
};
const plotElement = new NodeAdapter(plotRoot, exportBounds).setBounds(exportBounds);
const components = [plotElement];
const pdfExport = new PdfExport();
const pdfStream = new StringStream();
const root = new CompositeDocumentElement(components, new FreeLayout(exportBounds.getWidth(), exportBounds.getHeight()));
const document = new Document(root, null, null, true);
const stream = pdfExport.documentExportToPdfStream(document, printSettings, pdfStream);
if (stream) {
stream.save("PDF Output", !PdfExport.isSupported());
}
}
function printToPdf(plot) {
const plotRoot = plot.getRoot();
const exportBounds = plotRoot.getBounds();
simple(plotRoot, exportBounds);
}
function createScene(canvas) {
const anArc = new AnnulusArc({
"x": 150,
"y": 125,
"innerradius": 30,
"outerradius": 100,
"startarc": 2 * Math.PI * 0.3,
"endarc": 2 * Math.PI * 0.9,
"linestyle": {
"color": KnownColors.Orange,
"width": 3
},
"fillstyle": KnownColors.Blue
});
const arc = new Arc({
"x": 150,
"y": 125,
"radius": 100,
"startarc": 2 * Math.PI,
"endarc": 2 * Math.PI * 1.2,
"linestyle": {
"color": KnownColors.Orange,
"width": 3
},
"fillstyle": KnownColors.Blue
});
const letter = new Text({
"ax": 25,
"ay": 25,
"textstyle": {
"font": "bold 50px Arial",
"color": KnownColors.Blue,
"outline": {
"color": KnownColors.Orange,
"width": 2
}
},
"text": "O"
});
return new Plot({
"canvaselement": canvas,
"root": new Group().addChild([anArc, arc, letter])
});
}
export { createScene, printToPdf };
createScene(document.querySelector('[ref="plot"]'));
# Export to PDF (Visible Limits)
The following tutorial shows how to export the HTML canvas of an Annotated Widget to a PDF using a Cross Plot as an example Widget. ExportToPDF can be used to aggregate different widgets on one page. For more information on exporting please visit the Export to PDF tutorial in the WellLog section. It also demonstrates how to export the widget along with Reports.
Exporting the visible limits of the model will only print what is visible on the canvas to a PDF. Zooming in before exporting would only print the zoomed portion of the canvas.
import { ScalingOptions } from "@int/geotoolkit/scene/exports/ScalingOptions.ts";
import { loadFont } from "@int/geotoolkit/util/fontloader.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { PdfExport } from "@int/geotoolkit/pdf/PdfExport.ts";
import { createWidget } from "/src/code/Carnac/Export/common.ts";
function printToPdf(plot, errorObj) {
if (!PdfExport.isSupported()) {
errorObj.show = true;
errorObj.text = "Web Browser Does not support pdf export.";
return;
}
const widget = plot.getRoot();
const options = {
"printsettings": {
"scaling": ScalingOptions.FitWidth
},
"modellimits": widget.getModel().getVisibleModelLimits()
};
widget.exportToPdf(options);
}
function createScene(canvas) {
const widget = createWidget(true);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
loadFont("src/assets/fonts", "roboto").then(() => {
plot.update();
});
return plot;
}
export { createScene, printToPdf };
createScene(document.querySelector('[ref="plot"]'));
Close
# Export to PDF (Virtual Limits)
Exporting to a PDF with virtual model limits will print the canvas in its entirety, regardless of the zoom state. Using virtual limits is similar to clicking on the "Fit to Bounds" icon before printing to the PDF.
import { ScalingOptions } from "@int/geotoolkit/scene/exports/ScalingOptions.ts";
import { loadFont } from "@int/geotoolkit/util/fontloader.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { PdfExport } from "@int/geotoolkit/pdf/PdfExport.ts";
import { createWidget } from "/src/code/Carnac/Export/common.ts";
function printToPdf(plot, errorObj) {
if (!PdfExport.isSupported()) {
errorObj.show = true;
errorObj.text = "Web Browser Does not support pdf export.";
return;
}
const widget = plot.getRoot();
const options = {
"printsettings": {
"scaling": ScalingOptions.FitWidth
},
"modellimits": widget.getModel().getModelLimits()
};
widget.exportToPdf(options);
}
function createScene(canvas) {
const widget = createWidget(true);
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
loadFont("src/assets/fonts", "roboto").then(() => {
plot.update();
});
return plot;
}
export { createScene, printToPdf };
createScene(document.querySelector('[ref="plot"]'));
Close
# Export to PDF with Local Language
This Localization example exports the whole limits of the widget to PDF and uses a custom font to show the local language as the title of the axes. True type fonts can be embedded into the PDF document for correct display on all viewing devices. The example below uses a Russian embedded font. To use another font, convert the font to base64 format. Please note that some fonts may not support certain languages.
import { HttpClient } from "@int/geotoolkit/http/HttpClient.ts";
import { FontSubType } from "@int/geotoolkit/pdf/FontSubType.ts";
import { ScalingOptions } from "@int/geotoolkit/scene/exports/ScalingOptions.ts";
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { PdfExport } from "@int/geotoolkit/pdf/PdfExport.ts";
import { createWidget } from "/src/code/Carnac/Export/common.ts";
function printToPdf(plot, errorObj) {
if (!PdfExport.isSupported()) {
errorObj.show = true;
errorObj.text = "Web Browser Does not support pdf export.";
return;
}
const widget = plot.getRoot();
HttpClient.getInstance().getHttp().get("./src/assets/fonts/roboto.ttf", { "responsetype": "arraybuffer" }).then((sources) => {
const b64 = Buffer.from(sources.data).toString("base64");
const options = {
"printsettings": { "scaling": ScalingOptions.FitWidth },
"modellimits": widget.getModel().getVisibleModelLimits(),
"embededfonts": [{
subType: FontSubType.TrueType,
fontName: "roboto",
fontWeight: "normal",
fontStyle: "normal",
fontBase64EncodedFile: b64,
encoding: "Identity-H"
}]
};
widget.exportToPdf(options);
});
}
function createScene(canvas) {
const widget = createWidget(false);
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene, printToPdf };
createScene(document.querySelector('[ref="plot"]'));
Close