AngularJS로 실시간 신호 대시 보드를 구축하십시오-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

AngularJS로 실시간 신호 대시 보드를 구축하십시오

William Shakespeare

Feb 20, 2025 pm 12:45 PM

실시간 서비스 모니터링 패널을 구축하십시오!

서비스 모니터링 패널에는 실제 데이터가 실시간으로 표시됩니다. 서버 및 마이크로 서비스에서 거의 실시간, 비동기식, 비 블로킹 방식으로 무슨 일이 일어나고 있는지 보여줍니다.

전체 클라이언트 예를 보려면 여기를 클릭하십시오. Build a Real-time SignalR Dashboard with AngularJS d3.js를 사용하여 데이터를 시각화하고 자바 스크립트로 데이터를 설명하십시오! 이 과정을 시청하는이 과정을 시청하십시오.이 과정은 여기서 서버 데모를 보여줍니다.

우리는 AngularJS 프레임 워크와 많은 멋진 실시간 차트와 많은 실시간 데이터를 사용 하여이 모니터링 패널의 단순화 된 버전을 구축 할 것입니다. 또한 .NET 4.5의 Signalr 및 Web API 라이브러리를 사용하여 서비스를 구축 할 것입니다.

키 포인트

angularjs 및 signalr을 사용하여 서버 및 마이크로 서비스 활동을 비동기 및 비 블로킹하는 실시간 모니터링 패널을 만듭니다.

angularjs, jquery, bootstrap, signalr 및 d3.js 및 epoch와 같은 다양한 차트 라이브러리를 포함한 종속성을 갖춘 일반 텍스트 파일 또는 비주얼 스튜디오로 프로젝트를 설정하십시오.

실시간 데이터 전송을 관리하기 위해 서버 측에서 Signalr Center를 구현하고, .NET의 비동기 요청을 처리하고 클라이언트에 대한 알림을 푸시하는 능력을 활용합니다. 신호 센터에서받은 데이터를 처리하기 위해 AngularJS 서비스 및 컨트롤러를 개발하고 서버 성능 메트릭의 변경 사항을 반영하기 위해 UI를 실시간으로 업데이트하십시오.

NG-EPOCH 및 N3-PIE와 같은 다이어그램 솔루션을 시각적으로 표현하여 모니터링 패널의 상호 작용 및 사용자 참여를 향상시킵니다.

클라이언트 Angularjs는 상자 밖에서 좋은 응용 프로그램 개발 관행을 시행합니다. 모든 것이 주입되므로 의존성이 커플 링이 낮다는 것을 의미합니다. 또한 Angular는보기, 모델 및 컨트롤러간에 분리됩니다.

Angular는 여기에 .NET을 추가하여 서버 측 코드를 컴팩트하고 관리 가능하며 테스트 할 수 있도록합니다. 서버 측 코드는 무거운 처리를 수행하기 위해 장점을 활용하는 데 사용됩니다.

서버 측 .NET 4.5의 Web API와 함께 SignalR을 사용하는 것은 socket.io와 함께 node.js를 사용하는 것과 매우 유사하며 서버에서 구독 클라이언트로 동일한 유형의 비 블로킹, 비동기 푸시를 허용합니다. Signalr은 하단에 websockets를 사용하지만 통신을 추상화하기 때문에 각도 내부에서 실행될 때 클라이언트 브라우저에서 지원하는 모든 기술로 돌아갑니다. (예를 들어, 이전 브라우저의 경우 긴 폴링으로 돌아갈 수 있습니다.)
또한 Dynamic Tags와 JSON.NET의 마술과 함께 .NET Framework는 JavaScript를 일류 시민으로 간주합니다. 실제로 JavaScript를 염두에두고 구축되기 때문에 JavaScript를 통해 Web API 및 SignalR 기술을 사용하는 것이 일반적으로 JavaScript를 염두에두기 때문에 쉽습니다.

