Copy link to clipboard
Copied
Copy link to clipboard
Copied
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.
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.
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>
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;
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.
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