js生成pdf

server/2024/9/23 4:28:03/

pdf_0">js生成pdf

pdf_1">html->img->pdf

下载依赖

javascript">npm install html2canvas
npm install jspdf

引入依赖

javascript">import html2canvas from "html2canvas"
import jsPDF from 'jspdf';

代码

javascript">const A4_WIDTH = 595.28
const A4_HEIGHT = 841.89
//参数 html(dom) imgsrc(封面可不加,直接加到第一个参数) fileName(文件名称)
export const handleHtml2pdf = (html, imgSrc, fileName, cb) => {new html2canvas(html, {useCORS: true,allowTaint: true,}).then(canvas => {var contentWidth = canvas.width;var contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;var pageHeight = contentWidth / A4_WIDTH * A4_HEIGHT;//未生成pdf的html页面高度var leftHeight = contentHeight;//页面偏移var position = 0;//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高var imgWidth = A4_WIDTH;var imgHeight = A4_WIDTH / contentWidth * contentHeight;var pageData = canvas.toDataURL('image/jpeg', 1.0);var pdf = new jsPDF('', 'pt', 'a4');if (imgSrc) {pdf.addImage(imgSrc, 'JPEG', 0, 0, imgWidth, imgHeight);pdf.addPage();}if (leftHeight < pageHeight) {pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);} else {while (leftHeight > 0) {//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeight;position -= A4_HEIGHT;//避免添加空白页if (leftHeight > 0) {pdf.addPage();}}}pdf.save(fileName || "pdf.pdf");cb()})
}

http://www.ppmy.cn/server/6612.html

相关文章

Linux 软件包工具rpmbuild

下载工具rpm-build yum search rpm-build yum install rpm-build.x86_64制作属于自己的RPM包 1.准备打包目录 ls rpmbuild/ BUILD BUILDROOT RPMS SOURCES SPECS SRPMS 2.放入软件包 cp /root/nginx-1.18.0.tar.gz rpmbuild/SOURCES/ 3.编辑spec文件 vim rpmbuild/SPECS/n…

【超级简单】vscode进入服务器的docker容器

前提 1、已经运行docker容器 2、已经用vscode链接服务器 在vscode中安装的插件 Dev Containers docker 在容器中安装的依赖 yum install openssh-server yum install openssh-clientsvscode进入服务器的docker容器 找到自己的容器&#xff0c;右键点击&#xff0c;找到…

数仓建模—数据模型

数仓建模—数据模型 前面我们讲了什么是数据仓库,以及数据仓库的发展历史,从这里开始我们讲解数仓建模,在开始之前我们先了解一下什么是数据模型,以及常见的数据模型都有哪些 什么是数据模型 在详细探讨数据模型之前,我们需要明确什么是数据。从本质上讲,数据由收集、…

使用Docker搭建Redis主从集群

文章目录 ☃️前言☃️搭建❄️❄️架构❄️❄️实例说明❄️❄️搭建第一个服务器上的两个实例❄️❄️搭建第二个服务器上的一个实例 ☃️开启主从❄️❄️改配置❄️❄️重启从节点 ☃️验证 ☃️前言 单节点 Redis 的并发能力是有上限的&#xff0c;要进一步提高Redis的并…

LeetCode———100——相同的树

目录 ​编辑 1.题目 2.解答 1.题目 . - 力扣&#xff08;LeetCode&#xff09; 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&…

计算机视觉——手机目标检测数据集

这是一个手机目标检测的数据集&#xff0c;数据集的标注工具是labelimg,数据格式是voc格式&#xff0c;要训练yolo模型的话&#xff0c;可以使用脚本改成txt格式&#xff0c;数据集标注了手机&#xff0c;标签名&#xff1a;telephone,数据集总共有1960张&#xff0c;有一部分是…

Pandas连接MySQL数据库

pandas是一个强大的Python工具包&#xff0c;能够快速帮助我们做很多数据处理。但是在利用pandas连接数据库时&#xff0c;也会遇到很多问题&#xff0c;在此我总结了一个相对较为简单的连接范式&#xff0c;供大家参考学习。 先上代码&#xff1a; import pandas as pd# 数据…

LeetCode刷题总结 | 图论3—并查集

并查集理论基础 1.背景 首先要知道并查集可以解决什么问题呢&#xff1f; 并查集常用来解决连通性问题。大白话就是当我们需要判断两个元素是否在同一个集合里的时候&#xff0c;我们就要想到用并查集。 并查集主要有两个功能&#xff1a; 将两个元素添加到一个集合中。判…