下载pdf,并且加水印

最新推荐文章于 2025-11-24 10:21:24 发布
原创最新推荐文章于 2025-11-24 10:21:24 发布 · 388 阅读
CC 4.0 BY-SA版权
文章标签：
<!DOCTYPE html>
<html>
<head>
    <title>PDF红色水印工具</title>
    <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .container { max-width: 600px; }
        input, button { margin: 10px 0; padding: 10px; width: 100%; }
        #status { margin: 10px 0; padding: 10px; border-radius: 5px; }
        .loading { background: #e3f2fd; color: #1565c0; }
        .success { background: #e8f5e8; color: #2e7d32; }
        .error { background: #ffebee; color: #c62828; }
    </style>
</head>
<body>
    <div class="container">
        <h2>PDF红色水印添加工具</h2>
        <p>选择PDF文件，系统会自动添加红色"水印"文字</p>
        
        <input type="file" id="pdfInput" accept=".pdf" />
        <button onclick="addWatermark()">添加红色水印并下载</button>
        <div id="status">请选择PDF文件</div>
    </div>

    <script>
        // 创建红色水印图片
        function createWatermarkImage() {
            const canvas = document.createElement('canvas');
            canvas.width = 400;
            canvas.height = 150;
            const ctx = canvas.getContext('2d');
            
            // 透明背景
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 设置红色文字样式
            ctx.font = 'bold 60px "Microsoft YaHei", Arial, sans-serif';
            ctx.fillStyle = 'rgba(255, 0, 0, 0.3)'; // 红色，30%透明度
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // 保存当前状态，旋转文字
            ctx.save();
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate(-45 * Math.PI / 180);
            ctx.fillText('水印', 0, 0);
            ctx.restore();
            
            return canvas.toDataURL('image/png');
        }

        async function addWatermark() {
            const fileInput = document.getElementById('pdfInput');
            const file = fileInput.files[0];
            const statusEl = document.getElementById('status');
            
            if (!file) {
                statusEl.textContent = '请先选择PDF文件';
                statusEl.className = 'error';
                return;
            }

            try {
                statusEl.textContent = '正在创建红色水印图片...';
                statusEl.className = 'loading';
                
                // 创建红色水印图片
                const imageDataUrl = createWatermarkImage();
                const imageResponse = await fetch(imageDataUrl);
                const imageBytes = await imageResponse.arrayBuffer();
                
                statusEl.textContent = '正在加载PDF文件...';
                
                // 加载PDF
                const pdfData = await file.arrayBuffer();
                const pdfDoc = await PDFLib.PDFDocument.load(pdfData);
                
                // 嵌入水印图片
                const watermarkImage = await pdfDoc.embedPng(imageBytes);
                const pages = pdfDoc.getPages();
                
                statusEl.textContent = `正在为 ${pages.length} 页添加红色水印...`;
                
                // 为每一页添加水印
                pages.forEach((page, pageIndex) => {
                    const { width, height } = page.getSize();
                    
                    // 在页面多个位置添加水印
                    const positions = [
                        { x: width * 0.25, y: height * 0.75, scale: 0.3 },
                        { x: width * 0.75, y: height * 0.25, scale: 0.3 },
                        { x: width * 0.5, y: height * 0.5, scale: 0.4 },
                    ];
                    
                    positions.forEach(pos => {
                        const imageWidth = watermarkImage.width * pos.scale;
                        const imageHeight = watermarkImage.height * pos.scale;
                        
                        page.drawImage(watermarkImage, {
                            x: pos.x - imageWidth / 2,
                            y: pos.y - imageHeight / 2,
                            width: imageWidth,
                            height: imageHeight,
                            opacity: 0.3 // 保持透明度
                        });
                    });
                });
                
                statusEl.textContent = '正在生成PDF文件...';
                
                // 保存PDF
                const pdfBytes = await pdfDoc.save();
                
                // 创建下载链接
                const blob = new Blob([pdfBytes], { type: 'application/pdf' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `红色水印_${file.name.replace('.pdf', '')}.pdf`;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
                
                statusEl.textContent = '✓ 红色水印添加成功！文件已开始下载。';
                statusEl.className = 'success';
                
            } catch (error) {
                console.error('处理错误:', error);
                statusEl.textContent = `错误: ${error.message}`;
                statusEl.className = 'error';
            }
        }

        // 文件选择监听
        document.getElementById('pdfInput').addEventListener('change', function() {
            const statusEl = document.getElementById('status');
            if (this.files[0]) {
                statusEl.textContent = `已选择: ${this.files[0].name}`;
                statusEl.className = 'success';
            }
        });
    </script>
</body>
</html>