当前位置: 首页 > news >正文

Vue.js组件开发-实现导出PDF文件可自定义添加水印及水印样式方向

使用 Vue 实现导出 PDF 文件并添加水印,同时支持设置水印样式、方向和自定义水印内容。

步骤

  1. 安装依赖:使用 html2canvas 将 HTML 内容转换为 canvas,使用 jspdf 生成 PDF 文件。
  2. 创建 Vue 组件:在组件中实现水印生成、HTML 转 canvas、canvas 转 PDF 的功能。
  3. 设置水印样式和方向:支持自定义水印内容、字体、颜色、透明度、旋转角度等。
  4. 导出 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>

使用说明

  1. 安装依赖:在项目根目录下运行以下命令安装 html2canvasjspdf
npm install html2canvas jspdf
  1. 引入组件:将上述代码保存为一个 Vue 组件文件(例如 ExportPDF.vue),然后在需要使用的地方引入并使用该组件。
<template><div><ExportPDF /></div>
</template><script>
import ExportPDF from './ExportPDF.vue';export default {components: {ExportPDF,},
};
</script>
  1. 自定义水印内容和样式
    • 在输入框中输入自定义的水印内容。
    • 通过下拉框选择水印的旋转角度。
  2. 导出 PDF 文件:点击“导出 PDF”按钮,即可将带有水印的 HTML 内容导出为 PDF 文件。

注意事项

  • 由于 html2canvasjspdf 是基于浏览器环境的库,因此该功能只能在浏览器中使用。
  • 导出的 PDF 文件可能会受到浏览器渲染和字体支持的影响,建议在不同浏览器中进行测试。

相关文章:

Vue.js组件开发-实现导出PDF文件可自定义添加水印及水印样式方向

使用 Vue 实现导出 PDF 文件并添加水印&#xff0c;同时支持设置水印样式、方向和自定义水印内容。 步骤 安装依赖&#xff1a;使用 html2canvas 将 HTML 内容转换为 canvas&#xff0c;使用 jspdf 生成 PDF 文件。创建 Vue 组件&#xff1a;在组件中实现水印生成、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 五大数据类型/结构的详细说明/详细使用&#xff08; hash 哈希表数据类型详解和使用&#xff09; 文章目录 四.3 Redis 五大数据类型/结构的详细说明/详细使用&#xff08; hash 哈希表数据类型详解和使用&#xff09;2.hash 哈希表常用指令(详细讲解说明)2.1 hset …...

基于Springboot + vue实现的洗衣店订单管理系统

“前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff1a;人工智能学习网站” &#x1f496;学习知识需费心&#xff0c; &#x1f4d5;整理归纳更费神。 &#x1f389;源码免费人人喜…...

用 Scoop 优雅管理 Windows 软件:安装、配置与使用全指南

本篇将主要讲讲如何用「Scoop」优雅管理 Windows 软件&#xff1a;安装、配置与使用全指南 一、Scoop 是什么&#xff1f; Scoop 是一款专为 Windows 设计的命令行软件包管理工具&#xff0c;它能让你像 Linux 系统一样通过命令快速安装、更新和卸载软件。其核心优势包括&…...

深度学习中常用的评价指标方法

深度学习中常用的评价指标方法因任务类型&#xff08;如分类、回归、分割等&#xff09;而异。以下是一些常见的评价指标&#xff1a; 1. 分类任务 准确率&#xff08;Accuracy&#xff09; 定义&#xff1a;正确预测的样本数占总样本数的比例。 公式&#xff1a;AccuracyTPT…...

多协议网关BL110钡铼6路RS485转MQTT协议云网关

多协议网关BL110钡铼6路RS485转MQTT协议云网关是一款集成了多种通信协议的工业级网关设备&#xff0c;专为物联网&#xff08;IoT&#xff09;应用设计。该网关能够将RS485总线设备的数据转化为MQTT协议&#xff0c;通过网络传输到云平台&#xff0c;实现远程监控和数据管理。以…...

Nginx 安装配置指南