코어 컨텐츠 설정 시작 이 튜토리얼에 사용 된 모든 AngularJS 코드는 여기에서 찾을 수 있습니다.
프로젝트를 만드는 도구에 따라 좋아하는 텍스트 편집기 및 일반 폴더뿐만 아니라 Visual Studio를 사용하여 작성하는 방법을 다룰 것입니다.
일반 텍스트 파일로 설정하십시오 폴더 및 파일 구조는 다음과 같습니다
주요 종속성 다음 파일을 다운로드해야합니다
jQuery (링크 선택 "압축 프로덕션 jQuery 2.1.1"다운로드) Angularjs (큰 "다운로드"옵션을 클릭하고 최신 버전의 Angular 1.3) 를 클릭하십시오. 부트 스트랩 ( "부트 스트랩 다운로드"옵션을 클릭하십시오) Signalr (오른쪽의 "zip 다운로드"버튼을 클릭) d3.js (페이지 중간에있는 "d3.zip"링크를 클릭) epoch ( "V0.6.0 링크 다운로드") 를 클릭하십시오 ng-epoch (오른쪽의 "zip 다운로드"버튼을 클릭)
n3-pie (오른쪽의 "zip 다운로드"버튼을 클릭)

<code>root app (Angular应用程序特定的JavaScript) Content (CSS等) Scripts (引用的JavaScript等) ... index.html</code>
스크립트 폴더에서는 다음과 같습니다
jQuery-2.1.1.min.js
angular.min.js bootstrap.min.js <.> jQuery.signalr.min.js d3.min.js epoch.min.js pie-chart.min.js
콘텐츠 폴더에서
bootstrap.min.css
epoch.min.css

Visual Studio를 사용한 설정 텍스트 파일이 너무 간단하다고 생각되면 Visual Studio를 통해 설정하기가 매우 쉽습니다.
단순히 파일로 이동하여 빈 웹 응용 프로그램을 설정합니다. & gt;

그런 다음 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Nuget 패키지 관리로 이동하여 jQuery, AngularJS, Bootstrap, D3 및 Signalr JavaScript 클라이언트를 검색하고 다운로드하십시오.
이를 다운로드하고 설치 한 후 스크립트 및 내용 폴더에 표시됩니다. 또한 설치된 Nuget 패키지 아래에 다음이 표시됩니다.
마지막으로 Nuget에는 Epoch, NG-Epoch 및 N3 차트 라이브러리가 포함되어 있지 않으므로 수동으로 추가해야합니다. 이전 섹션에 자세히 설명 된 단계를 따르면 이러한 라이브러리를 얻으십시오.
우리의 응용 프로그램을 쓰자
이제 우리는 코드를 쓸 준비가되었습니다.
먼저, 기본 index.html 파일을 작성하겠습니다.

주의를 기울여야 할 것이 있습니다. 먼저, 모든 종속성을 추가하여로드했습니다. 둘째, 아직 존재하지 않는 새로운 파일 (앱 폴더의 모든 파일)을 참조합니다. 다음 에이 파일을 쓸 것입니다.

앱 폴더로 가서 app.js 파일을 작성하겠습니다. 이것은 매우 간단한 파일입니다.

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

이 파일은 우리를 위해 몇 가지 작업을 수행합니다. 기본 응용 프로그램 모듈 AngularServiceShadashboard를 설정하고 NG.epoch (Epoch.js Angular Directive)와 N3-Pie-Chart (각도 좋은 차트 라이브러리를위한 구조)라는 두 가지 외부 참조를 주입합니다.

만약 당신이 알아 차렸다면, 우리는 또한 다른 곳에서 호스팅되는 BackendserVerurl에 값을 주입했으며 여기에서 사용할 계획입니다.

서버의 URL에 바인딩 할 서비스 팩토리 클래스를 작성하겠습니다. HTML에서 참조 된 Services.js 파일은 앱 폴더로 이동합니다.

이 코드는 널리 사용되는 on and off (여기서는 필요 없음) 구독 모드를 사용하고 각도 공장을 사용하여 응용 프로그램의 신호와 모든 통신을 캡슐화합니다.

이 코드는 언뜻보기에 약간 압도적으로 보일 수 있지만 컨트롤러를 구축 할 때 더 잘 이해할 수 있습니다. 백엔드 신호 서버의 URL 및 Signalr Center 이름을 얻는 것입니다. (Signalr에서는 동일한 서버에서 여러 허브를 사용하여 데이터를 푸시 할 수 있습니다.) 또한,이 코드를 사용하면 SignalR Server (다른 상자에있는)가 ON 메소드를 통해 응용 프로그램을 호출 할 수 있습니다. Application은 Invoke 메소드를 통해 SignalR 서버 내부의 기능을 호출 할 수 있습니다.

