mirror of
https://github.com/jzillmann/pdf-to-markdown.git
synced 2024-11-21 23:33:31 +01:00
Add status to loading view
This commit is contained in:
parent
147df8e304
commit
1a97cef440
@ -23,6 +23,7 @@
|
||||
"bootstrap": "^3.3.7",
|
||||
"enumify": "^1.0.4",
|
||||
"pdfjs-dist": "^1.6.317",
|
||||
"rc-progress": "^2.0.5",
|
||||
"react": "^15.3.2",
|
||||
"react-bootstrap": "^0.30.3",
|
||||
"react-dom": "^15.3.2",
|
||||
|
@ -15,18 +15,19 @@ export default class App extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
console.debug(this.props.appState);
|
||||
// console.debug(this.props.appState);
|
||||
const appState = this.props.appState;
|
||||
|
||||
var mainView;
|
||||
switch (this.props.appState.mainView) {
|
||||
case View.UPLOAD:
|
||||
mainView = <PdfUploadView uploadPdfFunction={ this.props.appState.uploadPdf } />
|
||||
mainView = <PdfUploadView uploadPdfFunction={ appState.storeFileBuffer } />
|
||||
break;
|
||||
case View.LOADING:
|
||||
mainView = <LoadingView/>
|
||||
mainView = <LoadingView fileBuffer={ appState.fileBuffer } storePdfPagesFunction={ appState.storePdfPages } />
|
||||
break;
|
||||
case View.PDF_VIEW:
|
||||
mainView = <PdfView pdfPages={ this.props.appState.pdfPages } transformations={ this.props.appState.transformations } />
|
||||
mainView = <PdfView pdfPages={ appState.pdfPages } transformations={ appState.transformations } />
|
||||
break;
|
||||
}
|
||||
|
||||
|
@ -1,21 +1,102 @@
|
||||
import React from 'react';
|
||||
|
||||
import Spinner from './lib/Spinner.jsx';
|
||||
import pdfjs from 'pdfjs-dist';
|
||||
import { Line } from 'rc-progress';
|
||||
|
||||
import PdfPage from '../models/PdfPage.jsx';
|
||||
import TextItem from '../models/TextItem.jsx';
|
||||
|
||||
export default class LoadingView extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
fileBuffer: React.PropTypes.object.isRequired,
|
||||
storePdfPagesFunction: React.PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
parsedPages: 0,
|
||||
pdfPages: []
|
||||
};
|
||||
}
|
||||
|
||||
anounceInitialParse(pdfPages) {
|
||||
this.setState({
|
||||
pdfPages: pdfPages
|
||||
});
|
||||
}
|
||||
|
||||
anouncePageParsed(index, textItems) {
|
||||
//TODO might make problems.. concat unordered and order at the end ?
|
||||
this.state.pdfPages[index].textItems = textItems;
|
||||
this.setState({
|
||||
parsedPages: this.state.parsedPages + 1
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
componentWillMount() {
|
||||
const anounceInitialParseFunction = this.anounceInitialParse.bind(this);
|
||||
const anouncePageParsedFunction = this.anouncePageParsed.bind(this);
|
||||
PDFJS.getDocument(this.props.fileBuffer).then(function(pdfDocument) {
|
||||
console.log('Number of pages: ' + pdfDocument.numPages);
|
||||
// console.debug(pdfDocument);
|
||||
const numPages = pdfDocument.numPages;
|
||||
// const numPages = 4; // hack
|
||||
var pdfPages = [];
|
||||
for (var i = 0; i < numPages; i++) {
|
||||
pdfPages.push(new PdfPage({
|
||||
index: i
|
||||
}));
|
||||
}
|
||||
anounceInitialParseFunction(pdfPages);
|
||||
for (var i = 1; i <= numPages; i++) {
|
||||
pdfDocument.getPage(i).then(function(page) {
|
||||
page.getTextContent().then(function(textContent) {
|
||||
// console.debug(textContent);
|
||||
const textItems = textContent.items.map(function(item) {
|
||||
return new TextItem({
|
||||
x: item.transform[4],
|
||||
y: item.transform[5],
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
text: item.str
|
||||
});
|
||||
});
|
||||
anouncePageParsedFunction(page.pageIndex, textItems);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
const {parsedPages, pdfPages} = this.state;
|
||||
var percentDone = 0;
|
||||
var details = '';
|
||||
if (pdfPages.length > 0) {
|
||||
percentDone = parsedPages / pdfPages.length * 100;
|
||||
details = parsedPages + ' / ' + pdfPages.length
|
||||
if (parsedPages == pdfPages.length) {
|
||||
this.props.storePdfPagesFunction(this.state.pdfPages);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div style={ { textAlign: 'center' } }>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<Spinner/>
|
||||
<Line percent={ percentDone } strokeWidth="2" strokeColor="#D3D3D3" />
|
||||
<br/>
|
||||
<br/>
|
||||
<div>
|
||||
Uploading and parsing PDF...
|
||||
<br/>
|
||||
{ ' ' + details }
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
|
@ -1,32 +0,0 @@
|
||||
import pdfjs from 'pdfjs-dist';
|
||||
|
||||
import AppState from '../models/AppState.jsx';
|
||||
import TextItem from '../models/TextItem.jsx';
|
||||
|
||||
export function pdfToTextItemsAsync(fileBuffer:ArrayBuffer, appState:AppState) {
|
||||
PDFJS.getDocument(fileBuffer).then(function(pdfDocument) {
|
||||
console.log('Number of pages: ' + pdfDocument.numPages);
|
||||
// console.debug(pdfDocument);
|
||||
const numPages = pdfDocument.numPages;
|
||||
// const numPages = 3;
|
||||
appState.setPageCount(numPages);
|
||||
for (var i = 0; i <= numPages; i++) {
|
||||
pdfDocument.getPage(i).then(function(page) {
|
||||
page.getTextContent().then(function(textContent) {
|
||||
// console.debug(textContent);
|
||||
const textItems = textContent.items.map(function(item) {
|
||||
const transform = item.transform;
|
||||
return new TextItem({
|
||||
x: transform[4],
|
||||
y: transform[5],
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
text: item.str
|
||||
});
|
||||
});
|
||||
appState.setPdfPage(page.pageIndex, textItems);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
@ -1,8 +1,5 @@
|
||||
import { Enum } from 'enumify';
|
||||
|
||||
import { pdfToTextItemsAsync } from '../functions/pdfToTextItems.jsx'
|
||||
import PdfPage from './PdfPage.jsx';
|
||||
|
||||
import NoOpTransformation from './transformations/NoOpTransformation.jsx';
|
||||
import RoundCoordinatesTransformation from './transformations/RoundCoordinatesTransformation.jsx';
|
||||
import CombineSameYTransformation from './transformations/CombineSameYTransformation.jsx';
|
||||
@ -13,47 +10,33 @@ export default class AppState {
|
||||
constructor(options) {
|
||||
this.renderFunction = options.renderFunction;
|
||||
this.mainView = View.UPLOAD;
|
||||
this.pagesToUpload = 0;
|
||||
this.uploadedPages = 0;
|
||||
this.fileBuffer;
|
||||
this.pdfPages = [];
|
||||
this.transformations = [new NoOpTransformation(), new RoundCoordinatesTransformation(), new CombineSameYTransformation()];
|
||||
|
||||
//bind functions
|
||||
this.render = this.render.bind(this);
|
||||
this.uploadPdf = this.uploadPdf.bind(this);
|
||||
this.setPageCount = this.setPageCount.bind(this);
|
||||
this.setPdfPage = this.setPdfPage.bind(this);
|
||||
this.storeFileBuffer = this.storeFileBuffer.bind(this);
|
||||
this.storePdfPages = this.storePdfPages.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
this.renderFunction(this)
|
||||
}
|
||||
|
||||
uploadPdf(fileBuffer:ArrayBuffer) {
|
||||
pdfToTextItemsAsync(fileBuffer, this);
|
||||
// the uploaded pdf as file buffer
|
||||
storeFileBuffer(fileBuffer:ArrayBuffer) {
|
||||
this.fileBuffer = fileBuffer;
|
||||
this.mainView = View.LOADING;
|
||||
this.render()
|
||||
}
|
||||
|
||||
setPageCount(numPages) {
|
||||
this.pagesToUpload = numPages;
|
||||
for (var i = 0; i < numPages; i++) {
|
||||
this.pdfPages.push(new PdfPage({
|
||||
index: i
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
setPdfPage(pageIndex, textItems) {
|
||||
console.debug("Upload " + pageIndex);
|
||||
this.pdfPages[pageIndex].textItems = textItems;
|
||||
this.uploadedPages++;
|
||||
if (this.uploadedPages == this.pagesToUpload) {
|
||||
console.debug("Fin");
|
||||
storePdfPages(pdfPages) {
|
||||
this.pdfPages = pdfPages;
|
||||
this.fileBuffer = null;
|
||||
this.mainView = View.PDF_VIEW;
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user