Sử dụng phông chữ tùy chỉnh trong báo cáo JavaScript

Phông chữ đóng vai trò lớn trong việc thể hiện trực quan các ứng dụng JavaScript và báo cáo dựa trên web. Theo mặc định, JavaScript cho phép nhà phát triển tùy chỉnh những thứ như kích thước, trọng lượng và kiểu phông chữ và thậm chí bao gồm các loại phông chữ tùy chỉnh. Khả năng các nhà phát triển làm việc và tùy chỉnh phông chữ cho phép họ nâng cao cả tính thẩm mỹ lẫn khả năng đọc thông tin mà họ đang trình bày.

Để phù hợp với tính linh hoạt của JavaScript, ActiveReportsJS cho phép người dùng tùy chỉnh nhiều văn bản trong báo cáo. Trong bài viết này, chúng tôi sẽ tập trung vào cách bạn có thể tận dụng khả năng tùy chỉnh phông chữ của ActiveReportsJS Designer, bao gồm các chủ đề sau:

• Khái niệm cơ bản về phông chữ

• Định cấu hình Ứng dụng Trình thiết kế Độc lập

• Định cấu hình các ứng dụng dựa trên ActiveReportsJS

• Định cấu hình Thành phần Trình thiết kế Báo cáo

  
  

Khái niệm cơ bản về phông chữ

Tất cả các thành phần ActiveReportsJS hoạt động trong môi trường trình duyệt web:

• Trình thiết kế báo cáo độc lập được xây dựng bằng Electron , sử dụng Chrome để hiển thị giao diện người dùng.

• Các thành phần Trình thiết kế và Trình xem báo cáo JavaScript là một phần của ứng dụng web chạy trong trình duyệt trên máy của người dùng.

• Bộ lọc Xuất PDF, Dữ liệu dạng bảng và HTML sử dụng môi trường trình duyệt web để đo lường nội dung báo cáo.

  
  

Một báo cáo điển hình bao gồm nội dung văn bản mà trình duyệt hiển thị bằng cách sử dụng các hình dạng được gọi là glyphs. Tài nguyên phông chữ chứa thông tin ánh xạ mã ký tự thành glyphs đại diện cho các ký tự này. Vì vậy, trình duyệt cần truy cập vào tài nguyên phông chữ để hiển thị văn bản như mong đợi.

Tất cả nội dung văn bản trong ActiveReportsJS có một số thuộc tính phông chữ, bao gồm:

• Họ phông chữ : ID phông chữ, tức là Arial, Calabri hoặc Times New Roman.
• Kiểu chữ : Bình thường hoặc in nghiêng.
• Độ dày phông chữ : Mỏng, Cực nhẹ, Bình thường, Trung bình, Nửa đậm, Đậm, Cực đậm, Nặng.

Sự kết hợp độc đáo của ba thuộc tính này được gọi là Font Face . Một họ phông chữ thường bao gồm một số mặt phông chữ, được biểu thị (thông thường) bằng một số tệp.

Ví dụ: họ phông chữ Calibri có sáu kiểu phông chữ khác nhau:

Khi ActiveReportsJS hiển thị một báo cáo, nó sẽ dịch các thuộc tính phông chữ này thành các thuộc tính kiểu CSS font-family, font-style và font-weight. Nó dựa vào trình duyệt để phân giải các tài nguyên phông chữ liên quan và trích xuất các glyph cần thiết. Trình duyệt có hai cách để truy cập tài nguyên phông chữ; cục bộ, trên hệ thống mà trình duyệt chạy hoặc bằng cách tải xuống.

Tài nguyên phông chữ có thể tải xuống rất dễ bảo trì; tất cả các trình duyệt hiện đại đều hỗ trợ chúng và nó đảm bảo đầu ra nội dung văn bản nhất quán trên tất cả các môi trường. Ngoài ra, ActiveReportsJS PDF Xuất yêu cầu các phông chữ có thể tải xuống vì nó nhúng các tập hợp con của chúng vào tài liệu PDF. Do đó, cách tốt nhất để đảm bảo đầu ra báo cáo nhất quán trên tất cả các môi trường là định cấu hình các thành phần ActiveReportsJS để truy cập tài nguyên phông chữ có thể tải xuống.

Trước khi bắt đầu, chúng ta cần quyết định xem mình muốn sử dụng họ phông chữ nào cho báo cáo của mình. Đó có thể là những phông chữ tiêu chuẩn như Arial, Times New Roman hoặc Helvetica. Hoặc, nó có thể là bất kỳ số lượng phông chữ web nào. Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng phông chữ Montserrat; đây chính là phông chữ mà chúng tôi sử dụng cho các báo cáo demo của mình.

Trong mọi trường hợp, hãy đảm bảo bạn có tất cả các tệp phông chữ cho tất cả họ phông chữ bạn định sử dụng. ActiveReportsJS hỗ trợ các định dạng phông chữ sau:

Định cấu hình Trình thiết kế báo cáo độc lập

Để thêm họ phông chữ vào trình thiết kế độc lập, trước tiên bạn cần điều hướng đến thư mục chứa tệp cấu hình phông chữ ActiveReportsJS. Đây là những vị trí sau, dựa trên hệ điều hành của bạn:

