syncfusion / flutter-examples

This repository contains the Syncfusion Flutter UI widgets examples and the guide to use them.
Other
1.98k stars 775 forks source link

ttf font problem while saving pdf. #385

Closed feemagdev closed 3 years ago

feemagdev commented 3 years ago

I am using urdu font as ttf. The problem is when i save the pdf and open it. it shows urdu words in characters. final dir = await getApplicationDocumentsDirectory(); print(dir.path); final PdfDocument document = PdfDocument(); final Uint8List fontData = File('${dir.path}\Jameel-Noori-Nastaleeq-Kasheeda.ttf') .readAsBytesSync(); final PdfFont font = PdfTrueTypeFont(fontData, 12); final PdfPage page = document.pages.add();

final PdfGrid grid = PdfGrid();
grid.columns.add(count: 4);
final PdfGridRow headerRow = grid.headers.add(1)[0];
headerRow.style = PdfGridRowStyle(font: font);
headerRow.cells[0].value = 'تاريخ';
headerRow.cells[1].value = 'چکر';
headerRow.cells[2].value = 'بلاک';
headerRow.cells[3].value = 'نمکين';
PdfGridRow row = grid.rows.add();
row.style = PdfGridRowStyle(font: font);
row.cells[0].value = 'مئی';
row.cells[1].value = '5';
row.cells[2].value = '3';
row.cells[3].value = 'جمع';

// Add next row. row = grid.rows.add(); row.style = PdfGridRowStyle(font: font); row.cells[0].value = 'جون'; row.cells[1].value = 'پٹت'; row.cells[2].value = '59'; row.cells[3].value = 'نام'; grid.style.cellPadding = PdfPaddings(left: 5, top: 5); grid.draw( page: page, bounds: Rect.fromLTWH( 0, 0, page.getClientSize().width, page.getClientSize().height));

String name = 'faheem.pdf';
final file = File('${dir.path}/$name');
file.writeAsBytes(document.save());
final url = file.path;
OpenFile.open(url);

this is my code.

Anand3595 commented 3 years ago

Hi Faheem Riaz,

Thanks for contacting Syncfusion support.

Currently we do not have support to draw complex script language texts. Urdu is the complex script language (i.e., combination of characters are considered as a single character). We have logged the feature for “Complex script text drawing support in Flutter PDF” and added to our feature request list. We will implement this feature in any of our upcoming release.

You can track the feature status using the feedback from https://www.syncfusion.com/feedback/20541/complex-script-text-drawing-support-in-flutter-pdf.

However, we suggest you to use ’arial-unicode-ms.ttf’ font to preserve the RTL text. Because Arial Unicode MS font supports most of the complex script languages without applying the ligature feature. And we have PdfGridCell.style.stringFormat property to set text direction and alignment to draw RTL text in PDF document. Please find the code example below,

final PdfDocument document = PdfDocument();
final PdfPage page = document.pages.add();
//Create font and string format
final File file = File('arial-unicode-ms.ttf');
final PdfFont font = PdfTrueTypeFont(file.readAsBytesSync(), 12);
final PdfStringFormat format = PdfStringFormat(
    alignment: PdfTextAlignment.right,
    textDirection: PdfTextDirection.rightToLeft);
//Create PDF grid cell style to set font and string format
final PdfGridCellStyle cellStyle =
    PdfGridCellStyle(format: format, font: font);

//Create a new PDF grid
final PdfGrid grid = PdfGrid();
//Add columns
grid.columns.add(count: 4);
//Add header and set values
final PdfGridRow headerRow = grid.headers.add(1)[0];
headerRow.cells[0].value = 'تاريخ';
headerRow.cells[1].value = 'چکر';
headerRow.cells[2].value = 'بلاک';
headerRow.cells[3].value = 'نمکين';
//Add row and set values
PdfGridRow row = grid.rows.add();
row.cells[0].value = 'مئی';
row.cells[1].value = '5';
row.cells[2].value = '3';
row.cells[3].value = 'جمع';
// Add next row.
row = grid.rows.add();
row.cells[0].value = 'جون';
row.cells[1].value = 'پٹت';
row.cells[2].value = '59';
row.cells[3].value = 'نام';
//Set cell padding
grid.style.cellPadding = PdfPaddings(left: 5, top: 5);

