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 canvas
    scale, // 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`);
  });
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu 常用命令之 passwd 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 在Ubuntu系统中&#xff0c;passwd命令用于更改用户的密码。系统管理员可以使用此命令更改任何用户的密码&#xff0c;而普通用户只能更改自己的密码。 passwd命令的参数如下 -l, --lock&#xff1a;锁定密码&#xff0c;使账户…

亚信安慧AntDB数据库开启分布式数据库的新篇章

AntDB-CE社区版是亚信科技AntDB数据库的首个社区版产品&#xff0c;它的诞生标志着AntDB数据库向更广泛的市场和用户群体开放&#xff0c;具有里程碑式的意义。AntDB-CE社区版不仅具备完整、易用、兼容度高的企业级分布式数据库产品特性&#xff0c;还采用了Share-Nothing的无共…

某电子文档安全管理系统 SQL注入漏洞复现

漏洞介绍 亿赛通电子文档安全管理系统 (简称: CDG)是一款电子文档安全加密软件&#xff0c;该系统利用驱动层透明加密技术&#xff0c;通过对电子文档的加密保护&#xff0c;防止内部员工泄密和外部人员非法窃取企业核心重要数据资产&#xff0c;对电子文档进行全生命周期防护…

期货平仓日历(期货平仓日期汇总)

什么是期货平仓日历&#xff1f; 期货是一种高风险高收益的投资品种。而期货交易不同于股票等其他投资品种的交易&#xff0c;期货交易需要在一定时间内才能买卖。而期货平仓日历就是指期货交易中规定的所有合约的平仓日期汇总。 常见期货平仓日期和时间&#xff1f; 不同的…

阿里云大模型数据存储解决方案,为 AI 创新提供推动力

云布道师 随着国内首批大模型产品获批名单问世&#xff0c;百“模”大战悄然开启。在这场百“模”大战中&#xff0c;每一款大模型产品的诞生&#xff0c;都离不开数据的支撑。如何有效存储、管理和处理海量多模态数据集&#xff0c;并提升模型训练、推理的效率&#xff0c;保…

uniapp uview1.0 页面多个upload上传、回显之后处理数据

<view class"img-title w-s-color-3 f-28 row">商品图片</view><u-upload ref"images" :header"header" :file-list"fileListImages" :action"action" name"iFile" icon-name"camera"u…

Modbus-ASCII数据帧

Modbus-ASCIl传输模式中&#xff0c;每个字节均以ASCI编码&#xff0c;实际报文中1个字节会以两ASCIl字符发送&#xff0c;因此这种模式比Modbus-RTU模式效率要低。 例如报文数据 x5B "5""B" X35 X42 . 数据帧格式如下: 从ASCI报文帧可以看出&#xff0…

混凝土强度达到多少才可以拆模板

混凝土拆模的时间取决于多种因素&#xff0c;包括混凝土的强度、环境条件、水泥类型、混凝土配方、模板类型及结构特点等。一般来说&#xff0c;混凝土拆模的基本准则是在混凝土达到足够的强度以承受自重和施工荷载时进行。这个强度通常是指混凝土达到其设计强度的一定比例。在…

0x43 线段树

0x43 线段树 线段树&#xff08;Segment Tree&#xff09;是一种基于分治思想的二叉树结构&#xff0c;用于在区间进行信息统计。与按照二进制位&#xff08;2的次幂&#xff09;进行区间划分的树状数组相比&#xff0c;线段树是一种更加通用的结构&#xff1a; 1.线段树的每…

探讨小鹏汽车CAN通讯协议分析破解过程数据研究技术应用

当前新能源电动汽车设计日益复杂&#xff0c;为提高舒适性、功能性、提升性能和确保更高的安全性&#xff0c;很多汽车的设计中融入了更复杂的功能。包括了雷达、激光雷达、自适应巡航、L2以上自动驾驶系统&#xff0c;高级驾驶辅助系统、盲区监测等等。安装在汽车上的传感器和…

在vue中获取文件的Md5值,以上传图片与视频为例

在vue中获取文件的Md5值 1. Md5 是什么&#xff1f;2. 使用插件spark-md5处理3. 获取图片文件的Md5值4. 视频文件的Md5值获取 1. Md5 是什么&#xff1f; MD5信息摘要算法&#xff08;英语&#xff1a;MD5 Message-Digest Algorithm&#xff09;&#xff0c;一种被广泛使用的…

【智慧校园】基于国标GB28181协议EasyCVR视频技术的高校宿舍智能监管方案

现如今&#xff0c;各大学校不乏众多住校生&#xff0c;但由于很多学生年龄较小 &#xff0c;又缺乏独自生活的经历&#xff0c;如何给在校住宿生做到安全与生活双重保障&#xff1f;旭帆科技校园智能视频监控通过人工智能技术对住宿区域进行智能监管&#xff0c;确保学生住宿安…

自定义权限管理系统概述

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 今天我们来聊聊如何自定…

Markdown语法 in Typora

Typora 是个好东西&#xff0c;如果不收费的话就更好了&#xff1b; Typora 破解 其实一直点击15天试用也是可以一直用一直用的&#xff1b; 数学公式 在Markdown扩展语法这里要选一下&#xff0c;才可以使用行内数学公式&#xff1b; 行内公式 $f(x) 2x^25x3$&#xff…

500平左右需要用建筑模板多少张?

为了计算500平方米&#xff08;㎡&#xff09;的建筑面积需要多少张模板&#xff0c;我们首先需要知道每张模板的面积。你提供了两种尺寸的模板&#xff1a;915毫米 x 1830毫米 和 1220毫米 x 2440毫米。我们先将这些尺寸从毫米转换为米&#xff0c;然后计算每张模板的面积&…

springboot整合rabbitmq附源码

前提是对rabbitmq有一定的了解&#xff0c;比如虚拟主机&#xff0c;交换机&#xff0c;队列&#xff0c;信道&#xff0c;绑定&#xff0c;路由键&#xff0c;direct&#xff0c;fanout&#xff0c;topic等 我使用的是docker部署的rabbitmq&#xff0c;看到简书的这个&#x…

如何通过宝塔面板搭建一个MySQL数据库服务并实现无公网ip远程访问?

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cp…

WEB渗透—PHP反序列化(五)

Web渗透—PHP反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩…

69 排序高手

数据以字符串形式输入&#xff0c;期间转到数组内 #include <iostream> #include <string> #include <vector>using namespace::std; using std::cout; using std::cin; int pxgs(vector<int>& nums) {int nnums.size();int l0,rn-1;while(l<…

博客3万访问量了……

博客有3万访问量了呢。自从第一次用了赠送的1500的流量券&#xff0c;粉丝了从零突破了&#xff0c;到现在有150个粉丝了。 之前预想的写博客的初衷&#xff0c;也是记录自己的学习过程&#xff0c;毕竟好记忆不如烂笔头&#xff0c;记录下来就是长长久久的&#xff0c;随时可以…