Vue.js组件开发-实现导出PDF文件可自定义添加水印及水印样式方向
使用 Vue 实现导出 PDF 文件并添加水印,同时支持设置水印样式、方向和自定义水印内容。
步骤
- 安装依赖:使用
html2canvas将 HTML 内容转换为 canvas,使用jspdf生成 PDF 文件。 - 创建 Vue 组件:在组件中实现水印生成、HTML 转 canvas、canvas 转 PDF 的功能。
- 设置水印样式和方向:支持自定义水印内容、字体、颜色、透明度、旋转角度等。
- 导出 PDF 文件:将带有水印的 HTML 内容导出为 PDF 文件。
详细代码及注释
<template><div><!-- 输入水印内容 --><input v-model="watermarkText" placeholder="请输入水印内容" /><!-- 选择水印旋转角度 --><select v-model="watermarkAngle"><option value="0">0°</option><option value="30">30°</option><option value="45">45°</option><option value="60">60°</option><option value="90">90°</option></select><!-- 导出 PDF 按钮 --><button @click="exportPDF">导出 PDF</button><!-- 要导出的内容 --><div id="content" ref="contentRef"><h1>这是要导出的内容</h1><p>这里可以是任意 HTML 内容。</p></div></div>
</template><script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';export default {data() {return {// 水印内容watermarkText: '水印内容',// 水印旋转角度watermarkAngle: '45',};},methods: {// 生成水印 canvasgenerateWatermark() {// 创建一个新的 canvas 元素const canvas = document.createElement('canvas');// 设置 canvas 的宽度和高度canvas.width = 200;canvas.height = 100;// 获取 canvas 的 2D 绘图上下文const ctx = canvas.getContext('2d');// 保存当前的绘图状态ctx.save();// 设置文本对齐方式为居中ctx.textAlign = 'center';// 设置文本垂直对齐方式为中间ctx.textBaseline = 'middle';// 设置字体样式ctx.font = '20px Arial';// 设置文本颜色ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';// 旋转画布ctx.rotate((this.watermarkAngle * Math.PI) / 180);// 在画布上绘制水印文本ctx.fillText(this.watermarkText, canvas.width / 2, canvas.height / 2);// 恢复之前保存的绘图状态ctx.restore();return canvas;},// 导出 PDF 文件async exportPDF() {try {// 生成水印 canvasconst watermarkCanvas = this.generateWatermark();// 将水印 canvas 转换为 base64 格式的图片const watermarkImage = watermarkCanvas.toDataURL('image/png');// 获取要导出的内容元素const content = this.$refs.contentRef;// 使用 html2canvas 将 HTML 内容转换为 canvasconst canvas = await html2canvas(content);// 获取 canvas 的宽度和高度const imgWidth = 210;const pageHeight = 295;const imgHeight = (canvas.height * imgWidth) / canvas.width;let heightLeft = imgHeight;// 创建一个新的 PDF 对象const pdf = new jsPDF('p', 'mm');let position = 0;// 将 canvas 转换为图片并添加到 PDF 中pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, imgWidth, imgHeight);// 添加水印到 PDF 中pdf.addImage(watermarkImage, 'PNG', 50, 100, 100, 50);heightLeft -= pageHeight;// 处理超出一页的内容while (heightLeft >= 0) {position = heightLeft - imgHeight;pdf.addPage();pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, position, imgWidth, imgHeight);pdf.addImage(watermarkImage, 'PNG', 50, 100, 100, 50);heightLeft -= pageHeight;}// 保存 PDF 文件pdf.save('exported_file.pdf');} catch (error) {console.error('导出 PDF 失败:', error);}},},
};
</script><style scoped>
/* 可以在这里添加样式 */
</style>
使用说明
- 安装依赖:在项目根目录下运行以下命令安装
html2canvas和jspdf:
npm install html2canvas jspdf
- 引入组件:将上述代码保存为一个 Vue 组件文件(例如
ExportPDF.vue),然后在需要使用的地方引入并使用该组件。
<template><div><ExportPDF /></div>
</template><script>
import ExportPDF from './ExportPDF.vue';export default {components: {ExportPDF,},
};
</script>
- 自定义水印内容和样式:
- 在输入框中输入自定义的水印内容。
- 通过下拉框选择水印的旋转角度。
- 导出 PDF 文件:点击“导出 PDF”按钮,即可将带有水印的 HTML 内容导出为 PDF 文件。
注意事项
- 由于
html2canvas和jspdf是基于浏览器环境的库,因此该功能只能在浏览器中使用。 - 导出的 PDF 文件可能会受到浏览器渲染和字体支持的影响,建议在不同浏览器中进行测试。
相关文章:
Vue.js组件开发-实现导出PDF文件可自定义添加水印及水印样式方向
使用 Vue 实现导出 PDF 文件并添加水印,同时支持设置水印样式、方向和自定义水印内容。 步骤 安装依赖:使用 html2canvas 将 HTML 内容转换为 canvas,使用 jspdf 生成 PDF 文件。创建 Vue 组件:在组件中实现水印生成、HTML 转 c…...
css中的animation
css的animation animation是一个综合属性,是animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline这些属性的简写 不过在…...
四.3 Redis 五大数据类型/结构的详细说明/详细使用( hash 哈希表数据类型详解和使用)
四.3 Redis 五大数据类型/结构的详细说明/详细使用( hash 哈希表数据类型详解和使用) 文章目录 四.3 Redis 五大数据类型/结构的详细说明/详细使用( hash 哈希表数据类型详解和使用)2.hash 哈希表常用指令(详细讲解说明)2.1 hset …...
基于Springboot + vue实现的洗衣店订单管理系统
“前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站:人工智能学习网站” 💖学习知识需费心, 📕整理归纳更费神。 🎉源码免费人人喜…...
用 Scoop 优雅管理 Windows 软件:安装、配置与使用全指南
本篇将主要讲讲如何用「Scoop」优雅管理 Windows 软件:安装、配置与使用全指南 一、Scoop 是什么? Scoop 是一款专为 Windows 设计的命令行软件包管理工具,它能让你像 Linux 系统一样通过命令快速安装、更新和卸载软件。其核心优势包括&…...
深度学习中常用的评价指标方法
深度学习中常用的评价指标方法因任务类型(如分类、回归、分割等)而异。以下是一些常见的评价指标: 1. 分类任务 准确率(Accuracy) 定义:正确预测的样本数占总样本数的比例。 公式:AccuracyTPT…...
多协议网关BL110钡铼6路RS485转MQTT协议云网关
多协议网关BL110钡铼6路RS485转MQTT协议云网关是一款集成了多种通信协议的工业级网关设备,专为物联网(IoT)应用设计。该网关能够将RS485总线设备的数据转化为MQTT协议,通过网络传输到云平台,实现远程监控和数据管理。以…...
Nginx 安装配置指南
Nginx 安装配置指南 引言 Nginx 是一款高性能的 HTTP 和反向代理服务器,同时也可以作为 IMAP/POP3/SMTP 代理服务器。由于其稳定性、丰富的功能集以及低资源消耗而被广泛应用于各种场景。本文将为您详细介绍 Nginx 的安装与配置过程。 系统要求 在安装 Nginx 之…...
二叉树介绍
一.树的概念 树的图: 1.结点的度:一个结点含有子树的个数称为该结点的度; 如上图:A的度为6 2.树的度:一棵树中,所有结点度的最大值称为树的度; 如上图:树的度为6 3.叶子结点或终…...
VLC-Qt: Qt + libVLC 的开源库
参考链接 https://blog.csdn.net/u012532263/article/details/102737874...
【四川乡镇界面】图层shp格式arcgis数据乡镇名称和编码2020年wgs84无偏移内容测评
本文将详细解析标题和描述中提到的IT知识点,主要涉及GIS(Geographic Information System,地理信息系统)技术,以及与之相关的文件格式和坐标系统。 我们要了解的是"shp"格式,这是一种广泛用于存储…...
Helm Chart 详解:从入门到精通
Helm 是 Kubernetes 的包管理工具,而 Helm Chart 是 Helm 的核心概念,用于定义、安装和升级 Kubernetes 应用。本文将详细介绍 Helm Chart 的结构、核心文件及其作用,帮助你从入门到精通 Helm Chart。 © ivwdcwso (ID: u012172506) 1. 什么是 Helm Chart? Helm Char…...
excel如何查找一个表的数据在另外一个表是否存在
比如“Sheet1”有“张三”、“李四”“王五”三个人的数据,“Sheet2”只有“张三”、“李四”的数据。我们通过修改“Sheet1”的“民族”或者其他空的列,修改为“Sheet2”的某一列。这样修改后筛选这个修改的列为空的或者为出错的,就能找到两…...
gesp(C++六级)(7)洛谷:P10376:[GESP202403 六级] 游戏
gesp(C六级)(7)洛谷:P10376:[GESP202403 六级] 游戏 题目描述 你有四个正整数 n , a , b , c n,a,b,c n,a,b,c,并准备用它们玩一个简单的小游戏。 在一轮游戏操作中,你可以选择将 n n n 减去 a a a&am…...
随机森林例子
完整代码: # 导入必要的库 from sklearn.datasets import load_iris from sklearn.ensemble import RandomForestClassifier from sklearn.model_selection import train_test_split from sklearn.metrics import accuracy_score import numpy as np# 加载鸢尾花数…...
Qt中Widget及其子类的相对位置移动
Qt中Widget及其子类的相对位置移动 最后更新日期:2025.01.25 下面让我们开始今天的主题… 一、开启篇 提出问题:请看上图,我们想要实现的效果是控件黄色的Widge(m_infobarWidget)t随着可视化窗口(m_glWidge…...
MyBatis 关联映射详解
目录 一、创建表结构 1. 学生表 (student) 2. 教师表 (teacher) 二、一对一 & 多对一 关系映射 1. 连表查询(直接查询) 2. 分步查询(懒加载) 三、一对多 关系映射 1. 直接查询 2. 分步查询 四、MyBatis 延迟加载&am…...
Shell特殊位置变量以及常用内置变量总结
目录 1. 特殊的状态变量 1.1 $?(上一个命令的退出状态) 1.2 $$(当前进程的 PID) 1.3 $!(后台进程的 PID) 1.4 $_(上一条命令的最后一个参数) 2.常用shell内置变量 2.1 echo&…...
LeetCode:96.不同的二叉搜索树
跟着carl学算法,本系列博客仅做个人记录,建议大家都去看carl本人的博客,写的真的很好的! 代码随想录 LeetCode:96.不同的二叉搜索树 给你一个整数 n ,求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉…...
基于Springboot的智能学习平台系统【附源码】
基于Springboot的智能学习平台系统 效果如下: 系统登陆页面 系统主页面 课程详情页面 论坛页面 考试页面 试卷管理页面 考试记录页面 错题本页面 研究背景 随着互联网技术的普及,人们探索知识的方式逐渐转向数字化平台。传统的教学方法通常局限于固定…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
Robots.txt 文件
什么是robots.txt? robots.txt 是一个位于网站根目录下的文本文件(如:https://example.com/robots.txt),它用于指导网络爬虫(如搜索引擎的蜘蛛程序)如何抓取该网站的内容。这个文件遵循 Robots…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