//Set cell style for each cells in PDF grid
for (int i = 0; i < grid.headers.count; i++) {
  final PdfGridRow header = grid.headers[i];
  for (int j = 0; j < header.cells.count; j++) {
    header.cells[j].style = cellStyle;
  }
}
for (int i = 0; i < grid.rows.count; i++) {
  final PdfGridRow row = grid.rows[i];
  for (int j = 0; j < row.cells.count; j++) {
    row.cells[j].style = cellStyle;
  }
}

//Draw grid
grid.draw(
    page: page,
    bounds: Rect.fromLTWH(
        0, 0, page.getClientSize().width, page.getClientSize().height));
//Save PDF document
final List<int> bytes = document.save();

Please find the sample from https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf_sample-373609208

With Regards, Anand Panchamoorthi

feemagdev commented 3 years ago

Thanks alot for commenting. your code helped alot. it fulfil my need. now i want to know something more. i want to know how i can add some text after table. let say i have a page. i created a table and it expands to second page automatically. i want to add now some text after that table end. how i do that. Thanks.

feemagdev commented 3 years ago

also i want header on second page of table expands to second page. Thanks

Anand3595 commented 3 years ago

Hi Faheem Riaz,

We can get PdfLayoutResult from PdfGrid.draw() method and we can maintain the bounds of the grid on last page of it’s pagination. We can draw text, image or other graphics contents as flow layout based on the result. And we suggest you to enable PdfGrid.repeatHeader property to add grid header in all pages. Please find the sample code to draw text after the grid drawn as a flow layout,

//Create a PDF document
final PdfDocument document = PdfDocument();
//Add a new page
final PdfPage page = document.pages.add();

//Create a new PDF grid
final PdfGrid grid = PdfGrid();

//Enable repeat header to add header row in all pages in grid pagination
grid.repeatHeader = true;

//Add columns
grid.columns.add(count: 3);
//Add header and set header values
grid.headers.add(1);
PdfGridRow header = grid.headers[0];
header.cells[0].value = 'ID';
header.cells[1].value = 'Name';
header.cells[2].value = 'Salary';
//Add rows and set values
for (int i = 0; i < 20; i++) {
  PdfGridRow row1 = grid.rows.add();
  row1.cells[0].value = 'E_' + ((i * 3) + 1).toString();
  row1.cells[1].value = 'Clay';
  row1.cells[2].value = '\$10,000';
  PdfGridRow row2 = grid.rows.add();
  row2.cells[0].value = 'E_' + ((i * 3) + 2).toString();
  row2.cells[1].value = 'Thomas';
  row2.cells[2].value = '\$10,500';
  PdfGridRow row3 = grid.rows.add();
  row3.cells[0].value = 'E_' + ((i * 3) + 3).toString();
  row3.cells[1].value = 'Simon';
  row3.cells[2].value = '\$12,000';
}
//Draw grid and get layout result
PdfLayoutResult layoutResult = grid.draw(
    page: page,
    bounds: Rect.fromLTWH(
        0, 0, page.getClientSize().width, page.getClientSize().height));

//Load the paragraph text into PdfTextElement with standard font
PdfTextElement textElement = PdfTextElement(
    text: 'Top 5 sales stores',
    font: PdfStandardFont(PdfFontFamily.helvetica, 14,
        style: PdfFontStyle.bold));

//Draw the paragraph text on page and maintain the position in PdfLayoutResult
layoutResult = textElement.draw(
    page: layoutResult.page,
    bounds: Rect.fromLTWH(0, layoutResult.bounds.bottom + 10,
        page.getClientSize().width, 100));

//Assign header text to PdfTextElement
textElement.text =
    'Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base.';

//Assign standard font to PdfTextElement
textElement.font = PdfStandardFont(PdfFontFamily.helvetica, 12);

//Draw the header text on page, below the paragraph text with a height gap of 20 and maintain the position in PdfLayoutResult
layoutResult = textElement.draw(
    page: layoutResult.page,
    bounds: Rect.fromLTWH(0, layoutResult.bounds.bottom + 20,
        page.getClientSize().width, 100));

//Save and open PDF document
List<int> bytes = document.save();

Please fin the sample from https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf_sample-1730603446.

You can find more details about to draw graphic contents in PDF document with flow model by maintaining the position of previously drawn element from https://help.syncfusion.com/flutter/pdf/working-with-flow-layout.

Please let us know if you need any further assistance in this.

With Regards, Anand Panchamoorthi