微信小程序预览PDF、H5预览PDF、网页预览PDF,并添加专属文字水印

下载PDF.js

点击PDF.js下载地址

在这里插入图片描述

引入预览PDF 文件

// const url = new URL("./1.pdf", import.meta.url).href // 在本地项目获取pdf
// const url = "https://xxxx/05d833041f.pdf" // 在线上链接获取pdf
const url = query.get('url') // 在地址栏获取pdf
const query = new URLSearchParams(window.location.search.split('?')[1])
const watermarkText = query.get('text') || 'xxx' // 添加水印
const baseUrl = import.meta.env.BASE_URL; // 如果有更改基本路径则添加<!-- 注意引入路径是否正确 -->
<iframe :src="`${baseUrl}/pdfjs-dist/web/viewer.html?file=${url}&watermarkText=${watermarkText}`" width="100%" height="100%" frameborder="0"></iframe>

AddWatermark.js 添加水印的功能

(() => {// 添加水印window.AddWatermark = (ctx, that) => {// 水印数据 startconst watermarkPoint = [[45, 35], [310, 35], [45, 165], [310, 165],] // 水印坐标const query = new URLSearchParams(window.location.search.split('?')[1])let watermarkText = query.get('watermarkText')// 水印数据 end// 添加水印const scale = that.scalectx.font = `${16 / scale}px Microsoft Yahei`;// ctx.fillStyle = 'rgba(255, 0, 0, 1)'ctx.fillStyle = 'rgba(0, 0, 0, .1)'ctx.textAlign = 'center'ctx.textBaseline = 'middle'watermarkPoint.forEach(point => {ctx.translate( point[0] / scale,  point[1] / scale )ctx.rotate(-30 * Math.PI / 180)ctx.fillText(watermarkText, 0, 0)ctx.resetTransform()})}
})()

viewer.html引入添加水印的js

/pdfjs-dist/web/viewer.html

<!-- 注意引入路径是否正确 -->
<script src="../js/AddWatermark.js" type="module"></script>

更改/pdfjs-dist/web/viewer.mjs文件

  • 注释掉校验
// validateFileURL(file);
  • 搜索“await this.#renderDrawLayer();”关键字
    在这里插入图片描述
// 添加水印
AddWatermark(ctx, this)

使用的PDF.js版本

4.5.136

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

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

相关文章

【STM32项目】在FreeRtos背景下的实战项目的实现过程(一)

个人主页~ 这篇文章是我亲身经历的&#xff0c;在做完一个项目之后总结的经验&#xff0c;虽然我没有将整个项目给放出来&#xff0c;因为这项目确实也是花了米让导师指导的&#xff0c;但是这个过程对于STM32的实战项目开发都是非常好用的&#xff0c;可以说按照这个过程&…

c++ - 特殊类设计

文章目录 一、设计一个不允许拷贝的类二、设计一个只能在堆上实例对象的类三、设计一个只能在栈上创建对象的类四、设计一个不能被继承的类五、设计一个只能创建一个对象的类&#xff08;单例模式&#xff09; 一、设计一个不允许拷贝的类 1、方法一&#xff1a;将拷贝构造和赋…

多云网络部署存在挑战,F5分布式云应用简化方案解读

伴随着人工智能与云计算领域的深度融合与集中爆发&#xff0c;企业在多云环境中面临着挑战&#xff0c;包括复杂性、成本和风险的增加等……对于高度敏捷企业中的开发团队而言&#xff0c;传统网络的沉重运维成本和低效率将会成为发展的障碍。作为一家提供多云应用安全和应用交…

TcpSocket在切后台后如何保活

1&#xff09;TcpSocket在切后台后如何保活 2&#xff09;Magica Clothes 2插件与Burst编译问题 3&#xff09;粒子拖尾合批失败怎么办 4&#xff09;如何让射线追踪跟随我FPS游戏的十字准星进行移动 这是第398篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热门话题&…

flink文档刨析

flink任务运行方式 flink任务提交方式有3种 session、per-job、application三种 flink任务运行底座也有三种&#xff0c;Standalone、yarn、k8s 原则上一个flink任务运行的方式由3*39种&#xff0c;但是有些是没法搭配的 yarn&#xff1a;包括yarn-session 、yarn-per-job 、…

uni-app 吸顶方案总结

效果 页面级 uni.pageScrollTo 官方文档&#xff1a;https://uniapp.dcloud.net.cn/api/ui/scroll.html#pagescrollto 原生头部导航 uni.pageScrollTo({selector: #tabs,duration: 300 });(推荐)需要兼容自定义头部导航 <template><view id"demo1" :styl…

Vue框架学习笔记-6

Vue中的路由 Vue中的路由&#xff08;Routing&#xff09;是通过Vue Router这个官方提供的路由管理器来实现的。Vue Router允许你通过不同的URL访问应用中不同的页面&#xff08;组件&#xff09;&#xff0c;而无需重新加载页面。这对于构建单页应用&#xff08;SPA, Single …

【Hadoop】建立圈内组件的宏观认识

