1
Reply
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.jsCombining 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
AdChoices
