vue pdf-lib

### 集成和使用 `pdf-lib` 库于 Vue 项目

#### 安装依赖包
为了能够在 Vue 项目中使用 `pdf-lib`，首先需要通过 npm 或 yarn 来安装此库。

npm install pdf-lib

或者如果偏好使用 yarn：

yarn add pdf-lib

#### 创建 PDF 处理服务
创建一个新的 JavaScript 文件用于封装与 `pdf-lib` 的交互逻辑。这有助于保持组件的简洁并促进代码重用。

// src/services/PdfService.js
import { PDFDocument, rgb } from 'pdf-lib';
import fs from 'fs';

export async function createPdfWithText(textContent) {
    const existingPdfBytes = await fetch('/path/to/existing.pdf').then(res => res.arrayBuffer());
    
    // Load a PDFDocument from the existing PDF bytes
    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    
    // Embed the Helvetica font
    const helveticaFont = await pdfDoc.embedFont('Helvetica');
    
    // Get the first page of the document
    const pages = pdfDoc.getPages();
    const firstPage = pages[0];
    
    // Draw Hello World halfway across and down the first page
    firstPage.drawText(textContent, {
        x: 50,
        y: firstPage.getSize().height / 2,
        size: 30,
        font: helveticaFont,
        color: rgb(0, 0, 0),
    });
    
    // Serialize the PDFDocument to bytes (a Uint8Array)
    const pdfBytes = await pdfDoc.save();

    return new Blob([pdfBytes], { type: "application/pdf" });
}

注意这里假设有一个现有的PDF文件路径 `/path/to/existing.pdf`；实际应用时应替换为真实的URL或本地资源位置[^1]。

#### 使用自定义服务在组件内操作 PDF
接下来，在任何 Vue 组件里调用上述的服务函数来处理 PDF 并展示结果。

<template>
<div>
    <button @click="generateAndShowPdf">Generate PDF</button>
    <iframe v-if="pdfUrl" :src="pdfUrl" width="100%" height="600px"></iframe>
</div>
</template>

<script>
import { ref } from 'vue';
import { createPdfWithText } from '../services/PdfService';

export default {
    setup() {
        let pdfUrl = ref(null);

        const generateAndShowPdf = async () => {
            try {
                const generatedPdfBlob = await createPdfWithText('Hello World!');
                pdfUrl.value = URL.createObjectURL(generatedPdfBlob);
            } catch(error){
                console.error("Failed to generate PDF", error);
            }
        };

        return {
            generateAndShowPdf,
            pdfUrl
        };
    },
};
</script>

这段代码展示了如何在一个按钮点击事件处理器中调用 `createPdfWithText()` 函数，并将返回的结果作为 iframe 中显示的内容源[^2]。