다음에는 컨트롤러가 필요합니다.이 컨트롤러는 서비스에서 범위에 데이터를 바인딩합니다. 앱 폴더에서 Controllers.js라는 파일을 만들어 봅시다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css" />
  <link rel="stylesheet" href="Content/epoch.min.css" />

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

</head>
<body ng-app="angularServiceDashboard">

</body>
</html>

이 컨트롤러는 여기서 무언가를합니다. 각도 서비스 객체를 생성하고 서버가 컨트롤러에서 무언가를 호출하도록 콜백 함수에 바인딩합니다.

당신은 서버가 우리를 다시 호출 할 때마다 서버가 반환 한 JSON 배열을 반복 할 것임을 알 수 있습니다. 그런 다음 각 성능 유형에 대한 스위치 문이 있습니다. 이제 우리는 RAM을 설정 한 다음 돌아가서 나머지를 채 웁니다.

우리의 지시 사항에 대해서는 실제로 우리를 위해 하나의 에포크 차트 만 필요합니다. 우리는 index.html Stub 파일에서 참조 한 ng-epoch.js라는 오픈 소스 지침을 사용합니다.

우리는이 모든 차트를 다른 지시 사항으로 나누고, 일부 템플릿을 사용하고, UI-Router를 사용할 수 있지만,이 튜토리얼을 단순화하기 위해 모든 뷰를 index.html 파일에 넣을 것입니다.

이제 index.html 파일에 우리의보기를 추가합시다. 본체 태그 아래에 다음 내용을 추가 하여이 작업을 수행 할 수 있습니다.

이렇게하면 서버가 RAM 데이터를 다시 푸시 할 수있는 위치를 만듭니다. 데이터가 먼저 서비스를 입력 한 다음 컨트롤러를 입력 한 다음 마지막으로보기를 입력합니다.

: 처럼 보일 것입니다 이제 차트를 추가하겠습니다. 이것이 바로 우리가 정말로하고 싶은 것입니다. epoch.js 타임 라인에 Timestamp라는 변수를 추가합니다. 또한 epoch.ng 지시문에 바인딩 할 ChartEntry라는 배열을 추가 할 것입니다.

Build a Real-time SignalR Dashboard with AngularJS 그런 다음 스위치 문에 데이터를 매핑하고 나머지 필수 epoch.js 데이터 항목을 추가하겠습니다. 물론, 더 많은 기능과 필터를 사용하여 더 세분화 할 수 있지만,이 튜토리얼의 단순성을 위해 간단하게 유지할 것입니다.

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

컨트롤러가 더 완전 해 보입니다. 우리는 범위에 RealTimeAreafeed를 추가했으며, 이는 NG-Epoch 지시문을 통해 우리의 견해에 바인딩 할 것이며, 범위에 AreaAxes를 추가하여 면적 그래프의 레이아웃을 결정합니다.

이제 index.html에 지침을 추가하고 들어오는 CPU 값 데이터를 표시하겠습니다.

차트 클래스는 d3.js의 색 구성표를 나타냅니다. 차트 높이는 당신이 추측 한 것입니다. 차트 스트림은 Signalr 서버에서 반환 된 데이터입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css" />
  <link rel="stylesheet" href="Content/epoch.min.css" />

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

</head>
<body ng-app="angularServiceDashboard">

</body>
</html>

그것으로, 우리는 차트가 실시간으로 나타나는 것을 볼 수 있어야합니다 :

이제 많은 수의 데이터 포인트를이 차트에 연결하고 N3-Pie 프레임 워크의 다른 차트를 추가하겠습니다 (PIE 차트를 좋아하지 않기 때문에).

N3-Pie 프레임 워크에서 파이 차트를 추가하려면 다음을 컨트롤러에 추가하십시오.

물론 이 값은 SignalR Server에 의해 업데이트됩니다. 컨트롤러의 전체 코드에서 이것을 볼 수 있습니다.

'use strict';

var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');

우리는 또한 우리의 견해의 전체 코드에 대해 잠시 생각해야합니다.

화면에 다음 데이터가 표시됩니다.

우리는 Angular가 Signalr에 매우 쉽게 연결할 수 있음을 알았습니다. AngularJS 서비스 또는 공장에 엔드 포인트를 삽입하십시오. AngularJS Factory는 Signalr과 통신하는 캡슐화 메커니즘입니다. "결합"후에 누가 AngularJS와 .NET이 그렇게 완벽하게 함께 작동 할 것이라는 것을 누가 알 수 있습니까?