Nginx 安装配置指南 引言 Nginx 是一款高性能的 HTTP 和反向代理服务器&#xff0c;同时也可以作为 IMAP/POP3/SMTP 代理服务器。由于其稳定性、丰富的功能集以及低资源消耗而被广泛应用于各种场景。本文将为您详细介绍 Nginx 的安装与配置过程。 系统要求 在安装 Nginx 之…...

二叉树介绍

一.树的概念 树的图&#xff1a; 1.结点的度&#xff1a;一个结点含有子树的个数称为该结点的度&#xff1b; 如上图&#xff1a;A的度为6 2.树的度&#xff1a;一棵树中&#xff0c;所有结点度的最大值称为树的度&#xff1b; 如上图&#xff1a;树的度为6 3.叶子结点或终…...

VLC-Qt: Qt + libVLC 的开源库

参考链接 https://blog.csdn.net/u012532263/article/details/102737874...

【四川乡镇界面】图层shp格式arcgis数据乡镇名称和编码2020年wgs84无偏移内容测评

本文将详细解析标题和描述中提到的IT知识点&#xff0c;主要涉及GIS&#xff08;Geographic Information System&#xff0c;地理信息系统&#xff09;技术&#xff0c;以及与之相关的文件格式和坐标系统。 我们要了解的是"shp"格式&#xff0c;这是一种广泛用于存储…...

Helm Chart 详解:从入门到精通

Helm 是 Kubernetes 的包管理工具,而 Helm Chart 是 Helm 的核心概念,用于定义、安装和升级 Kubernetes 应用。本文将详细介绍 Helm Chart 的结构、核心文件及其作用,帮助你从入门到精通 Helm Chart。 © ivwdcwso (ID: u012172506) 1. 什么是 Helm Chart? Helm Char…...

excel如何查找一个表的数据在另外一个表是否存在

比如“Sheet1”有“张三”、“李四”“王五”三个人的数据&#xff0c;“Sheet2”只有“张三”、“李四”的数据。我们通过修改“Sheet1”的“民族”或者其他空的列&#xff0c;修改为“Sheet2”的某一列。这样修改后筛选这个修改的列为空的或者为出错的&#xff0c;就能找到两…...

gesp(C++六级)(7)洛谷:P10376:[GESP202403 六级] 游戏

gesp(C六级)&#xff08;7&#xff09;洛谷&#xff1a;P10376&#xff1a;[GESP202403 六级] 游戏 题目描述 你有四个正整数 n , a , b , c n,a,b,c n,a,b,c&#xff0c;并准备用它们玩一个简单的小游戏。 在一轮游戏操作中&#xff0c;你可以选择将 n n n 减去 a a a&am…...

随机森林例子

完整代码&#xff1a; # 导入必要的库 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及其子类的相对位置移动 最后更新日期&#xff1a;2025.01.25 下面让我们开始今天的主题… 一、开启篇 提出问题&#xff1a;请看上图&#xff0c;我们想要实现的效果是控件黄色的Widge&#xff08;m_infobarWidget&#xff09;t随着可视化窗口&#xff08;m_glWidge…...

MyBatis 关联映射详解

目录 一、创建表结构 1. 学生表 (student) 2. 教师表 (teacher) 二、一对一 & 多对一 关系映射 1. 连表查询&#xff08;直接查询&#xff09; 2. 分步查询&#xff08;懒加载&#xff09; 三、一对多 关系映射 1. 直接查询 2. 分步查询 四、MyBatis 延迟加载&am…...

Shell特殊位置变量以及常用内置变量总结

目录 1. 特殊的状态变量 1.1 $?&#xff08;上一个命令的退出状态&#xff09; 1.2 $$&#xff08;当前进程的 PID&#xff09; 1.3 $!&#xff08;后台进程的 PID&#xff09; 1.4 $_&#xff08;上一条命令的最后一个参数&#xff09; 2.常用shell内置变量 2.1 echo&…...

LeetCode:96.不同的二叉搜索树

跟着carl学算法&#xff0c;本系列博客仅做个人记录&#xff0c;建议大家都去看carl本人的博客&#xff0c;写的真的很好的&#xff01; 代码随想录 LeetCode&#xff1a;96.不同的二叉搜索树 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉…...

基于Springboot的智能学习平台系统【附源码】

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...