holm/bruno
1
0
Fork 0
forked from extern/bruno
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #982 from n00o/feature/PDF-Preview

Browse Source 
feat(#970): Add PDF Preview
This commit is contained in:
Anoop M D 2023-11-17 08:10:44 +05:30 committed by GitHub
commit ae689a8615
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 901 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

877
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
packages/bruno-app/package.json
View File

@ -45,6 +45,7 @@
"nanoid": "3.3.4",
"next": "12.3.3",
"path": "^0.12.7",
"pdfjs-dist": "^3.11.174",
"platform": "^1.3.6",
"posthog-node": "^2.1.0",
"qs": "^6.11.0",
@ -56,6 +57,7 @@
"react-github-btn": "^1.4.0",
"react-hot-toast": "^2.4.0",
"react-inspector": "^6.0.2",
"react-pdf": "^7.5.1",
"react-redux": "^7.2.6",
"react-tooltip": "^5.5.2",
"sass": "^1.46.0",

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

@ -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,17 @@ 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 (

13
packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
View File

@ -18,6 +18,19 @@ const StyledWrapper = styled.div`
width: 100%;
}
.react-pdf__Page {
margin-top: 10px;
background-color: transparent !important;
}
.react-pdf__Page__textContent {
border: 1px solid darkgrey;
box-shadow: 5px 5px 5px 1px #ccc;
border-radius: 0px;
margin: 0 auto;
}
.react-pdf__Page__canvas {
margin: 0 auto;
}
div[role='tablist'] {
.active {
color: ${(props) => props.theme.colors.text.yellow};

2
packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
View File

@ -49,6 +49,8 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
allowedPreviewModes.unshift('preview-web');
} else if (mode.includes('image')) {
allowedPreviewModes.unshift('preview-image');
} else if (contentType.includes('pdf')) {
allowedPreviewModes.unshift('preview-pdf');
}
return allowedPreviewModes;