DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Vue Data Grid - Overview

The DataGrid allows you to export its contents to a PDF document.

To enable PDF export operations, import the jsPDF library and set the export.enabled property to true.

Call the exportDataGrid(options) method that belongs to the pdfExporter module. Specify at least two required properties:

To review implementation details, see the exportDataGrid(options) method call in onExporting handler. You can also set allowExportSelectedData to true to export only selected rows.

Backend API
<template> <div> <DxDataGrid :allow-column-reordering="true" :data-source="customers" key-expr="ID" :show-borders="true" @exporting="onExporting" > <DxColumn data-field="CompanyName"/> <DxColumn data-field="Phone"/> <DxColumn data-field="Fax"/> <DxColumn data-field="City"/> <DxColumn :group-index="0" data-field="State" /> <DxGrouping :auto-expand-all="true"/> <DxPaging :page-size="10"/> <DxSelection mode="multiple"/> <DxExport :enabled="true" :formats="['pdf']" :allow-export-selected-data="true" /> </DxDataGrid> </div> </template> <script setup lang="ts"> import { DxDataGrid, DxColumn, DxGrouping, DxExport, DxSelection, DxPaging, DxDataGridTypes, } from 'devextreme-vue/data-grid'; import { jsPDF } from 'jspdf'; import { exportDataGrid } from 'devextreme/pdf_exporter'; import { customers } from './data.ts'; const onExporting = (e: DxDataGridTypes.ExportingEvent) => { // eslint-disable-next-line new-cap const doc = new jsPDF(); exportDataGrid({ jsPDFDocument: doc, component: e.component, indent: 5, }).then(() => { doc.save('Companies.pdf'); }); }; </script>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'fflate': 'npm:fflate@0.4.8/esm/browser.js', 'jspdf': 'npm:jspdf@2.5.1/dist/jspdf.umd.min.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-vue': 'npm:devextreme-vue@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
export type Customer = { ID: number; CompanyName: string; Address: string; City: string; State: string; Zipcode: number; Phone: string; Fax: string; }; export const customers: Customer[] = [{ ID: 1, CompanyName: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '(612) 291-1000', Fax: '(612) 291-2001', }, { ID: 2, CompanyName: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '(630) 438-7800', Fax: '(630) 438-7801', }, { ID: 3, CompanyName: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '(214) 854-3000', Fax: '(214) 854-3001', }, { ID: 4, CompanyName: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '(800) 445-6937', Fax: '(800) 445-6938', }, { ID: 5, CompanyName: 'Braeburn', Address: '1 Infinite Loop', City: 'Cupertino', State: 'California', Zipcode: 95014, Phone: '(408) 996-1010', Fax: '(408) 996-1012', }, { ID: 6, CompanyName: 'PriceCo', Address: '30 Hunter Lane', City: 'Camp Hill', State: 'Pennsylvania', Zipcode: 17011, Phone: '(717) 761-2633', Fax: '(717) 761-2334', }, { ID: 7, CompanyName: 'Ultimate Gadget', Address: '1557 Watson Blvd', City: 'Warner Robbins', State: 'Georgia', Zipcode: 31093, Phone: '(995) 623-6785', Fax: '(995) 623-6786', }, { ID: 8, CompanyName: 'EZ Stop', Address: '618 Michillinda Ave.', City: 'Arcadia', State: 'California', Zipcode: 91007, Phone: '(626) 265-8632', Fax: '(626) 265-8633', }, { ID: 9, CompanyName: 'Clicker', Address: '1100 W. Artesia Blvd.', City: 'Compton', State: 'California', Zipcode: 90220, Phone: '(310) 884-9000', Fax: '(310) 884-9001', }, { ID: 10, CompanyName: 'Store of America', Address: '2401 Utah Ave. South', City: 'Seattle', State: 'Washington', Zipcode: 98134, Phone: '(206) 447-1575', Fax: '(206) 447-1576', }, { ID: 11, CompanyName: 'Zone Toys', Address: '1945 S Cienega Boulevard', City: 'Los Angeles', State: 'California', Zipcode: 90034, Phone: '(310) 237-5642', Fax: '(310) 237-5643', }, { ID: 12, CompanyName: 'ACME', Address: '2525 E El Segundo Blvd', City: 'El Segundo', State: 'California', Zipcode: 90245, Phone: '(310) 536-0611', Fax: '(310) 536-0612', }, { ID: 13, CompanyName: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '(800) 555-2797', Fax: '(800) 555-2171', }, { ID: 14, CompanyName: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '(800) 595-3232', Fax: '(800) 595-3231', }, { ID: 15, CompanyName: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '(612) 304-6073', Fax: '(612) 304-6074', }, { ID: 16, CompanyName: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '(800) 955-2292', Fax: '(800) 955-2293', }, { ID: 17, CompanyName: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '(847) 286-2500', Fax: '(847) 286-2501', }, { ID: 18, CompanyName: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '(847) 940-2500', Fax: '(847) 940-2501', }, { ID: 19, CompanyName: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '(817) 820-0741', Fax: '(817) 820-0742', }, { ID: 20, CompanyName: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '(800) 955-2929', Fax: '(800) 955-9392', }];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
NOTE

Need to create printable documents simply? Try our .NET-based DevExpress Reports: they ship with an intuitive Visual Studio Report Designer, Web Report Designer for end-user ad-hoc reporting, and a rich set of report controls, including cross tabs and charts.

You can generate a variety of report types — from simple mail-merge, table, and vertical reports to master-detail (hierarchical) and cross-tab reports, print or export them to PDF, Excel, and other formats.

Develop using VS Code? Leverage the capabilities of a brand new VS Code Report Designer extension to create and edit reports/documents on any platform, be it Windows, macOS, or Linux.

Get Started with DevExpress Reports | Explore Demos