前端通过 jspdf 和 html2canvas 工具将网页生成 pdf

news/2024/12/14 19:01:21/

由于 html2canvas 的性能问题,该方案对于页数比较多的场景生成的非常慢,可以试着使用 modern-screenshot 工具看是否性能会得到提升。

javascript">import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'async function exportPdf(){const pages = document.querySelectorAll('.report-page')if (!pages.length) returnconst doc = new jsPDF({orientation: pageConfig.pageDirection as // 页面方向| 'p'| 'portrait'| 'l'| 'landscape'| undefined,format: pageConfig.pageSize, // 页面大小,例如 'A4'unit: 'mm',})for (const [i, page] of pages.entries()) {curPage.value = i + 1 // 当前页码if (i !== 0) {doc.addPage(pageConfig.pageSize,pageConfig.pageDirection as| 'p'| 'portrait'| 'l'| 'landscape'| undefined,)}page.style.border = 'none'const canvas = await html2canvas(page, {scale: 5,})const isNormalPage = pageConfig.value.pageDirection === 'p'doc.addImage({imageData: canvas.toDataURL('image/jpeg'),format: 'JPEG',x: 0,y: 0,width: isNormalPage? pageConfig.pageWidth: pageConfig.pageHeight,height: isNormalPage? pageConfig.pageHeight: pageConfig.pageWidth,})}const rawdata = doc.output('datauristring')window.pdfData = rawdatadoc.save(`${pageConfig.name || '预览'}.pdf`)
}

执行完  doc.save 后会自动触发浏览器下载。


http://www.ppmy.cn/news/1555088.html

相关文章

验证UDP TCP- Windows作为client端访问Linux服务端

验证UDP TCP- Windows作为client访问Linux 1. UDP实验 UDP_linux_server.cc #include <iostream> #include <string> #include <memory> #include <cerrno> #include <cstring> #include <unistd.h> #include <strings.h> #include…

vue3监听横向滚动条的位置;鼠标滚轮滑动控制滚动条滚动;监听滚动条到顶端

1.横向取值scrollLeft 竖向取值scrollTop 2.可以监听到最左最右侧 3.鼠标滚轮滑动控制滚动条滚动 效果 <template><div><div class"scrollable" ref"scrollableRef"><!-- 内容 --><div style"width: 2000px; height: 100…

【SSH+X11】VsCode使用Remote-SSH在远程服务器的docker中打开Rviz

&#x1f680;今天来分享一下通过VsCode的Remote-SSH插件在远程服务器的docker中打开Rviz进行可视化的方法。 具体流程如下图所示&#xff0c;在操作开始前&#xff0c;请先重启设备&#xff0c;排除之前运行配置的影响&#xff1a; ⭐️ 我这里是使用主机连接服务器&#xff…

IIS部署程序https是访问出现403或ERR_HTTP2_PROTOCOL_ERROR

一、说明 在windows server 2016中的IIS程序池里部署一套系统&#xff0c;通过https访问站点&#xff0c;同时考虑到安全问题以及防攻击等行为&#xff0c;就用上了WAF云盾功能&#xff0c;能有效的抵挡部分攻击&#xff0c;加强网站的安全性和健壮性。 应用系统一直能够正常…

MyBatis 框架学习笔记:功能与应用全解析

引子 在现代 Java 应用开发中&#xff0c;数据持久化是至关重要的一环。MyBatis 作为一款优秀的持久层框架&#xff0c;为开发者提供了便捷、高效的数据访问方式。本文将详细介绍 MyBatis 框架的基本概念、功能特性以及在实际应用中的具体操作&#xff0c;帮助读者更好地理解和…

【GAMES101笔记速查——Lecture 22 Animation Cont】

目录 1 单粒子模拟 1.1 欧拉方法 1.2 不稳定性及其改进 1.2.1 误差&#xff08;Errors&#xff09; 1.2.2 不稳定性&#xff08;Instability&#xff09; 1.2.3 解决不稳定性&#xff08;Combating Instability&#xff09; &#xff08;1&#xff09;中点法 &#xff0…

SSH连接报错,Corrupted MAC on input 解决方法

问题描述 客户在windows CMD中SSH连接失败&#xff0c;报错: Corrupted MAC on input ssh_dispatch_run_fatal: Connection to x.x.x.x port 22: message authentication code incorrect值得注意的是&#xff0c;客户通过别的机器做SSH连接可以成功&#xff0c;使用putty, mo…

HTTP 常见状态码解析

HTTP 常见状态码解析 文章目录 HTTP 常见状态码解析一、引言二、1XX 信息性状态码&#xff08;一&#xff09;100 Continue&#xff08;二&#xff09;101 Switching Protocols 三、2XX 成功状态码&#xff08;一&#xff09;200 OK&#xff08;二&#xff09;201 Created&…