首页 > 其他分享 >如何使用ComPDFKit Web SDK添加在线编辑PDF文档功能

如何使用ComPDFKit Web SDK添加在线编辑PDF文档功能

时间:2024-02-19 15:35:06浏览次数:31  
标签:Web const ComPDFKit 插入 文档 docViewer PDF 第一页 页面

文档编辑功能提供了一系列的操作页面的能力,使用户能够控制文档结构,并调整文档的布局和格式,确保文档内容以合理有序的方式精准呈现。

ComPDFKit 文档编辑的优势

  • 插入或删除页面: 向文档插入或删除页面,以满足特定的排版要求。
  • 文档结构调整: 调整页面排列顺序或旋转方向,以满足特定的显示或打印需求。
  • 多文档协作: 从一个文档中提取页面,然后插入到另一个文档中,以促进协作和内容整合。

 

ComPDFKit for Web 文档编辑的功能

  • 插入页面

    向目标文档中插入空白页面或另一个文档中的页面。

    • 插入空白页面

      以下是插入空白页面的示例代码:

      // 插入到第一页。
      const pageIndex = 1;
      const width = 612;
      const height = 792;
      
      docViewer.insertBlankPage(pageIndex, width, height)

       

    • 插入其他 PDF 页面

      以下是插入其他 PDF 页面的示例代码:

const file = {...} // File文件对象。
const pageIndexToInsert = 1
const pagesIndexToInsert = [0, 1, '2-5'] // 插入PDF页面的范围。

docViewer.insertPages(file, pageIndexToInsert, pagesIndexToInsert)

 

 

  • 删除页面

    删除文档中的页面。

    • // 删除文档的第一页。
      const pagesIndexToDelete = [0]
      docViewer.removePages(pagesIndexToDelete)

       

  • 旋转页面

    旋转 PDF 文档中的页面。

    • // 将第一页顺时针旋转90度,每一单位旋转即为顺时针90度。
      const pagesIndexToRotate = [0]
      const rotation = 1;
      docViewer.rotatePages(pagesIndexToRotate, rotation)

       

  • 替换页面

    将目标文档中的指定页面用另一个文档的页面替换。

    • 以下是替换页面的步骤:

      1. 移除目标文件需要被替换的页码。
      2. 将替换页面插入原文档被删除的位置,完成页面的替换。

      以下是替换页面的示例代码:

      // 移除文档的第一页。
      docViewer.removePages([0])
      
      // 将另一份文档的第一页插入原文档的第一页位置,完成替换。
      const file = {...} // File文件对象。
      const pageIndexToInsert = 0
      const pagesIndexToInsert = 'all' // 插入PDF页面的范围。
      
      docViewer.insertPages(file, pageIndexToInsert, pagesIndexToInsert)

       

  • 提取页面

    提取文档中的页面。

    • // 将原文档的第一页、第三页和第四页提取到新建文档。
      const pagesIndexToExtract = [1, '3-4'] // 提取页面的范围。
      const data = await docViewer.extractPages(pagesIndexToExtract)
      
      // 你可以将blob保存到文件或上传到服务器
      const blob = new Blob([data], { type: 'application/pdf' });

       

  • 移动页面

    移动文档中的页面。

    • // 将文档的第一页移动到第二页。
      const pagesIndexToMove = [0]
      const targetPageIndex = 2
      docViewer.movePages(pagesIndexToMove, targetPageIndex)

       

  • 复制页面

    复制文档中的页面。

    // 复制文档的第一页。
    const pagesIndexToCopy = [0]
    docViewer.copyPages(pagesIndexToCopy)

     

 

标签:Web,const,ComPDFKit,插入,文档,docViewer,PDF,第一页,页面
From: https://www.cnblogs.com/ComPDKit/p/18021217/add-pdf-document-editor-to-web-app

