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

React网页转换为pdf并下载|使用jspdf html2canvas

checkout 分支后突然报错,提示:

Can't resolve 'jspdf' in ...

Can't resolve 'html2canvas' in ...

解决方法很简单,重新 yarn install 就好了,至于为什么,我暂时也不知道,总之解决了。

思路来源:

先随便记一下写的js,将组件转换为pdf,添加水印,并且下载:

import html2canvas from "html2canvas";
import jsPDF from "jspdf";/*** 导出PDF* @param {导出后的文件名} filename* @param {要导出的dom节点} dom* @param {导出的文件水印:用户邮箱} email*/export const exportPDF = (filename, dom, email) => {const scale = 0.8;// 滚动到顶部,避免打印不全document.documentElement.scrollTop = 0;html2canvas(dom, {allowTaint: true, // Whether to allow cross-origin images to taint the canvasscale, // The scale to use for rendering. Defaults to the browsers device pixel ratio.}).then((canvas) => {const contentWidth = canvas.width / scale;const contentHeight = canvas.height / scale;console.log("height",contentHeight,canvas.height,contentWidth,canvas.width,dom.offsetWidth,dom.offsetHeight,);const pdf = new jsPDF("", "pt", [contentWidth, contentHeight]);const pageData = canvas.toDataURL("image/jpeg", 1.0);pdf.addImage(pageData,"JPEG",(contentWidth - contentWidth / 2.6) / 2, // x偏移20, // y偏移contentWidth / 2.6,contentHeight > 14400 ? 14380 : contentHeight,"","FAST");// 添加水印for (let i = 1; i < contentHeight / 240 - 1; i++) {pdf.setTextColor(150);pdf.setFontSize(35);pdf.setFont("courier");pdf.text(contentWidth / 2, 450 * i, email, 45);}pdf.save(`${filename}.pdf`);});
};

相关文章:

React网页转换为pdf并下载|使用jspdf html2canvas

checkout 分支后突然报错&#xff0c;提示&#xff1a; Cant resolve jspdf in ... Cant resolve html2canvas in ... 解决方法很简单&#xff0c;重新 yarn install 就好了&#xff0c;至于为什么&#xff0c;我暂时也不知道&#xff0c;总之解决了。 思路来源&#xff1a; 先…...

EASYEXCEL导出表格(有标题、单元格合并)

EASYEXCEL导出表格&#xff08;有标题、单元格合并&#xff09; xlsx格式报表的导出&#xff0c;导出的数据存在父子关系&#xff0c;即相当于树形数据&#xff0c;有单元格合并和标题形式的要求&#xff0c;查阅了一些资料&#xff0c;总算是弄出来了&#xff0c;这里另写一个…...

pytest 断言异常

一、前置说明 在 pytest 中,断言异常是通过 pytest 内置的 pytest.raises 上下文管理器来实现的。通过使用 pytest.raises,可以捕获并断言代码中引发的异常。 二、操作步骤 1. 编写测试代码 atme/demos/demo_pytest_tutorials/test_pytest_raises.py import pytest# 示例…...

听GPT 讲Rust源代码--src/tools(22)

File: rust/src/tools/tidy/src/lib.rs rust/src/tools/tidy/src/lib.rs是Rust编译器源代码中tidy工具的实现文件之一。tidy工具是Rust项目中的一项静态检查工具&#xff0c;用于确保代码质量和一致性。 tidy工具主要有以下几个作用&#xff1a; 格式化代码&#xff1a;tidy工具…...

OD Linux发行版本

题目描述&#xff1a; Linux操作系统有多个发行版&#xff0c;distrowatch.com提供了各个发行版的资料。这些发行版互相存在关联&#xff0c;例如Ubuntu基于Debian开发&#xff0c;而Mint又基于Ubuntu开发&#xff0c;那么我们认为Mint同Debian也存在关联。 发行版集是一个或多…...

华为端口隔离简单使用方法同vlan下控制个别电脑不给互通

必须得用access接口&#xff0c;hybrid口不行 dhcp enable interface Vlanif1 ip address 192.168.1.1 255.255.255.0 dhcp select interface interface MEth0/0/1 interface GigabitEthernet0/0/1 port link-type access port-isolate enable group 1 interface GigabitEther…...

DaVinci各版本安装指南

链接: https://pan.baidu.com/s/1g1kaXZxcw-etsJENiW2IUQ?pwd0531 ​ #2024版 1.鼠标右击【DaVinci_Resolve_Studio_18.5(64bit)】压缩包&#xff08;win11及以上系统需先点击“显示更多选项”&#xff09;【解压到 DaVinci_Resolve_Studio_18.5(64bit)】。 2.打开解压后的文…...

【黑马甄选离线数仓day10_会员主题域开发_DWS和ADS层】

