DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExtreme v22.1正式版下載

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論

導(dǎo)出為PDF

要啟用Data Grid的PDF導(dǎo)出選項(xiàng)，請(qǐng)導(dǎo)入庫。在組件中，設(shè)置export.屬性為true然后指定導(dǎo)出格式。接下來的操作顯示DataGrid中的Export按鈕，單擊此按鈕時(shí)，將觸發(fā)函數(shù)（其中開發(fā)者應(yīng)該調(diào)用pdfExporter.方法）。

<dx-data-grid ...
(onExporting)="onExporting($event)"
>
<dxo-export
[enabled]="true"
[formats]="['pdf']"
></dxo-export>
</dx-data-grid>

import { Component } from '@angular/core';
import { exportDataGrid } from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';

// ...

export class AppComponent {
onExporting(e) {
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: e.component,
}).then(() => {
doc.save('DataGrid.pdf');
});
}
}

單元格自定義

開發(fā)人員可以自定義單元格內(nèi)容并在PDF文檔中繪制自定義單元格。

函數(shù)允許開發(fā)者為導(dǎo)出的PDF文檔自定義單個(gè)DataGrid單元格的外觀(例如，可以更改單元格使用的字體樣式)。

onExporting(e) {
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: e.component,
customizeCell({ gridCell, pdfCell }) {
//...
}
}).then(() => {
doc.save('DataGrid.pdf');
});
}

如果希望在繪制單元格時(shí)覆蓋默認(rèn)繪制邏輯并應(yīng)用自己的繪制邏輯，請(qǐng)使用函數(shù)。在下面的例子中，這個(gè)函數(shù)在PDF文檔中為" Website "列繪制并自定義一個(gè)單元格：

onExporting(e) {
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: e.component,
customDrawCell({ gridCell, pdfCell }) {
//...
}
}).then(() => {
doc.save('DataGrid.pdf');
});
}

頁眉和頁腳

開發(fā)人員可以輕松地向?qū)С龅腄ataGrid添加頁眉和頁腳。

DataGrid組件位于PdfExportDataGridProps中指定點(diǎn)的PdfExportDataGridProps. 屬性的頁眉之前。

對(duì)于頁腳位置，使用函數(shù)，這個(gè)函數(shù)允許開發(fā)者計(jì)算組件最右邊單元格的坐標(biāo)。

導(dǎo)出圖片

庫API還允許將自定義內(nèi)容導(dǎo)出為PDF(如圖像)，對(duì)于圖像導(dǎo)出，可以調(diào)用方法，然后處理事件為導(dǎo)出的DataGrid定制行。

onExporting(e) {
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: e.component,
onRowExporting: (e) => {
// Customize rows
},
customDrawCell: (e) => {
// Detect picture cell
doc.addImage(e.gridCell.value, 'PNG', e.rect.x, e.rect.y, e.rect.w, e.rect.h);
e.cancel = true;
}
}).then(() => {
doc.save('DataGrid.pdf');
});
}

導(dǎo)出多個(gè)網(wǎng)格

要將多個(gè)DataGrid組件導(dǎo)出到一個(gè)文件中，并在PDF文檔的不同頁面上排列它們，請(qǐng)?jiān)赑romises鏈中使用pdfExporter.方法。

exportGrids() {
const doc = new jsPDF();
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: gridOneInstance,
}).then(() => {
doc.addPage();
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: gridTwoInstance,
}).then(() => {
doc.save('MultipleGrids.pdf');
});
});
}