Vue Common - Object Structures - PdfCell - font

<template>
    <div>
        <DxButton ...
            @click="exportGrid()"
        />
 
        <DxDataGrid ...
            :ref="dataGridRef">
            <!-- ... -->
        </DxDataGrid>
    </div>
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import DxDataGrid from 'devextreme-vue/data-grid';
import DxButton from 'devextreme-vue/button';
import { jsPDF } from 'jspdf';
import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
 
const dataGridRef = 'dataGrid';
 
export default {
    components: {
        DxDataGrid,
        DxButton
    },
    data() {
        return {
            dataGridRef
        };
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRef].instance;
        }
    },
    methods: {
        exportGrid() {
            const doc = new jsPDF();
            exportDataGridToPdf({
                jsPDFDocument: doc,
                component: this.dataGrid,
                customizeCell: function(options) {
                    const { gridCell, pdfCell } = options;
 
                    if(gridCell.rowType === 'data') {
                        pdfCell.font = { size: 20, style: 'bold', name: 'Arial' };
                    }
                }
            }).then(() => {
                doc.save('Customers.pdf');
            });
        }
    }
}
</script>