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的智能学习平台系统 效果如下: 系统登陆页面 系统主页面 课程详情页面 论坛页面 考试页面 试卷管理页面 考试记录页面 错题本页面 研究背景 随着互联网技术的普及,人们探索知识的方式逐渐转向数字化平台。传统的教学方法通常局限于固定…...

测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...

MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...

有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...