chore: built-in pdf viewer (#8506)

taiga-family · Aug 13, 2024 · 4ca4b66 · 4ca4b66
1 parent f9a8ba6
commit 4ca4b66
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/projects/demo/src/modules/components/pdf-viewer/pdf-viewer.module.ts b/projects/demo/src/modules/components/pdf-viewer/pdf-viewer.module.ts
@@ -2,7 +2,12 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiButtonModule, TuiLoaderModule, TuiNotificationModule} from '@taiga-ui/core';
+import {
+    TuiButtonModule,
+    TuiLinkModule,
+    TuiLoaderModule,
+    TuiNotificationModule,
+} from '@taiga-ui/core';
 import {TuiPdfViewerModule} from '@taiga-ui/kit';
 
 import {TuiPdfViewerExample1} from './examples/1';
@@ -20,6 +25,7 @@ import {ExampleTuiPdfViewerComponent} from './pdf-viewer.component';
         TuiButtonModule,
         TuiNotificationModule,
         TuiAddonDocModule,
+        TuiLinkModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiPdfViewerComponent)),
     ],
     declarations: [

diff --git a/projects/demo/src/modules/components/pdf-viewer/pdf-viewer.template.html b/projects/demo/src/modules/components/pdf-viewer/pdf-viewer.template.html
@@ -5,14 +5,36 @@
     <ng-template pageTab>
         <p>Custom dialog to preview PDF</p>
 
-        <tui-notification status="warning">
-            Keep in mind mobile devices do not support displaying PDFs in iframe, so you need to rely on
+        <tui-notification
+            status="warning"
+            class="tui-space_top-5"
+        >
+            PDF display in browsers is handled by each browser independently, using their own homegrown or 3rd-party
+            code, as this is not part of the HTML spec. Keep in mind most mobile devices do not support displaying PDFs
+            in iframe. Check it
+            <a
+                href="https://caniuse.com/pdf-viewer"
+                rel="noreferrer"
+                target="_blank"
+                tuiLink
+            >
+                here
+            </a>
+            . The only way to enforce rendering consistency in all browsers is to do the rendering server-side, bundle
+            your own JS PDF renderer, or use a 3rd-party rendering service. If you want to display it yourself, so you
+            need to rely on
             <code>TUI_IS_MOBILE</code>
             token to provide suitable alternative behavior. For example, you can use third-party service
             <code>https://drive.google.com/viewerng/viewer?embedded=true&url=$YOUR_PUBLIC_PATH_TO_PDF</code>
-            or your own service to render PDF in mobile iframe with
-            <code>pdf.js</code>
-            .
+            or your own service to render PDF by
+            <a
+                href="https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#which-browsersenvironments-are-supported"
+                rel="noreferrer"
+                target="_blank"
+                tuiLink
+            >
+                pdf.js.
+            </a>
         </tui-notification>
 
         <tui-doc-example