• Windows : %AppData%\ActiveReportsJS Designer\fontsConfig.json

• macOS : ~/Thư viện/Hỗ trợ ứng dụng/ActiveReportsJS Designer/fontsConfig.json

• Linux : ~/.config/ActivereportsJS Designer/fontsConfig.json

  
  

Tại vị trí này, tạo một thư mục có tên Phông chữ và sao chép tất cả các tệp cho tất cả các kiểu phông chữ mà bạn định sử dụng vào thư mục này.

Sau đó, mở tệp FontConfig.json trong trình soạn thảo văn bản bạn chọn. Tệp này chứa các mô tả về chủng loại phông chữ mà tác giả báo cáo sẽ sử dụng cho nội dung văn bản. Trong thuộc tính đường dẫn , chỉ định đường dẫn tuyệt đối đến thư mục mẹ của thư mục Phông chữ . Thay thế các mục mặc định của mảng mô tả bằng các mô tả của các mặt phông chữ mong muốn.

Mỗi bộ mô tả bao gồm các thuộc tính sau:

Ví dụ: để cho phép các mặt Thông thường, Nghiêng và Đậm của phông chữ Montserrat , bạn sẽ sử dụng các mô tả sau:

 { "name": "Montserrat", "weight": "400", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Regular.ttf" }, { "name": "Montserrat", "weight": "400", "style": "italic", "source": "Fonts/Montserrat/Montserrat-Italic.ttf" }, { "name": "Montserrat", "weight": "700", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Bold.ttf" }

Chạy ứng dụng công cụ thiết kế độc lập, thêm TextBox vào nội dung báo cáo và đảm bảo rằng bạn có thể đặt thuộc tính Font Family của nó thành một trong các phông chữ mà bạn đã liệt kê trong tệp FontConfig.json và tất cả các mặt phông chữ đều được hiển thị chính xác.

Định cấu hình các ứng dụng dựa trên ActiveReportsJS

Ứng dụng hiển thị báo cáo trong trình xem báo cáo JavaScript, xuất báo cáo sang tệp PDF hoặc lưu trữ thành phần công cụ thiết kế báo cáo phải sử dụng cùng cấu hình mà bạn đã tạo cho ứng dụng công cụ thiết kế độc lập. Cách dễ nhất để đạt được điều đó là sao chép thư mục Phông chữ và tệp FontConfig.json vào thư mục nội dung tĩnh của ứng dụng của bạn.

Thư mục này khác nhau tùy theo các khung giao diện người dùng khác nhau. Dưới đây là một vài ví dụ:

• Angular : Sử dụng cấu hình tài sản; nếu thư mục Phông chữ và tệp phông chữConfig.json được sao chép vào thư mục nội dung, hãy sửa đổi thuộc tính nguồn của bộ mô tả phông chữ trong tệp phông chữConfig.json để chúng bắt đầu bằng nội dung. Ví dụ:

  { "name": "Montserrat", "weight": "900", "style": "italic", "source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" }

• React : Sử dụng thư mục chung cho các ứng dụng được tạo bằng ứng dụng tạo phản ứng.

• Vue : Sử dụng xử lý tài sản tĩnh.

  
  

Cuối cùng, ứng dụng sẽ gọi phương thức registerFonts của đối tượng FontStore bằng URL của tệp FontConfig . Mã này sẽ chạy trước khi ứng dụng bắt đầu hiển thị hoặc xuất báo cáo. Lưu ý rằng phương thức registerFonts không đồng bộ và trả về một đối tượng Promise .

Mã gọi phương thức này cũng có thể đợi cho đến khi Promise trả về này được giải quyết trước khi tải báo cáo vào thành phần trình xem hoặc xuất chúng.

Đối với các ứng dụng JavaScript thuần túy, mã sẽ trông như thế này:

 <script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-core.js"></script> <script> GC.ActiveReports.Core.FontStore.registerFonts( "/resources/fontsConfig.json" // replace the URL with the actual one ) </script>

Đối với các ứng dụng Angular , React và Vue:

 import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one

Bạn có thể tìm thấy các ví dụ về mã này trong các bản demo trực tiếp của chúng tôi.

Định cấu hình Thành phần Trình thiết kế Báo cáo

Cuối cùng, để đảm bảo rằng thành phần thiết kế báo cáo chỉ hiển thị các phông chữ đã đăng ký, hãy đặt thuộc tính fontSet của phiên bản trình thiết kế thành đã đăng ký.

Ngoài ra, nếu bạn muốn đảm bảo rằng các mục báo cáo mới được thêm vào có một trong các phông chữ đã đăng ký theo mặc định, bạn có thể sử dụng tính năng Mẫu ban đầu tùy chỉnh .

Phần kết luận

Và với điều đó, chúng ta đã đi đến cuối bài viết. Như chúng ta đã thảo luận, phông chữ là một cách hiệu quả để các nhà phát triển nâng cao tính thẩm mỹ và khả năng đọc. Trong bài viết này, chúng tôi đã cho thấy việc kết hợp phông chữ tùy chỉnh vào báo cáo của bạn dễ dàng như thế nào thông qua Trình thiết kế và xem báo cáo ActiveReportsJS.

Chúc mừng mã hóa!