01存储02计算03调度04其他05回忆 众多组件们构建了大规模分布式计算和存储平台。本文介绍Hadoop生态圈中各个组件的主要功能和作用&#xff0c;辅助学者理解每个组件的定位和用途&#xff0c;从而建立对圈内组件的宏观认识。梳理清楚HDFS、MapReduce、YARN、Hive、HBase、Spark…

推出 SAM 2:适用于视频和图像的下一代 Meta Segment Anything 模型

继图像元分割模型(SAM) 取得成功之后&#xff0c;我们发布了SAM 2&#xff0c;这是一个用于在图像和视频中实时提示对象分割的统一模型&#xff0c;可实现最先进的性能。 为了秉承我们的开放科学方针&#xff0c;我们通过宽松的 Apache 2.0 许可证共享代码和模型权重。 我们还…

传奇游戏为何采用多渠道发布如何有效利用论坛资源?

揭秘传奇游戏多渠道发布策略&#xff0c;探讨手机游戏发布论坛如何助力品牌形象塑造 游戏发布平台|手机游戏发布平台|公益服游戏发布站 问题&#xff1a;传奇游戏为何采用多渠道发布策略&#xff1f;这些渠道各自有何优劣势&#xff1f; 回答&#xff1a;传奇游戏采用多渠道发…

Github 2024-08-14 C开源项目日报Top10

根据Github Trendings的统计,今日(2024-08-14统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10Objective-C项目1PHP项目1Python项目1PHP:流行的Web开发脚本语言 创建周期:4710 天开发语言:C, PHP协议类型:OtherStar数量:37340 …

JAVA中new Object对象占用多少字节,Java对象的组成是哪些?Java对象头的组成又是哪些,MarkWord是什么,有什么作用?

Java对象头的组成_java对象头结构-CSDN博客 JAVA中new Object对象占用多少字节&#xff0c;Java对象的组成是哪些&#xff1f;Java对象头的组成又是哪些&#xff0c;MarkWord是什么&#xff0c;有什么作用&#xff1f; 一、JAVA对象的结构组成 JAVA Object对象的结构组成&…

FreeRTOS的任务创建和删除

1、任务创建和删除的API函数 任务的创建和删除本质就是调用FreeRTOS的API函数。 和任务创建和删除有关的函数主要有三&#xff1a; xTaskCreate():动态方式创建任务。 xTaskCreateStatic():静态方式创建任务。 vTaskDelete():删除任务。 那又有思考了 2、动态方式创建任…

实验五之用Processing绘画

1.案例代码如下&#xff1a; import generativedesign.*; import processing.pdf.*; import java.util.Calendar; Tablet tablet; boolean recordPDF false; float x 0, y 0; float stepSize 5.0; PFont font; String letters "Sie hren nicht die folgenden Gesnge…

超级字符串技能:提升你的编码游戏

嘿嘿,uu们,今天咱们来详解字符函数与字符串函数,好啦,废话不多讲,开干&#xff01; 1.:字符分类函数 C语言中又一系列的函数是专门做字符分类的,也就是一个字符属于什么类型的字符的,这些函数的使用需要包含头文件ctype.h 这些函数的使用方法都十分类似,博主在这里就举两到三个…

【C语言篇】C语言常考及易错题整理DAY3

文章目录 选择题整形提升与算术转换左移右移操作符操作符优先级与结合性后置指针变量基本知识 编程题最大连续1的个数完全数计算单词倒排面试题.珠玑妙算两数之和 选择题 整形提升与算术转换 声明以下变量&#xff0c;则表达式: ch/i (f*d – i) 的结果类型为&#xff08; &…

<Qt> 系统 - 网络编程 | 音视频

目录 前言&#xff1a; 一、QUdpSocket &#xff08;一&#xff09;核心 API 概览 &#xff08;二&#xff09;设计一个UDP回显服务器 二、QTCPSocket &#xff08;一&#xff09;核心 API 概览 &#xff08;二&#xff09;设计一个TCP回显服务器 三、HTTP Client 四、…

msgqueue.hpp队列模块

目录 一.MsgQueue模块介绍 二.MsgQueue类的实现 成员变量 构造函数与析构函数 成员函数 参数设置函数 setArgs 参数获取函数 getArgs 三.MsgQueueMapper类的实现 成员变量 构造函数 成员函数 创建表格函数 createTable 删除表格函数 dropTable 插入数据函数 inse…

GPT-4o:开启多模态AI识别新纪元

GPT-4o功能简介 在人工智能的演变历程中&#xff0c;图像识别技术始终占据着核心地位。技术的发展日新月异&#xff0c;使得AI不仅能够识别图像内容&#xff0c;还能将其转化为文字描述。特别值得一提的是&#xff0c;OpenAI在春季发布的GPT-4o模型&#xff0c;将图像识别技术…

微软Detours Hook库编译与使用

Detours 是微软开发的一个强大的Windows API钩子库&#xff0c;用于监视和拦截函数调用。它广泛应用于微软产品团队和众多独立软件开发中&#xff0c;旨在无需修改原始代码的情况下实现函数拦截和修改。Detours 在调试、监控、日志记录和性能分析等方面表现出色&#xff0c;已成…