Get started quickly

Tips

ElasticPDF is currently in a stage of rapid development and iteration. You can use it to build your own applications. During the validity period of the license, we will update and synchronize the code package for free. Please feel free to use it. At the same time, all changes will be synchronized to the change log

Try it online

You can use ElasticPDF directly in your browser through the Demo page.

Installation

Get a license

  • Before use, please choose and purchase the license that suits you

  • After purchasing the license, download our code package to the target folder through a package manager such as pnpm, yarn, npm, etc.

Embed ElasticPDF

HTML & JQuery Project

Package the code in the project folder

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe id='my-pdfjs-iframe' src="elasticpdf/web/viewer.html?file=tutorial.pdf"
frameborder="0" width="100%" height="700px"></iframe>
</body>
</html>

Vue project

Place the ElasticPDF code package in the project's Public folder. After the import is complete, the directory structure of your project should be as follows:

├─ node_modules
├─ public
│ └─elasticpdf
│ 	└─web
│ 	   └─viewer.html
└─ src
└─ package.json
<iframe src="elasticpdf/web/viewer.html?file=tutorial.pdf"
frameborder="0" width="100%" height="700px"></iframe>

React project

Place the ElasticPDF code package in the project's Public folder. After the import is complete, the directory structure of your project should be as follows:

├─ node_modules
├─ public
│ └─elasticpdf
│ 	└─web
│ 	   └─viewer.html
└─ src
└─ package.json
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<iframe
title="resg"
src="elasticpdf/web/viewer.html?file=tutorial.pdf"
style={{ width: '100%', border: '0px', height: '700px' }}
/>
</header>
</div>
);
}

export default App;

Angular project

Place the ElasticPDF code package in the project's src/assets folder. After the import is complete, the directory structure of your project should be as follows:

├─ node_modules
├─ src
│ └─assets
│ 	└─elasticpdf
│ 	  └─web
│ 		└─viewer.html
└─ package.json
<iframe src="elasticpdf/web/viewer.html?file=tutorial.pdf"
frameborder="0" width="100%" height="700px"></iframe>

Wordpress Project

<iframe src="elasticpdf/web/viewer.html?file=tutorial.pdf"
frameborder="0" width="100%" height="700px"></iframe>

Learn More About ElasticPDF

Now you should have a working PDF editing application. You can also read the subsequent guides to learn more about ElasticPDF.

Next, go to Configuration to learn more about the configuration file.