實現(xiàn)PDF加水印以及自定義水印樣式

文章來源地址http://www.zghlxwxcb.cn/news/detail-802424.html

<template>
    <div>
        <button @click="previewHandle">預覽</button>
        <button @click="downFileHandle">下載</button>
        <el-input v-model="watermarkText" />
        <el-input v-model.number="watermarkrotate" />
        <iframe id="log_frame" class="log-iframe" frameborder="0" :src="pdfPreviewUrl"></iframe>
    </div>
</template>
  
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { degrees, PDFDocument, rgb, StandardFonts } from "pdf-lib";
import fontkit from '@pdf-lib/fontkit'

const pdfFileEnd = ref('http://111.229.162.189:8003/file/construction/2024_01_08/三高共管對接接口(5)_14ba6d68.pdf')
const pdfPreviewBlob = ref()
const pdfPreviewUrl = ref('/pdf/web/viewer.html?file=http://111.229.162.189:8003/file/construction/2024_01_08/三高共管對接接口(5)_14ba6d68.pdf')

const watermarkText = ref('2024-01-17') // 水印文字
const watermarkrotate = ref(45) // 水印旋轉(zhuǎn)角度

// PDF 下載
const addWatermark = async (rotate) => {
    /*2.獲取pdf文件的arrarybuffer文件流
     可請求后臺接口返回的base64文件流，然后轉(zhuǎn)成arrayBuffer類型
     可訪問前端項目中的本地文件，不能直接訪問服務器鏈接文件，會有跨域問題*/
    try {
        // 1.通過url獲取pdf文件的arrarybuffer文件流
        const existingPdfBytes = await fetch(pdfFileEnd.value).then((res) => res.arrayBuffer());
        // 2.將arraybuffer數(shù)據(jù)轉(zhuǎn)成pdf文檔
        const pdfDoc = await PDFDocument.load(existingPdfBytes);
        // 3.1  內(nèi)置字體（不支持中文）, 如果水印中不包含中文可直接用內(nèi)置字體(不支持中文)
        // const fontkitFile = await pdfDoc.embedFont(StandardFonts.Helvetica);
        // 3.2 自定義字體，如不需要使用自定義字體可以將這一段全部注釋掉，也不用下載自定義字體文件和自定義字體工具fontkit
        // 將自己下載好的.ttf文件放置項目中，然后訪問文件路徑(不支持訪問本地文件)
        // const fontBytes = await fetch("@/assets/DS-DIGIT.TTF").then((res) => res.arrayBuffer());
        // pdfDoc.registerFontkit(fontkit); // 自定義字體掛載、fontkit為自定義字體注冊工具
        // const fontkitFile = await pdfDoc.embedFont(fontBytes);
        //  4. 為每頁pdf添加文字水印
        const pages = pdfDoc.getPages();
        for (let i = 0; i < pages.length; i++) {
            const noPage = pages[i];
            const { width, height } = noPage.getSize();
            for (let i = 0; i < 10; i++) {
                for (let j = 0; j < 3; j++) {
                    noPage.drawText(watermarkText.value, {
                        x: 230 * j + 36,
                        y: (height / 4) * i + 20,
                        size: 20,
                        // font: fontkitFile, //字體（內(nèi)置/自定義）
                        color: rgb(0.46, 0.53, 0.6),
                        rotate: degrees(rotate),
                        opacity: 0.3,
                    });
                }
            }
        }
        //5. 保存pdf文件的unit64Arrary文件流
        const pdfBytes = await pdfDoc.save();
        pdfPreviewBlob.value = pdfBytes
        // const blob = new Blob([pdfBytes], { type: 'application/pdf' });
        // const url = window.URL.createObjectURL(blob);
        // pdfPreviewUrl.value = '/pdf/web/viewer.html?file=' + url
        // saveByteArray("水印PDF.pdf", pdfBytes);
    } catch (error) {
        console.log("文件下載失?。?);
    }
}
// 預覽文件
const previewHandle = async () => {
    console.log(typeof(watermarkrotate.value));
    await addWatermark(watermarkrotate.value)
    const blob = new Blob([pdfPreviewBlob.value], { type: 'application/pdf' });
    const url = window.URL.createObjectURL(blob);
    pdfPreviewUrl.value = '/pdf/web/viewer.html?file=' + url
}
// 下載文件
const downFileHandle = () => {
    var blob = new Blob([pdfPreviewBlob.value], { type: "application/pdf" });
    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.download = '水印pdf';
    link.click();
}

onMounted(() => {
    addWatermark()
})
</script>

<style lang="scss" scoped>
.log-iframe {
    width: 800px;
    height: 520px;
}
</style>

到了這里，關(guān)于Demo: 實現(xiàn)PDF加水印以及自定義水印樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！