feat(#970): Add PDF Preview

Any PDF response can be now be previewed. There is no UI fancy UI interface for it for simplicity. This makes it look very similar to Postman.

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js

@@ -2,6 +2,11 @@ import CodeEditor from 'components/CodeEditor/index';
 import { get } from 'lodash';
 import { useDispatch, useSelector } from 'react-redux';
 import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { Document, Page } from "react-pdf";
+import { useState } from "react";
+import 'pdfjs-dist/build/pdf.worker';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
 
 const QueryResultPreview = ({
   previewTab,
@@ -19,6 +24,10 @@ const QueryResultPreview = ({
   const preferences = useSelector((state) => state.app.preferences);
   const dispatch = useDispatch();
 
+  const [numPages, setNumPages] = useState(null);
+  function onDocumentLoadSuccess({ numPages }) {
+    setNumPages(numPages);
+  }
   // Fail safe, so we don't render anything with an invalid tab
   if (!allowedPreviewModes.includes(previewTab)) {
     return null;
@@ -45,6 +54,20 @@ const QueryResultPreview = ({
     case 'preview-image': {
       return <img src={`data:${contentType.replace(/\;(.*)/, '')};base64,${dataBuffer}`} className="mx-auto" />;
     }
+    case 'preview-pdf': {
+      return(
+        <div className="preview-pdf" style={{height: "100%", overflow: "auto", maxHeight:"calc(100vh - 220px)"}}>
+          <Document
+            file ={`data:application/pdf;base64,${dataBuffer}`}
+            onLoadSuccess={onDocumentLoadSuccess}
+          >
+          {Array.from(new Array(numPages), (el, index) => (
+        <Page key={`page_${index + 1}`} pageNumber={index + 1} renderAnnotationLayer={false}/>
+          ))}
+        </Document>
+        </div>
+      );
+    }
     default:
     case 'raw': {
       return (