如何使用ComPDFKit Web SDK添加線上編輯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)