서버의 핵심 측면 나는 백엔드 에서이 통신을 허용하는 .NET 코드를 소개합니다. (여기서는 소스 코드를 찾을 수 있습니다.)

먼저, 서버 코드를 구축하기 위해서는 Visual Studio 솔루션에서 SignalR을 실행해야합니다. 이렇게하려면 ASP.NET의 훌륭한 자습서를 따라 기본 SignalR 솔루션을 실행하십시오. (이것은 가장 쉬운 것입니다.)

실행 후 C# Hub 클래스를 다음으로 변경하십시오. Build a Real-time SignalR Dashboard with AngularJS 허브 클래스를 변경 한 후 Visual Studio는 오류를보고합니다. 성능 모델을 추가해야합니다 (JSON.NET로 인해 서버가 푸시 할 때 JSON으로 자동 변환) :

<code>root
    app     (Angular应用程序特定的JavaScript)
    Content (CSS等)
    Scripts (引用的JavaScript等)
    ...
    index.html</code>

SignalR을 통해 실제 성능 데이터를 청취 클라이언트에게 푸시 할 PerformanceEngine 클래스를 추가하겠습니다. 엔진은 이러한 메시지를 비동기 배경 스레드를 통해 Signalr을 통해 청취 클라이언트에게 보냅니다. 길이로 인해 GitHub 저장소에서 코드를 찾을 수 있습니다.

이 코드는 기본적으로 반복하는 동안 각각의 가입 클라이언트에게 일련의 성능 메트릭을 푸시합니다. 이러한 성능 메트릭은 생성자에 주입됩니다. 서버에서 푸시 속도는 생성자 매개 변수 PollinterValmillis에 설정됩니다.

는 Owin을 Signalr을 호스트하기위한 자체 호스팅으로 사용하는 경우 잘 작동하며 웹 작업자 스레드를 사용하는 경우 잘 작동합니다.

마지막으로해야 할 마지막 일은 물론 onstart () 또는 시작 클래스의 어딘가에 배경 스레드를 시작하는 것입니다.

배경 스레드를 시작하는 두 줄의 코드 라인 (귀하가 추측 한대로)은 PerformanceEngine을 인스턴스화하고 onperformancemonitor ()를 호출하는 곳입니다.

이제, 나는 당신이 내가 서버에서 데이터를 무작위로 만들고 있다고 생각할 것임을 알고 있습니다. 이것이 사실입니다. 그러나 실제 메트릭을 푸시하려면 System.Diagnostics Library 및 Windows에서 제공하는 Performancecounter 만 사용하십시오. 나는 그것을 단순하게 유지하려고 노력하고 있지만 이것이 코드의 모습입니다 :

결론 우리는 Angular를 통해 Signalr 데이터를 사용하는 방법을 배웠으며 해당 데이터를 각도 측면의 실시간 차트 프레임 워크에 연결했습니다.

클라이언트의 최종 버전의 데모는 여기에 표시되어 코드를 얻을 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AngularJS - SignalR - ServiceDashboard</title>
  <link rel="stylesheet" href="Content/bootstrap.min.css" />
  <link rel="stylesheet" href="Content/epoch.min.css" />

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

  <🎜>
  <🎜>
  <🎜>
  <🎜>

</head>
<body ng-app="angularServiceDashboard">

</body>
</html>

서버의 최종 버전의 데모가 여기에 표시되며 여기에서 코드를 얻을 수 있습니다.

나는 당신 이이 연습을 즐기시기 바랍니다. 비슷한 것을 시도한 경우 의견에 알려주십시오!

AngularJS 가있는 실시간 신호 모니터링 패널을 구축하기위한 FAQ (FAQ) angularjs에서 신호를 설정하는 방법은 무엇입니까?

'use strict';

var app = angular.module('angularServiceDashboard', ['ng.epoch','n3-pie-chart']);
app.value('backendServerUrl', 'http://sitepointsignal.cloudapp.net/');

angularjs에서 신호를 설정하는 데 몇 단계가 포함됩니다. 먼저 Nuget 또는 NPM을 사용하여 Signalr 라이브러리를 설치해야합니다. 설치 후 서버에서 새로운 Signalr Center를 만들 수 있습니다. 이 센터는 메시지 보내기 및 수신을 담당합니다. 클라이언트의 경우 Signalr JavaScript 라이브러리를 참조하고 센터에 연결해야합니다. 그런 다음 연결을 시작하고 들어오는 메시지를 처리하는 함수를 정의 할 수 있습니다.

