搜索
  • Next.js Tutorial: Build Next.js Web PDF Viewer
  • 发布于 2个月前
  • 278 热度
    0 评论

Next.js 是一个多功能的 React 框架，它提供了构建快速网站所需的所有基本工具。与传统的 React 相比，Next.js 提供了几个关键功能和优势，包括服务器端渲染、更高的性能和速度、轻松的设置和部署、更好的 SEO 优化以及稳定灵活的 API。

 

在本 Next.js 教程中，我们将指导您使用 Next.js 框架结合ComPDFKit for Web构建 PDF 查看器。按照本教程开始为您的网页创建 PDF 查看器应用程序。


构建 Next.js 应用的要求

 

要开始使用 Next.js 项目，请确保您满足以下先决条件：

 

 

下载 ComPDFKit 的 Next.js PDF Viewer SDK 包

 

为了方便将 PDF 查看功能集成到 Next.js 应用程序中，请下载 ComPDFKit SDK。有两种方法可以获取此包：

通过这些步骤，您应该已经做好充分准备，可以开始使用 Next.js 和 ComPDFKit 开发强大的 PDF 查看器了。

 

 

获取 Next.js ComPDFKit PDF Viewer 的免费许可证

 

ComPDFKit for Web的许可证可以直接在其网站上获取。准确获取许可证密钥对于许可证的应用至关重要。在您收到的电子邮件中找到许可证密钥。如果它是XML文件，则为离线许可证；否则，它是在线许可证。

 

离线许可证： 

// Import the JS file of ComPDFKit Web Demo.
import ComPDFKitViewer from "/@compdfkit/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: '<Input your license here>'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Demo');
  })


在线许可：

在线授权支持动态更新授权信息，当我们为您提供新的服务时，您可以实时获得更新，无需进行任何修改。

 

 

步骤 1：创建新的 Next.js 项目

 

  1. 1. 创建一个新的 Next.js 项目： 


npx create-next-app@latest

 

  1. 2. 在设置过程中，Next.js 会提示您一系列问题，让您自定义项目。对于此示例，我们通常使用默认值。
  2. 将目录更改为 compdfkit-app： 


cd compdfkit-app

 

 

第 2 步：添加 ComPDFKit 的 PDF 查看器库

 

  1. 1. 使用 npm 安装 webviewer 作为依赖项： 



npm i @compdfkit_pdf_sdk/webviewer --save

 

  1. 2. 将包含运行 ComPDFKit Web 演示所需的静态资源文件的“ webviewer ”文件夹添加到项目的公共资源文件夹中。需要复制的文件夹是node_modules/@compdfkit_pdf_sdk/webviewer/dist。 



cp -r ./node_modules/@compdfkit_pdf_sdk/webviewer/dist ./public/webviewer

 

 

步骤 3：使用 Next.js PDF 查看器查看 PDF

 

  1. 1. 将您想要显示的 PDF 文档添加到public/webviewer/example目录。您可以使用我们的演示文档作为示例。
  2. 2. 在使用Web SDK时，需要使用path参数告诉它复制的静态资源在哪里，如果没有，则会相对于当前路径。

如果您在项目设置期间选择了 JavaScript，请将以下代码添加到您的app/page.js文件中： 


'use client';
import React, { useRef, useEffect } from 'react';
import Head from 'next/head'
import Webviewer from '@compdfkit_pdf_sdk/webviewer';

export default function Home() {
  const viewer = useRef(null);
  let docViewer = null;

  useEffect(() => {
    Webviewer.init({
      path: '/',
      pdfUrl: './example/developer_guide_web.pdf',
      license: '<Input your license here>',
    }, viewer.current).then((instance) => {
      docViewer = instance.docViewer;
      docViewer.addEvent('documentloaded', async () => {
        console.log('ComPDFKit Web Demo loaded');
      })
    })
  });

  return (
    <>
      <Head>
        <title>ComPDFKit Web Viewer</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div id="webviewer" ref={viewer} style={{ height: '100vh', overflow: 'hidden' }}></div>
    </>
  )
}


初始化 WebViewer 时，它会返回一个 WebViewer 实例，该实例可用于调用许多有用的 API，用于文档创建、操作、注释、协作等。深入了解 WebViewer 的全面功能，请阅读文档。

最后，样式选项帮助我们在安装 WebViewer 的查看器的 div 元素上应用自定义 CSS，如宽度和高度。


  2. 3. 启动应用程序并在默认浏览器中打开它： 


npm run dev





	





	

 




	

		

			

				深入了解 WebViewer 的全面功能，请阅读文档。
			

			

			

		

	



        

            
            
        

    

    

        

            

                
    
                    
  • 
                        
    • 
                    
  • 
                        
                    
    • 
                

            

        

        

            

                 用户评论
            

            

               
            


                        

                                  
                           
                            
                        

        

    

    

        

            
        

        

            

                可能感兴趣的话题