快速上手

提示

ElasticPDF 目前处于快速发展迭代的阶段，你可以用它来构建自己的应用，在许可有效期内，我们都会免费更新和同步代码包，请放心使用。同时所有的改动都会同步至更新日志

在线试一试

你可以通过 Demo 页面在你的浏览器里直接使用 ElasticPDF 。

安装

获取许可

在使用之前，请选择并购买适合自己的许可证
购买许可证之后通过包管理器，如 pnpm、yarn、npm 等将我们的代码包下载至目标文件夹。

嵌入 ElasticPDF

HTML & JQuery 项目

将代码包方式在项目文件夹中

<!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 项目

将 ElasticPDF 代码包放置到项目 Public 文件夹下，导入完成后，你项目的目录结构应该是这样的：

├─ 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 项目

将 ElasticPDF 代码包放置到项目 Public 文件夹下, 导入完成后，你项目的目录结构应该是这样的：

├─ 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 项目

将 ElasticPDF 代码包放置到项目 src/assets 文件夹下，导入完成后，你项目的目录结构应该是这样的：

├─ 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 项目

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

进一步了解 ElasticPDF

现在，你应该已经有了一个可用的 PDF 编辑应用。同时你可以阅读后续的指南来更加了解 ElasticPDF 。

下一步，前往配置了解更多配置文件相关的内容。