构建在线工具来测量 PDF

在线处理 PDF 文件时,能够直接在浏览器中测量尺寸和内容可以显著提高工作效率。

本指南将引导您完成使用 ComPDFKit 的 Web SDK构建在线 PDF 测量工具的简单过程。

先决条件

首先,您需要访问我们的"Web SDK 指南"页面来检查您是否满足这些要求:

  • Node.js 的最新稳定版本。
  • 与 npm 兼容的包管理器。
  • 应用许可证密钥

如何获取 30 天免费许可证

ComPDFKit 为每个人提供 30 天免费许可证密钥,以测试他们的项目。您可以通过以下步骤获取它:

  • 访问ComPDFKit 的定价页面
  • 然后在表格中输入所需信息
  • 最后,单击"获取免费试用许可证"按钮,等待片刻后检查您的电子邮件收件箱,许可证密钥就会出现。

将测量 PDF 集成到 Web 项目中 - 完整指南

步骤 1:将 npm 中的 ComPDFKit for Web 包安装到您的 Vanilla JS 项目中

highlight 复制代码
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm i @compdfkit_pdf_sdk/webviewer --save
</code></span></span></span></span>

然后,将包含运行 ComPDFKit Web 演示所需的静态资源文件的"webviewer"文件夹添加到项目的公共资源文件夹中。

highlight 复制代码
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>cp ./node_modules/@compdfkit_pdf_sdk/webviewer/webviewer.global.js ./
cp -r ./node_modules/@compdfkit_pdf_sdk/webviewer/dist ./webviewer
</code></span></span></span></span>

第 2 步:创建 index.html

highlight 复制代码
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ComPDFKit Web Viewer</title>
</head>
<!-- Import WebViewer as a script tag -->
<script src='./webviewer.global.js'></script>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>
</body>
</html>
</code></span></span></span></span>

注意:使用 Web SDK 时,需要使用参数 path 来告诉它静态资源的位置。如果不执行此步骤,则它们是相对于当前路径的

步骤 3:添加脚本标签并使用 Vanilla JavaScript 初始化 ComPDFKitViewer for Web。

highlight 复制代码
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ComPDFKit Web Viewer</title>
</head>
<!-- Import WebViewer as a script tag -->
<script src='./webviewer.global.js'></script>
<body>
  <div id="app" style="width: 100%; height: 100vh;"></div>
​
  <script>
    let docViewer = null;
​
    ComPDFKitViewer.init({
      path: '/',
      pdfUrl: '/webviewer/example/developer_guide_web.pdf',
      license: '<Input your license here>'
    }, document.getElementById('app')).then((core) => {
      docViewer = core.docViewer;
​
      docViewer.addEvent('documentloaded', async () => {
        console.log('document loaded');
      })
    })
  </script>
</body>
</html>
</code></span></span></span></span>

步骤4:为了能够在本地主机上显示,这一步我们需要设置服务器环境。

highlight 复制代码
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm install -g http-server
</code></span></span></span></span>

步骤 5:在浏览器上打开http://localhost:8080。然后将显示 PDF 文件,您可以切换到 PDF 测量工具来测量您的 PDF 文件。

highlight 复制代码
<span style="color:#171717"><span style="background-color:#ffffff"><span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>http-server -a localhost -p 8080
</code></span></span></span></span>
相关推荐
VB5943 小时前
《中国传世名画》《中国传世山水画》《中国传世人物画》百科全书式的中国名画,PDF,294M
pdf
家庭云计算专家3 小时前
ONLYOFFICE深度解锁系列.13-如何复制、重新排序 PDF 页面:onlyoffice 9.0.3 新功能
pdf·onlyoffice·协作空间·onlyoffice开发版·onlyoffice新功能·onlyoffice开发者版
Eiceblue2 天前
PDF转Markdown - Python 实现方案与代码
开发语言·vscode·python·pdf
Bruce_Liuxiaowei2 天前
Python实现PDF按页分割:灵活拆分文档的技术指南
windows·python·pdf
烛九幽-子麟2 天前
精通Python PDF裁剪:从入门到专业的三重境界
开发语言·python·pdf
杨超越luckly2 天前
HTML应用指南:利用GET请求获取全国奈雪的茶门店位置信息
大数据·前端·python·arcgis·信息可视化·html
zhou_x_b2 天前
解决栅格数据裁剪矢量数据问题两种方法,ArcGIS解决与PYTHON解决
arcgis
维维180-3121-14552 天前
ArcGIS水文及空间分析与SWMM融合协同在城市排水防涝领域中的应用
arcgis·水文·内涝
じòぴé南冸じょうげん3 天前
Vue中最简单的PDF引入方法及优缺点分析
前端·javascript·vue.js·pdf
开心就好13145203 天前
前端项目下载发票pdf文件要求改文件名笔记
前端·笔记·pdf