翻譯|行業(yè)資訊|編輯:龔雪|2022-12-01 10:46:30.963|閱讀 200 次
概述:本文主要介紹DevExtreme控件的DataGrid & TreeList組件的新功能,歡迎下載最新版控件體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
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ù)編輯器等。
DevExpress技術(shù)交流群6:600715373 歡迎一起進(jìn)群討論
要啟用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'); }); }); }
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)