• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Editable PDF in Javascript

New Here ,
Mar 20, 2024 Mar 20, 2024

Copy link to clipboard

Copied

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 

TOPICS
Acrobat SDK and JavaScript

Views

196

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 21, 2024 May 21, 2024

Copy link to clipboard

Copied

LATEST

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

  1. Go to the Adobe Developer Console.
  2. Create a new project and add the PDF Embed API to it.
  3. 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

  1. 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

  1. Go to the Adobe Developer Console.
  2. Create a new project and add the Adobe PDF Services API to it.
  3. 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

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

te_matcha.jpgElisabet

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines