拆分PDF.html 办公小工具

将下面的脚本拷贝放到一个空白的html文件中,然后保存,通过浏览器打开后就可以拆分pdf文件了。

拆分PDF.html

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>PDF拆分工具</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> 
    <style>
        .container { max-width: 800px; margin: 20px auto; padding: 20px; }
        .drop-zone { border: 2px dashed #ccc; padding: 20px; text-align: center; }
        #pageInput { width: 300px; padding: 5px; margin: 10px 0; }
        #status { color: #666; margin: 10px 0; }
        #splitBtn { background: #2196F3; color: white; padding: 10px 20px; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <div class="drop-zone" id="dropZone">
            拖拽PDF文件至此 或 <input type="file" id="fileInput" accept=".pdf">
        </div>
        <input type="text" id="pageInput" placeholder="输入页码范围 (如: 1-5,7,9-12)">
        <div id="status">等待文件上传...</div>
        <button id="splitBtn" onclick="splitPDF()">开始拆分</button>
    </div>
 
<script>
let selectedFile = null;
 
// 文件处理 
document.getElementById('dropZone').ondragover  = (e) => {
    e.preventDefault(); 
    e.target.style.borderColor  = '#2196F3';
};
 
document.getElementById('dropZone').ondrop  = (e) => {
    e.preventDefault(); 
    const file = e.dataTransfer.files[0]; 
    if(file.type  === 'application/pdf') {
        selectedFile = file;
        updateStatus(`已选择文件: ${file.name}`); 
    }
};
 
document.getElementById('fileInput').onchange  = (e) => {
    const file = e.target.files[0]; 
    if(file.type  === 'application/pdf') {
        selectedFile = file;
        updateStatus(`已选择文件: ${file.name}`); 
    }
};
 
// 核心拆分逻辑 
async function splitPDF() {
    if(!selectedFile) return alert('请先选择PDF文件');
    const pages = parsePageRange(document.getElementById('pageInput').value); 
    if(pages.length  === 0) return alert('请输入有效页码范围');
 
    try {
        const pdfBytes = await selectedFile.arrayBuffer(); 
        const pdfDoc = await PDFLib.PDFDocument.load(pdfBytes); 
        const newPdf = await PDFLib.PDFDocument.create(); 
        
        // 复制指定页面 
        const copiedPages = await newPdf.copyPages(pdfDoc,  pages.map(p  => p-1));
        copiedPages.forEach(page  => newPdf.addPage(page)); 
 
        // 生成新文件 
        const newPdfBytes = await newPdf.save(); 
        saveAs(new Blob([newPdfBytes], {type: 'application/pdf'}), 
              `拆分结果_${selectedFile.name}`); 
        updateStatus("拆分完成,开始下载...");
    } catch (error) {
        console.error(' 拆分失败:', error);
        alert('文件处理失败,请检查PDF格式');
    }
}
 
// 页码解析器 (支持格式: 1-5,7,9-12)
function parsePageRange(input) {
    const pages = new Set();
    const ranges = input.split(','); 
    
    ranges.forEach(range  => {
        const match = range.match(/^(\d+)(?:-(\d+))?$/); 
        if(match) {
            const start = parseInt(match[1]);
            const end = match[2] ? parseInt(match[2]) : start;
            for(let i = start; i <= end; i++) {
                pages.add(i); 
            }
        }
    });
    return Array.from(pages).sort((a,b)  => a - b);
}
 
function updateStatus(text) {
    document.getElementById('status').innerHTML  = text;
}
</script>
</body>
</html>
相关推荐
没差c3 天前
RetrofitClient写接口、导包、配置、路径
java·spring boot·okhttp
事圆则缓13 天前
OkHttp + Retrofit 协作原理
okhttp·retrofit
降临-max16 天前
接口自动化(TestNG+OKHttp)
软件测试·okhttp·自动化·testng
吴声子夜歌16 天前
Java扩展——OkHttp
java·开发语言·okhttp
额鹅恶饿呃17 天前
Asynchronous JavaScript And XML(异步的JS和XML )
okhttp
泡海椒17 天前
JQuick-Curl 性能分析:并发场景下的性能表现与调优,第三方接口调用不只要快写也要稳跑
java·开发语言·okhttp
泡海椒17 天前
JQuick-Curl 二次开发:自定义解析器、扩展点开发指南,如何把框架能力真正变成团队资产
java·开发语言·okhttp·maven
摇滚侠18 天前
《SpringBoot 3:入门与应用实战》第 9 章 跨域问题 阅读笔记 27
spring boot·笔记·okhttp
刘广睿20 天前
断点续传与分片下载是怎么实现的?Range 请求在视频下载中的工程实践
okhttp·ffmpeg·音视频·下载·python3.11
泡海椒25 天前
JQuick-Curl vs RestTemplate / OkHttp / OpenFeign:框架选型对比,谁更适合第三方接口调用?
okhttp