Signalr의 연결 오류를 처리하는 방법은 무엇입니까?

SignalR은 연결 오류를 처리하기위한 내장 메커니즘을 제공합니다. 중앙 연결에서 .error () 함수를 사용하여 오류가 발생할 때 호출되는 콜백 함수를 정의 할 수 있습니다. 이 콜백 함수는 사용자에게 오류 메시지를 표시하거나 중앙에 다시 연결하려고 시도 할 수 있습니다.

다른 JavaScript 프레임 워크와 함께 SignalR을 사용할 수 있습니까?

예, SignalR은 Ajax 및 WebSockets를 지원하는 JavaScript 프레임 워크와 함께 사용할 수 있습니다. 여기에는 React, Vue.js 및 Angular와 같은 인기있는 프레임 워크가 포함됩니다. 프로젝트에 Signalr JavaScript 라이브러리를 포함시키고 다른 JavaScript 응용 프로그램과 마찬가지로 중심 연결을 만들면됩니다.

SignalR을 사용하여 서버에서 클라이언트로 메시지를 보내는 방법은 무엇입니까?

서버에서 클라이언트로 메시지를 보내려면 센터의 클라이언트 속성을 사용할 수 있습니다. 이 속성은 모든 연결된 클라이언트, 특정 클라이언트 또는 클라이언트 그룹에게 메시지를 전하는 방법을 제공합니다. 서버 코드의 모든 부분에서 이러한 메소드를 호출하여 클라이언트에 실시간 업데이트를 보낼 수 있습니다.

내 신호 응용 프로그램을 보호하는 방법은 무엇입니까?

Signalr은 응용 프로그램을 보호하기위한 몇 가지 옵션을 제공합니다. [Authorize] 속성을 사용하여 센터 및 센터 방법에 대한 액세스를 제한 할 수 있습니다. Global.asax 파일에서 Maphubs () 메소드를 사용하여 허브에 대한 사용자 정의 권한 권한자를 지정할 수도 있습니다. 또한 SSL을 사용하여 신호 트래픽을 암호화하고 도청 방지를 방지 할 수 있습니다.

Signalr의 단절을 처리하는 방법은 무엇입니까?

SignalR은 자동으로 연결을 끊고 다시 연결하려고 시도합니다. 그러나 중앙 연결에서 .disconnected () 함수를 사용하여 수동으로 연결을 끊을 수도 있습니다. 이 함수를 사용하면 연결이 손실 될 때 호출 될 콜백 기능을 정의 할 수 있습니다.

Non.net 서버에서 Signalr을 사용할 수 있습니까?

SignalR은 .NET 서버와 함께 사용하도록 설계된 .NET 라이브러리입니다. 그러나 호환 가능한 WebSocket 라이브러리를 사용하여 SignalR은 비.NET 서버에서 사용할 수 있습니다. 서버에서 Signalr 프로토콜을 구현하고 연결 및 메시징 로직을 직접 처리해야합니다.

내 신호 응용 프로그램을 테스트하는 방법은 무엇입니까?

Postman 또는 Fiddler와 같은 도구를 사용하여 Signalr 응용 프로그램을 테스트하고 HTTP 요청을 센터에 보내고 응답을 확인할 수 있습니다. 중앙 방법 및 클라이언트 기능에 대한 단위 테스트를 작성할 수도 있습니다.

모바일 앱에서 Signalr을 사용할 수 있습니까?

예, 모바일 앱에서 SignalR을 사용할 수 있습니다. Signalr JavaScript 라이브러리는 Cordova 또는 Ionic으로 구축 된 하이브리드 모바일 애플리케이션에서 사용할 수 있습니다. 기본 모바일 앱의 경우 iOS와 Android는 SignalR 클라이언트를 제공합니다.

내 신호 응용 프로그램을 확장하는 방법은 무엇입니까?

Signalr은 응용 프로그램을 확장하기위한 몇 가지 옵션을 제공합니다. 모든 신호 연결을 처리하는 완전히 관리되는 서비스 인 Azure Signalr Service를 사용할 수 있습니다. 여러 서버간에 메시지를 배포하기위한 소프트웨어 계층 인 백엔드를 사용할 수도 있습니다.

위 내용은 AngularJS로 실시간 신호 대시 보드를 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.