Editable PDF in Javascript

Report · Mar 20, 2024

Hi, I want to implement editable PDF functionality in my web application. Does Adobe provide anything so that I can use that thing? I also want each control like text editor

Frontend ReactJs

Backend NodeJs

Report · May 21, 2024

To implement editable PDF functionality in your web application with ReactJS on the frontend and NodeJS on the backend, Adobe offers several tools and APIs that you can utilize. Specifically, Adobe PDF Embed API and Adobe Document Services API are well-suited for this purpose.

Adobe PDF Embed API

The Adobe PDF Embed API allows you to embed and display PDFs in your web application with rich features like annotations, form filling, and more. Here are the steps to integrate it with your React application.

Step 1: Obtain API Credentials

Go to the Adobe Developer Console.
Create a new project and add the PDF Embed API to it.
Obtain the Client ID (API Key).

Step 2: Set Up React Project

Create a new React project if you don’t have one already: npx create-react-app pdf-editor
cd pdf-editor

Install the necessary dependencies:npm install @adobe/pdfservices-node-sdk

Add Adobe Embed API script to your public/index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Editor</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
</body>
</html>

Step 3: Embed PDF in React Component

Create a component to display the PDF:

// src/components/PdfViewer.js
import React, { useEffect, useRef } from 'react';

const PdfViewer = ({ pdfUrl }) => {
    const adobeDCView = useRef(null);

    useEffect(() => {
        if (adobeDCView.current) {
            adobeDCView.current = new window.AdobeDC.View({ clientId: 'YOUR_CLIENT_ID', divId: 'adobe-dc-view' });
            adobeDCView.current.previewFile({
                content: { location: { url: pdfUrl } },
                metaData: { fileName: 'Sample PDF' }
            }, { embedMode: 'IN_LINE' });
        }
    }, [pdfUrl]);

    return <div id="adobe-dc-view" style={{ height: '100vh' }}></div>;
};

export default PdfViewer;

Use the PdfViewer component in your app:

// src/App.js
import React from 'react';
import PdfViewer from './components/PdfViewer';

const App = () => {
    const pdfUrl = 'URL_OF_YOUR_PDF';
    return (
        <div className="App">
            <PdfViewer pdfUrl={pdfUrl} />
        </div>
    );
};

export default App;

Adobe Document Services API

For backend operations like generating, modifying, or securing PDFs, you can use Adobe Document Services API. Here’s how you can use it with Node.js.

Step 1: Obtain API Credentials

Go to the Adobe Developer Console.
Create a new project and add the Adobe PDF Services API to it.
Download the credentials JSON file.

Step 2: Set Up Node.js Projejt:

mkdir pdf-backend
cd pdf-backend
npm init -y
npm install @adobe/pdfservices-node-sdk

Create a script to use the API:

// index.js
const PDFServicesSdk = require('@adobe/pdfservices-node-sdk');
const fs = require('fs');

// Load credentials from the downloaded JSON file
const credentials = PDFServicesSdk.Credentials
    .serviceAccountCredentialsBuilder()
    .fromFile('path/to/your/credentials.json')
    .build();

const clientConfig = PDFServicesSdk.ClientConfig
    .clientConfigBuilder()
    .withConnectTimeout(10000)
    .withReadTimeout(10000)
    .build();

const executionContext = PDFServicesSdk.ExecutionContext.create(credentials, clientConfig);
const exportPDFOperation = PDFServicesSdk.ExportPDF.Operation.createNew(PDFServicesSdk.ExportPDF.SupportedTargetFormats.DOCX);

const input = PDFServicesSdk.FileRef.createFromLocalFile('path/to/your/input.pdf');
exportPDFOperation.setInput(input);

exportPDFOperation.execute(executionContext)
    .then(result => result.saveAsFile('output/result.docx'))
    .catch(err => console.log(err));

Run the script:

node index.js

Combining Frontend and Backend

Frontend: Use Adobe PDF Embed API to display and edit PDFs.
Backend: Use Adobe Document Services API to perform server-side PDF manipulations (like merging, splitting, converting).

Elisabet