React

Use free as an api_key for testing.

React (Javascript)

PDF URL

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
  const [text, setText] = useState('');

  const extractText = async () => {
    try {
      const response = await axios.post('https://v1.mlapi.co/pdf/pdf-to-text', {
        pdf_url: 'https://example.com/your-pdf.pdf',
        api_key: 'your_api_key',
      });
      setText(response.data.text);
    } catch (error) {
      console.error('Error:', error.response ? error.response.data : error.message);
    }
  };

  return (
    <div>
      <button onClick={extractText}>Extract Text</button>
      <pre>{text}</pre>
    </div>
  );
};

export default App;

Upload PDF file

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
  const [file, setFile] = useState(null);
  const [text, setText] = useState('');

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const extractText = async () => {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('api_key', 'your_api_key');

    try {
      const response = await axios.post('https://v1.mlapi.co/pdf/pdf-to-text', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      setText(response.data.text);
    } catch (error) {
      console.error('Error:', error.response ? error.response.data : error.message);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={extractText}>Extract Text</button>
      <pre>{text}</pre>
    </div>
  );
};

export default App;

React (Typescript)

PDF URL

import React, { useState } from 'react';
import axios from 'axios';

const App: React.FC = () => {
  const [text, setText] = useState<string>('');

  const extractText = async () => {
    try {
      const response = await axios.post('https://v1.mlapi.co/pdf/pdf-to-text', {
        pdf_url: 'https://example.com/your-pdf.pdf',
        api_key: 'your_api_key',
      });
      setText(response.data.text);
    } catch (error) {
      console.error('Error:', error.response ? error.response.data : error.message);
    }
  };

  return (
    <div>
      <button onClick={extractText}>Extract Text</button>
      <pre>{text}</pre>
    </div>
  );
};

export default App;

Upload PDF File

import React, { useState } from 'react';
import axios from 'axios';

const App: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  const [text, setText] = useState<string>('');

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      setFile(e.target.files[0]);
    }
  };

  const extractText = async () => {
    const formData = new FormData();
    formData.append('file', file as File);
    formData.append('api_key', 'your_api_key');

    try {
      const response = await axios.post('https://v1.mlapi.co/pdf/pdf-to-text', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      setText(response.data.text);
    } catch (error) {
      console.error('Error:', error.response ? error.response.data : error.message);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={extractText}>Extract Text</button>
      <pre>{text}</pre>
    </div>
  );
};

export default App;