day10_会员主题域开发 会员主题_DWS和ADS层 DWS层开发 门店会员分类天表: 维度指标: 指标&#xff1a;新增注册会员数、累计注册会员数、新增消费会员数、累计消费会员数、新增复购会员数、累计复购会员数、活跃会员数、沉睡会员数、会员消费金额 维度: 时间维度&#xff08…...

OD 完美走位

题目描述&#xff1a; 在第一人称射击游戏中&#xff0c;玩家通过键盘的A、S、D、W四个按键控制游戏人物分别向左、向后、向右、向前进行移动&#xff0c;从而完成走位。假设玩家每按动一次键盘&#xff0c;游戏人物会向某个方向移动一步&#xff0c;如果玩家在操作一定次数的键…...

SpringSecurity6 | 失败后的跳转

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: Java从入门到精通 ✨特色专栏: MySQL学习 🥭本文内容: SpringSecurity6 | 失败后的跳转 📚个人知识库: Leo知识库,欢迎大家访问 学习…...

MySQL数据库增删改查

常用的数据类型&#xff1a; int&#xff1a;整数类型&#xff0c;无符号的范围【0&#xff0c;2^32-1】&#xff0c;有符号【-2^31,2^31-1】 float&#xff1a;单精度浮点&#xff0c;4字节64位 double&#xff1a;双精度浮点&#xff0c;8字节64位 char&#xff1a;固定长…...

Altium Designer(AD24)新工程复用设计文件图文教程及视频演示

&#x1f3e1;《专栏目录》 目录 1&#xff0c;概述2&#xff0c;复用方法一视频演示2.1&#xff0c;创建工程2.2&#xff0c;复用设计文件 3&#xff0c;复用方法二视频演示4&#xff0c;总结 欢迎点击浏览更多高清视频演示 1&#xff0c;概述 本文简述使用AD软件复用设计文件…...

Python遥感影像深度学习指南(1)-使用卷积神经网络(CNN、U-Net)和 FastAI进行简单云层检测

【遥感影像深度学习】系列的第一章,Python遥感影像深度学习的入门课程,介绍如何使用卷积神经网络(CNN)从卫星图像中分割云层 1、数据集 在本项目中,我们将使用 Kaggle 提供的 38-Cloud Segmentation in Satellite Images数据集。 该数据集由裁剪成 384x384 (适用…...

Hive-DML详解(超详细)

文章目录 前言HiveQL的数据操作语言&#xff08;DML&#xff09;1. 插入数据1.1 直接插入固定值1.2 插入查询结果 2. 更新数据3. 删除数据3.1 删除整个分区 4. 查询数据4.1 基本查询4.2 条件筛选4.3 聚合函数 总结 前言 本文将介绍HiveQL的数据操作语言&#xff08;DML&#x…...

PHP实现可示化代码

PHP是一种服务器端脚本语言&#xff0c;它主要用于开发Web应用程序。虽然PHP本身不提供可视化代码的功能&#xff0c;但你可以使用一些第三方库和工具来实现可视化代码。 以下是一些常用的PHP可视化代码的工具和库&#xff1a; 1. Graphviz&#xff1a;Graphviz是一个开源的可…...

useState语法讲解

useState语法讲解 语法定义 const [state, dispatch] useState(initData)state&#xff1a;定义的数据源&#xff0c;可视作一个函数组件内部的变量&#xff0c;但只在首次渲染被创造。dispatch&#xff1a;改变state的函数&#xff0c;推动函数渲染的渲染函数。dispatch有两…...

堆与二叉树(下)

接着上次的&#xff0c;这里主要介绍的是堆排序&#xff0c;二叉树的遍历&#xff0c;以及之前讲题时答应过的简单二叉树问题求解 堆排序 给一组数据&#xff0c;升序&#xff08;降序&#xff09;排列 思路 思考&#xff1a;如果排列升序&#xff0c;我们应该建什么堆&#x…...

讲诉JVM

jvm是Java代码运行的环境&#xff0c;他将java程序翻译成为机器可以可以识别的机器码&#xff0c;可以跨平台运行如linuc或者windos 简单说一下我对jvm运行的理解&#xff0c; 首先我们运行程序的时候&#xff0c;类加载器会将类按需加载到元空间/方法区里面 …...

8、SpringCloud高频面试题-版本1

1、SpringCloud组件有哪些 SpringCloud 是一系列框架的有序集合。它利用 SpringBoot 的开发便利性巧妙地简化了分布式系统基础设施的开发&#xff0c;如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等&#xff0c;都可以用 SpringBoot 的开发风格做到一键启…...

PHP案例代码:PHP如何提供下载功能?

对Web开发人员来说,“下载”功能是一个非常常见的需求。在网站中提供文件下载,通常用于提供用户手册、软件升级、音乐、视频等各种资源文件。本教程将向您介绍如何实现一个PHP下载功能,同时告诉浏览器文件名称、文件大小、文件类型,并统计下载次数。 首先,我们需要了解一些…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...