Demo: 实现PDF加水印以及自定义水印样式

实现PDF加水印以及自定义水印样式

在这里插入图片描述

<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) // 水印旋转角度// PDF 下载
const addWatermark = async (rotate) => {/*2.获取pdf文件的arrarybuffer文件流可请求后台接口返回的base64文件流,然后转成arrayBuffer类型可访问前端项目中的本地文件,不能直接访问服务器链接文件,会有跨域问题*/try {// 1.通过url获取pdf文件的arrarybuffer文件流const existingPdfBytes = await fetch(pdfFileEnd.value).then((res) => res.arrayBuffer());// 2.将arraybuffer数据转成pdf文档const pdfDoc = await PDFDocument.load(existingPdfBytes);// 3.1  内置字体(不支持中文), 如果水印中不包含中文可直接用内置字体(不支持中文)// 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, //字体(内置/自定义)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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630591.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

敏捷开发之Scrum

敏捷开发是什么 我们一般习惯用瀑布模型&#xff0c;它以文档为驱动&#xff0c;将软件生命周期划分为固定的六个基本活动&#xff0c;并且规定了它们自上而下、相互衔接的次序&#xff0c;如同瀑布流水&#xff0c;逐级下落。 那什么是敏捷开发呢&#xff1f; ​ 敏捷开发的核…

解决前端笔记本电脑屏幕显示缩放比例125%、150%对页面大小的影响问题

近期在工作中遇到一个问题&#xff0c;记录一下&#xff0c;在项目上线之后&#xff0c;遇到一个问题&#xff0c;即缩放到90%时&#xff0c;页面字体比默认的100%字体大&#xff0c;一开始毫无头绪&#xff0c;经过一番的Google...Google...Google....&#xff0c;终于找到了解…

代码随想录算法训练营第五天| 总结数组专题

数组&#xff1a;二分查找、双指针&#xff08;包括快慢指针&#xff09;、滑动窗口、模拟 链表&#xff1a;双指针、三指针、虚拟头指针、复杂指针操作画图明确每一步&#xff08;标好次序&#xff09; 数组 代码随想录总结的很好&#xff0c;如下图。我再结合自己的一些理解…

AI 的未来是开源的

想象一下&#xff0c;在未来&#xff0c;人工智能不会被锁在公司的金库里&#xff0c;而是由全球创新者社区一砖一瓦地在开放中构建的。协作&#xff0c;而不是竞争&#xff0c;推动进步&#xff0c;道德考虑与原始绩效同等重要。这不是科幻小说&#xff0c;而是人工智能发展核…

【PostgreSQL内核学习(二十四) —— (ALTER MATERIALIZED VIEW)】

ALTER MATERIALIZED VIEW 概述源码解析修改物化视图的属性和行为AlterTableStmt 结构体AlterTableMoveAllStmt 结构体 重命名RenameStmt 结构体 设置对象依赖于扩展AlterObjectDependsStmt 结构体 测试用例 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&…

C++I/O流——(4)格式化输入/输出(第二节)

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 含泪播种的人一定能含笑收获&#xff…

73.网游逆向分析与插件开发-背包的获取-物品数据的初步数据分析

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;72.网游逆向分析与插件开发-背包的获取-项目需求与需求拆解-CSDN博客 然后首先找切入点&#xff1a; 通过药物来当切入点&#xff0c;药物比较好使用&#xff0c;然后鼠标放到药物上它有名字、种类、…

Java注解技术

1. 注解的简介 从JDK 5开始&#xff0c;Java增加了对元数据&#xff08;MetaData&#xff09;的支持&#xff0c;也就是注解&#xff08;Annotation&#xff09;。 注解就是代码里的特殊标记&#xff0c;这些标记可以在编译、类加载、运行时被读取&#xff0c;并执行相应的处…

【分布式技术】分布式存储ceph之RGW接口

目录 1、对象存储概念 2、创建 RGW 接口 //在管理节点创建一个 RGW 守护进程 #创建成功后默认情况下会自动创建一系列用于 RGW 的存储池 #默认情况下 RGW 监听 7480 号端口 //开启 httphttps &#xff0c;更改监听端口 #更改监听端口 ​ //创建 RadosGW 账户 …

【Go学习】macOS+IDEA运行golang项目,报command-line-arguments,undefined

写在前面的话&#xff1a;idea如何配置golang&#xff0c;自行百度 问题1&#xff1a;通过idea的terminal执行go test报错 ✘ xxxxxmacdeMacBook-Pro-3  /Volumes/mac/.../LearnGoWithTests/hello  go test go: go.mod file not found in current directory or any parent …

【LeetCode热题100】【子串】和为 K 的子数组

题目 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2示例 2&#xff1a; 输入&#xff1a;nums [1,…

Jet Brains 2023 开发者生态系统现状

一、前言 今天刷到Jet Brains官方发布了2023 开发者生态系统现状&#xff0c;这个相信大家都不陌生&#xff0c;我们的开发工具IDEA就是它旗下的。 分析的蛮不错的&#xff0c;今天整理一下&#xff0c;和大家一起分享。 有想法大家可以一起交流一下哈&#xff01; 有兴趣的…

unity SqLite读取行和列

项目文件 链接&#xff1a;https://pan.baidu.com/s/1BabHvQ-y0kX_w15r7UvIGQ 提取码&#xff1a;emsg –来自百度网盘超级会员V6的分享 using System.Collections; using System.Collections.Generic; using UnityEngine; using Mono.Data.Sqlite; using System; using Syste…

LeetCode刷题--- 买卖股票的最佳时机含冷冻期

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 ​​​​​​http://t.csdnimg.cn/6AbpV 数据结构与算法 ​​​http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述动…

一个月学会Python,零基础入门数据分析

在数据分析领域&#xff0c;python是一个绕不开的知识和工具&#xff0c;如果不会用python就很难说自己会数据分析&#xff0c;但是最近很多想要入门数据分析的小白经常问我&#xff0c;Python怎么入门&#xff1f;Python虽然被称作是“最简洁的语言”&#xff0c;但是它终究还…

Jenkins 敏感信息实战指南

在 Jenkins 中&#xff0c;安全地管理敏感信息对于构建和部署过程至关重要。本实战指南将详细介绍如何添加凭据、使用 HashiCorp Vault 插件&#xff0c;并通过创建 Pipeline 脚本、在 shell 脚本中使用&#xff0c;以及在 Python 脚本中使用来管理敏感信息。 步骤 1: 添加凭据…

一文读懂——如何把网站改成HTTPS访问

HTTPS&#xff08;全称为Hyper Text Transfer Protocol Secure&#xff09;是一种在计算机网络上进行安全通信的协议&#xff0c;它通过SSL/TLS证书对传输数据进行加密&#xff0c;确保了用户与服务器之间信息交换的私密性和完整性。 获取SSL/TLS证书 选择证书类型&#xff1a…

构建高效数据生态:数据库、数据仓库、数据湖、大数据平台与数据中台解析_光点科技

在数字化的浪潮中&#xff0c;一套高效的数据管理系统是企业竞争力的核心。从传统的数据库到现代的数据中台&#xff0c;每一种技术都在数据的旅程中扮演着关键角色。本文将深入探讨数据库、数据仓库、数据湖、大数据平台以及数据中台的功能和价值&#xff0c;帮助您构建一个符…

《C++入门篇》——弥补C不足

文章目录 前言一.命名空间二.缺省参数三.函数重载四.引用4.1引用做参数4.2引用做返回值 五.内联函数六.小语法6.1auto6.2范围for6.3空指针 前言 C是业内一门久负盛名的计算机语言&#xff0c;从C语言发展起来的它&#xff0c;不仅支持C语言的语法&#xff0c;还新添加了面向对…