js打印pdf时添加水印

在JavaScript中打印PDF并添加水印，通常涉及使用HTML5的Canvas API来生成水印图像，并将其叠加到PDF页面上。以下是实现这一功能的基本步骤和相关概念：

基础概念

Canvas API：HTML5提供的用于绘制图形和处理图像的API。
PDF.js：一个用于解析和渲染PDF文件的JavaScript库。
水印：一种标记，通常用于标识文档的所有权或版权信息。

实现步骤

加载PDF文件：使用PDF.js加载并渲染PDF文件。
创建水印图像：使用Canvas API创建一个包含水印文本或图像的Canvas元素。
叠加水印：将水印图像叠加到PDF页面的指定位置。
打印PDF：使用浏览器的打印功能或PDF.js的打印功能输出带有水印的PDF。

示例代码

以下是一个简单的示例，展示如何使用PDF.js和Canvas API在PDF上添加水印并打印：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF Watermark</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
</head>
<body>
    <input type="file" id="pdf-file" accept="application/pdf">
    <button onclick="printPdfWithWatermark()">Print PDF with Watermark</button>

    <script>
        async function printPdfWithWatermark() {
            const fileInput = document.getElementById('pdf-file');
            const file = fileInput.files[0];
            const arrayBuffer = await file.arrayBuffer();
            const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
            const page = await pdf.getPage(1);

            const viewport = page.getViewport({ scale: 1.5 });
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            await page.render(renderContext).promise;

            // Add watermark
            context.globalAlpha = 0.5;
            context.font = '20px Arial';
            context.fillStyle = 'red';
            context.rotate(-Math.PI / 4);
            context.fillText('Watermark', canvas.width / 2 - 50, canvas.height / 2);

            // Convert canvas to image
            const watermarkImage = canvas.toDataURL('image/png');

            // Create a new PDF with watermark
            const newPdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
            const newPage = await newPdf.getPage(1);
            const newViewport = newPage.getViewport({ scale: 1.5 });
            const newCanvas = document.createElement('canvas');
            const newContext = newCanvas.getContext('2d');
            newCanvas.height = newViewport.height;
            newCanvas.width = newViewport.width;
            await newPage.render({ canvasContext: newContext, viewport: newViewport }).promise;
            newContext.globalAlpha = 0.5;
            newContext.drawImage(watermarkImage, 0, 0, newCanvas.width, newCanvas.height);

            // Convert new canvas to PDF
            const newPdfData = newCanvas.toDataURL('image/png');
            const pdfDoc = await pdfjsLib.getDocument({ data: atob(newPdfData.split(',')[1]), format: 'png' }).promise;

            // Print the new PDF
            const printWindow = window.open('', '', 'height=400,width=600');
            printWindow.document.write('<iframe src="' + pdfDoc.url + '" style="border: none; width: 100%; height: 100%;"></iframe>');
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
        }
    </script>
</body>
</html>