相关文章

  • Burp Suite Professional 2023.12.1.5 (macOS, Linux, Windows) - Web 应用安全、测试
    BurpSuiteProfessional2023.12.1.5(macOS,Linux,Windows)-Web应用安全、测试和扫描BurpSuiteProfessional,Test,find,andexploitvulnerabilities.请访问原文链接:BurpSuiteProfessional2024.1.1(macOS,Linux,Windows)-Web应用安全、测试和扫描,查看最新......
  • WebAssembly照亮了 Web端软件的未来
    WebAssembly的发展历程相对较短,但影响深远。WebAssembly于2015年首次发布,先驱技术是来自Mozilla的asm.js和GoogleNativeClient,最初的实现是基于asm.js的功能集。自2017年3月由WebAssembly创造的MVP的预览版发布以来,WebAssembly发展迅速,目前已经部署到了所有主流浏览器。到了......
  • 机器学习:公式推导与代码实现 PDF下载
    作为一门应用型学科,机器学习植根于数学理论,落地于代码实现。这就意味着,掌握公式推导和代码编写,方能更加深入地理解机器学习算法的内在逻辑和运行机制。本书在对全部机器学习算法进行分类梳理的基础之上,分别对监督学习单模型、监督学习集成模型、无监督学习模型、概率模型四个大类......
  • 如何用低代码实现批量导出PDF?
    前言事情是这样的,熟悉我们的朋友都知道,我司有一个为广大开发者朋友们提供学习帮助的地方,叫做新手训练营,具体的内容就是会针对初次接触葡萄城产品和技术的用户,通过2-3天的集中学习,采用直播授课的方式帮助用户快速上手产品,课后讲师会根据讲课内容布置相应的作业,对于所有提交作业......
  • EPLAN插件 - 设置导出PDF路径并自动备份PDF
    前言EPLAN导出PDF默认路径为$(DOC),此路径在嵌套很深,每次点都感觉很麻烦,在工作中经常会要求备份PDF图纸的要求。需要导出PDF要找到相应的文件然后复制到指定的文件夹,总感觉非常的麻烦。于是写了这个插件。此插件设置导出PDF的路径在项目文件同级文件夹中新建PDF文件夹,同时可以设置......
  • Blazor WebApp配置应用基路径PathBase
    BlazorWebApp配置应用基路径PathBase在一个设备数据管理软件系统中,根据生命周期和应用场景不同,可能会划分几个独立的软件子项目。在部署到的时候,可以采用不同的端口号来访问不同的软件子项目,也可以采用统一的端口号和不同的应用基路径来访问不同的软件子项目。基本实现方案:1,......
  • 【Azure Webjob + Redis】WebJob一直链接Azure Redis一直报错 Timeout Exception
    问题描述运行在AppService上的Webjob连接AzureRedis出现TimeoutException。 错误截图: 参考AzureRedis对于超时问题的排查建议,在修改MinThread后,问题依旧。流量突增和线程池配置流量激增时,如果 ThreadPool  设置不佳,则可能导致对Redis服务器已发送但尚未在客......
  • Blazor WebAssembly 本地调试时如何将项目运行在子目录
    假设项目名为MyApp,想要运行的子目录名也叫MyAppMyApp.csproj<PropertyGroup> <StaticWebAssetBasePath>MyApp</StaticWebAssetBasePath></PropertyGroup>Properties/launchSettings.json"https":{"commandName":"Projec......
  • 记录--你还在使用websocket实现实时消息推送吗?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在日常的开发中,我们经常能碰见服务端需要主动推送给客户端数据的业务场景,比如数据大屏的实时数据,比如消息中心的未读消息,比如聊天功能等等。本文主要介绍SSE的使用场景和如何使用SSE。服务端向客户端推送......
  • Web技术演化
    Web技术演化1.简单网站静态页面Web技术在最初阶段,网站的主要内容是静态的,大多站点托管在ISP上,由文字和图片组成,制作和表现形式也是以表格为主。多媒体阶段随着技术的不断发展,音频、视频、Flash等多媒体技术诞生了。CGI阶段CGI定义了Web服务器与外部应用程序之间的通信接口......