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`);});
};

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华清远见作业第十四天

思维导图 1、顺序表按元素删除 代码&#xff1a; int delete_num_delete(sqlist *list,datatype key) {int indexseek_num(list,key);//元素查找函数if(index-1){return -1;}delete_index(list,index);return 0; } 2、顺序表按照元素修改 代码&#xff1a; //顺序表按照元…

使用Flask逐步搭建Web应用程序

大家好&#xff0c;Flask是一个使用Python编写的轻量级Web应用框架。它被设计成简单、易于学习和使用的&#xff0c;同时具备足够的灵活性和扩展性&#xff0c;以满足各种规模的Web应用开发需求。本文我们将介绍一个使用Flask逐步搭建Web应用程序的简单入门示例。 1.安装Flask…

C语言---井字棋(三子棋)

Tic-Tac-Toe 1 游戏介绍和随机数1.1 游戏介绍1.2 随机数的生成1.3 棋盘大小和符号 2 设计游戏2.1 初始化棋盘2.2 打印棋盘2.3 玩家下棋2.4 电脑下棋2.5 判断输赢2.6 game()函数2.7 main()函数 3 完整三子棋代码3.1 Tic_Tac_Toe.h3.2 Tic_Tac_Toe.c3.3 Test.c 4 游戏代码的缺陷 …

Tomcat报404问题解决方案大全(包括tomcat可以正常运行但是报404)

文章目录 Tomcat报404问题解决方案大全(包括tomcat可以正常运行但是报404)1、正确的运行页面2、报错404问题分类解决2.1、Tomcat未配置环境变量2.2、IIs访问权限问题2.3、端口占用问题2.4、文件缺少问题解决办法&#xff1a; Tomcat报404问题解决方案大全(包括tomcat可以正常运…

【Docker】基于华为 openEuler 应用 Docker 镜像体积压缩

书接 openEuler 系列文章&#xff08;可以翻看测试系列&#xff09;&#xff0c;本次跟大家说说如何将 Java 包轻量化地构建到 openEuler 镜像中且保持镜像内操作系统是全补丁状态。 之前我们都是使用现成的 jdk 镜像进行构建的&#xff0c;如下图&#xff1a; FROM ibm-seme…

ROS笔记之rosbag的快速切片(C++实现)

ROS笔记之rosbag的快速切片(C实现) —— 杭州 2023-12-21 夜 code review 文章目录 ROS笔记之rosbag的快速切片(C实现)1.运行效果2.文件结构3.fast_rosbag_slice.cpp4.CMakeLists.txt5.package.xml6.对fast_rosbag_slice.cpp进行函数封装 正常该功能是ROS官方命令行&#xff1a…

安全、效率、成本:混合云数据库管理的三重挑战!

随着业务需求的不断演变&#xff0c;数据在多云平台之间流动&#xff0c;给数据库管控带来了新的层次和复杂性。这给数据库管控带来了前所未有的挑战。企业可能面临着一系列问题&#xff0c;包括安全性挑战、管理复杂性、性能与效率问题、成本控制难题、缺乏统一的管理视图以及…

Hardhat环境搭建(六)---无需翻墙

Hardhat环境搭建 官方地址 node环境 npm环境 git环境 安装hardhat npm init npminit是什么 在node开发中使用npm init会生成一个pakeage.json文件&#xff0c;这个文件主要是用来记录这个项目的详细信息的&#xff0c;它会将我们在项目开发中所要用到的包&#xff0c;以…

7.串口通信uart编写思路及自定义协议

前言&#xff1a; 串口是很重要的&#xff0c;有许多模块通信接口就是串口&#xff0c;例如gps模块&#xff0c;蓝牙模块&#xff0c;wifi模块还有一些精度比较高的陀螺仪模块等等&#xff0c;所以学会了串口之后&#xff0c;这些听起来很牛批的模块都能够用起来了。此外&#…

【Midjourney】Midjourney根据prompt提示词生成黑白色图片

目录 &#x1f347;&#x1f347;Midjourney是什么&#xff1f; &#x1f349;&#x1f349;Midjourney怎么用&#xff1f; &#x1f514;&#x1f514;提示词格式 &#x1f34b;&#x1f34b;应用示例——“秘密花园”式涂色书配图生成 &#x1f34c;&#x1f34c;例子1…

pycharm下执行conda命令提示无法识别解决方案

1 问题描述 win10环境命令行执行conda命令&#xff0c;报命令无法识别&#xff0c;错误信息如下&#xff1a; PS D:\code\cv> conda activate pt conda : 无法将“conda”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&a…

AI Native工程化:百度App AI互动技术实践

作者 | GodStart 导读 随着AI浪潮的兴起&#xff0c;越来越多的应用都在利用大模型重构业务形态&#xff0c;在设计和优化Prompt的过程中&#xff0c;我们发现整个Prompt测评和优化周期非常长&#xff0c;因此&#xff0c;我们提出了一种Prompt生成、评估与迭代的一体化解决方案…