JSP中使用PDF.js实现pdf文件预览的方法

在JSP（JavaServer Pages）中使用PDF.js来实现PDF文件的预览，可以通过以下步骤来完成。PDF.js 是一个由Mozilla开发的JavaScript库，用于在Web浏览器中渲染PDF文件。

步骤1：准备PDF.js库

下载PDF.js：
- 你可以从PDF.js的GitHub页面下载最新的版本。
- 或者，你可以使用CDN链接来加载PDF.js库。
将PDF.js文件放在你的项目中：
- 如果你下载了PDF.js库，将其解压并放置在你的Web项目的适当目录中（例如，webapp/js/pdfjs）。

步骤2：创建JSP页面

在你的JSP页面中，你需要包含PDF.js库，并创建一个用于显示PDF文件的HTML元素。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>PDF.js PDF预览</title>  
    <!-- 使用CDN加载PDF.js库 -->  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>  
    <!-- 或者使用本地文件 -->  
    <!-- <script src="${pageContext.request.contextPath}/js/pdfjs/build/pdf.min.js"></script> -->  
    <style>  
        #pdfViewer {  
            width: 100%;  
            height: 600px;  
            border: 1px solid #000;  
        }  
    </style>  
</head>  
<body>  
    <h1>PDF.js PDF预览</h1>  
    <div id="pdfViewer"></div>  
  
    <script>  
        // PDF文件的URL（可以是相对路径或绝对路径）  
        const pdfUrl = "${pageContext.request.contextPath}/path/to/your/pdf-file.pdf";  
  
        // PDF.js worker文件（如果使用CDN，通常会自动加载）  
        // 如果使用本地文件，需要指定workerSrc  
        const pdfjsLib = window['pdfjs-dist/build/pdf'];  
        pdfjsLib.GlobalWorkerOptions.workerSrc = '${pageContext.request.contextPath}/js/pdfjs/build/pdf.worker.min.js';  
  
        // 异步函数来加载和渲染PDF文件  
        async function renderPDF(url) {  
            const loadingTask = pdfjsLib.getDocument(url);  
            const pdf = await loadingTask.promise;  
  
            // 获取第一页（你可以循环遍历所有页）  
            const page = await pdf.getPage(1);  
  
            // 获取页面的视口（viewport）  
            const viewport = page.getViewport({ scale: 1.5 });  
  
            // 准备一个canvas元素  
            const canvas = document.createElement('canvas');  
            const context = canvas.getContext('2d');  
            canvas.height = viewport.height;  
            canvas.width = viewport.width;  
  
            // 将canvas添加到页面中  
            const pdfViewer = document.getElementById('pdfViewer');  
            pdfViewer.innerHTML = ''; // 清空之前的内容  
            pdfViewer.appendChild(canvas);  
  
            // 渲染页面到canvas  
            const renderContext = {  
                canvasContext: context,  
                viewport: viewport  
            };  
            await page.render(renderContext).promise;  
        }  
  
        // 调用函数来渲染PDF  
        renderPDF(pdfUrl);  
    </script>  
</body>  
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>PDF.js PDF预览</title>  
    <!-- 使用CDN加载PDF.js库 -->  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>  
    <!-- 或者使用本地文件 -->  
    <!-- <script src="${pageContext.request.contextPath}/js/pdfjs/build/pdf.min.js"></script> -->  
    <style>  
        #pdfViewer {  
            width: 100%;  
            height: 600px;  
            border: 1px solid #000;  
        }  
    </style>  
</head>  
<body>  
    <h1>PDF.js PDF预览</h1>  
    <div id="pdfViewer"></div>  
  
    <script>  
        // PDF文件的URL（可以是相对路径或绝对路径）  
        const pdfUrl = "${pageContext.request.contextPath}/path/to/your/pdf-file.pdf";  
  
        // PDF.js worker文件（如果使用CDN，通常会自动加载）  
        // 如果使用本地文件，需要指定workerSrc  
        const pdfjsLib = window['pdfjs-dist/build/pdf'];  
        pdfjsLib.GlobalWorkerOptions.workerSrc = '${pageContext.request.contextPath}/js/pdfjs/build/pdf.worker.min.js';  
  
        // 异步函数来加载和渲染PDF文件  
        async function renderPDF(url) {  
            const loadingTask = pdfjsLib.getDocument(url);  
            const pdf = await loadingTask.promise;  
  
            // 获取第一页（你可以循环遍历所有页）  
            const page = await pdf.getPage(1);  
  
            // 获取页面的视口（viewport）  
            const viewport = page.getViewport({ scale: 1.5 });  
  
            // 准备一个canvas元素  
            const canvas = document.createElement('canvas');  
            const context = canvas.getContext('2d');  
            canvas.height = viewport.height;  
            canvas.width = viewport.width;  
  
            // 将canvas添加到页面中  
            const pdfViewer = document.getElementById('pdfViewer');  
            pdfViewer.innerHTML = ''; // 清空之前的内容  
            pdfViewer.appendChild(canvas);  
  
            // 渲染页面到canvas  
            const renderContext = {  
                canvasContext: context,  
                viewport: viewport  
            };  
            await page.render(renderContext).promise;  
        }  
  
        // 调用函数来渲染PDF  
        renderPDF(pdfUrl);  
    </script>  
</body>  
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>PDF.js PDF预览</title>  
    <!-- 使用CDN加载PDF.js库 -->  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>  
    <!-- 或者使用本地文件 -->  
    <!-- <script src="${pageContext.request.contextPath}/js/pdfjs/build/pdf.min.js"></script> -->  
    <style>  
        #pdfViewer {  
            width: 100%;  
            height: 600px;  
            border: 1px solid #000;  
        }  
    </style>  
</head>  
<body>  
    <h1>PDF.js PDF预览</h1>  
    <div id="pdfViewer"></div>  
  
    <script>  
        // PDF文件的URL（可以是相对路径或绝对路径）  
        const pdfUrl = "${pageContext.request.contextPath}/path/to/your/pdf-file.pdf";  
  
        // PDF.js worker文件（如果使用CDN，通常会自动加载）  
        // 如果使用本地文件，需要指定workerSrc  
        const pdfjsLib = window['pdfjs-dist/build/pdf'];  
        pdfjsLib.GlobalWorkerOptions.workerSrc = '${pageContext.request.contextPath}/js/pdfjs/build/pdf.worker.min.js';  
  
        // 异步函数来加载和渲染PDF文件  
        async function renderPDF(url) {  
            const loadingTask = pdfjsLib.getDocument(url);  
            const pdf = await loadingTask.promise;  
  
            // 获取第一页（你可以循环遍历所有页）  
            const page = await pdf.getPage(1);  
  
            // 获取页面的视口（viewport）  
            const viewport = page.getViewport({ scale: 1.5 });  
  
            // 准备一个canvas元素  
            const canvas = document.createElement('canvas');  
            const context = canvas.getContext('2d');  
            canvas.height = viewport.height;  
            canvas.width = viewport.width;  
  
            // 将canvas添加到页面中  
            const pdfViewer = document.getElementById('pdfViewer');  
            pdfViewer.innerHTML = ''; // 清空之前的内容  
            pdfViewer.appendChild(canvas);  
  
            // 渲染页面到canvas  
            const renderContext = {  
                canvasContext: context,  
                viewport: viewport  
            };  
            await page.render(renderContext).promise;  
        }  
  
        // 调用函数来渲染PDF  
        renderPDF(pdfUrl);  
    </script>  
</body>  
</html>