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

news2024/12/15 4:43:46

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

import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'

async function exportPdf(){
  const pages = document.querySelectorAll('.report-page')
  if (!pages.length) return
  const 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 = rawdata
  doc.save(`${pageConfig.name || '预览'}.pdf`)
}

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【GIS教程】使用GDAL-Python将tif转为COG并在ArcGIS Js前端加载-附完整代码

目录 一、数据格式 二、COG特点 三、使用GDAL生成COG格式的数据 四、使用ArcGIS Maps SDK for JavaScript加载COG格式数据 一、数据格式 COG(Cloud optimized GeoTIFF)是一种GeoTiff格式的数据。托管在 HTTP 文件服务器上,可以代替geose…

python数据分析之爬虫基础:解析

目录 1、xpath 1.1、xpath的安装以及lxml的安装 1.2、xpath的基本使用 1.3、xpath基本语法 2、JsonPath 2.1、jsonpath的安装 2.2、jsonpath的使用 2.3、jsonpath的基础语法 3、BeautifulSoup 3.1、bs4安装及创建 3.2、beautifulsoup的使用 3.3、beautifulsoup基本语…

【Python网络爬虫笔记】10- os库存储爬取数据

os库的作用 操作系统交互:os库提供了一种使用Python与操作系统进行交互的方式。使用os库来创建用于存储爬取数据的文件夹,或者获取当前工作目录的路径,以便将爬取的数据存储在合适的位置。环境变量操作:可以读取和设置环境变量。在…

TCP 为什么是 3 次握手 4 次挥手?

前言: TCP 的 3 次握手 4 次挥手是一个非常经典的问题,相信各位从事 Java 的朋友在职业生涯中没少被问到这个问题,本篇我们就展开分析一下 TCP 为什么是 3 次握手 4 次挥手。 TCP 协议 要搞清楚 TCP 为什么是 3 次握手 4 次挥手我们需要先…

智能客户服务:科技赋能下的新体验

在当今这个数字化时代,客户服务已经不仅仅是简单的售后服务,它已竞争的关键要素之一。随着人工智能、大数据、云计算等技术的飞速发展,智能客户服务正逐步改变着传统的服务模式,为企业和消费者带来了前所未有的新体验。 一、智能客…

C++ 内存管理和模板与STL

此篇目是之后各种C库的基础 目录 内存管理 内存分布 内存管理方式 new和delete operator new 与 operator delete函数 实现原理 定位new表达式(placement-new) 模板基础 泛型编程 模板 函数模板 类模板 STL 组成部分 内存管理 内存分布 int globalVar 1; //全局变量 静…

深入理解 CSS 文本换行: overflow-wrap 和 word-break

前言 正常情况下,在固定宽度的盒子中的中文会自动换行。但是,当遇到非常长的英文单词或者很长的 URL 时,文本可能就不会自动换行,而会溢出所在容器。幸运的是,CSS 为我们提供了一些和文本换行相关的属性;今…

Polars数据聚合与旋转实战教程

在这篇博文中,我们的目标是解决数据爱好者提出的一个常见问题:如何有效地从Polars DataFrame中创建汇总视图,以便在不同时间段或类别之间轻松进行比较。我们将使用一个实际的数据集示例来探索实现这一目标的各种方法。 Polars简介 Polars 是…

STM32CUBEMX+STM32F4+IAP串口升级应用,亲测可用,带详解

一、IAP的基本概念 IAP,全名为in applacation programming,即在应用编程。 也就是在应用程序中升级。好处就太多了,比如远程在线升级,不用人到现场拆开,用烧写器连接升级。 实现IAP技术的核心是一段预先烧写在单片机内部的IAP程序。这段程…

CTFHub 命令注入-综合练习(学习记录)

综合过滤练习 命令分隔符的绕过姿势 ; %0a %0d & 那我们使用%0a试试,发现ls命令被成功执行 /?ip127.0.0.1%0als 发现一个名为flag_is_here的文件夹和index.php的文件,那么我们还是使用cd命令进入到文件夹下 http://challenge-438c1c1fb670566b.sa…

深入探索 JVM:原理、机制与实战

一、JVM 概述 JVM(Java Virtual Machine)是 Java 程序运行的核心组件,它提供了一个独立于硬件和操作系统的执行环境,使得 Java 程序能够在不同平台上具有跨平台的特性。 JVM 主要由以下几部分组成: 类装载器&#xf…

视频推拉流EasyDSS无人机直播技术巡查焚烧、烟火情况

焚烧作为一种常见的废弃物处理方式,往往会对环境造成严重污染。因此,减少焚烧、推广绿色能源和循环经济成为重要措施。通过加强森林防灭火队伍能力建设与长效机制建立,各地努力减少因焚烧引发的森林火灾,保护生态环境。 巡察烟火…

挺详细的记录electron【V 33.2.0】打包vue3项目为可执行程序

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、直接看效果 二、具体步骤 1.安装配置electron 1.将 electron 包安装到应用的开发依赖中。 2.安装electron-packager依赖(打包可执行文件&#…

基本分页存储管理

一、实验目的 目的:熟悉并掌握基本分页存储管理的思想及其实现方法,熟悉并掌握基本分页存储管理的分配和回收方式。 任务:模拟实现基本分页存储管理方式下内存空间的分配和回收。 二、实验内容 1、实验内容 内存空间的初始化——可以由用户输…

Vue Web开发(五)

1. axios axios官方文档 异步库axios和mockjs模拟后端数据,axios是一个基于promise的HTTP库,使用npm i axios。在main.js中引入,需要绑定在Vue的prototype属性上,并重命名。   (1)main.js文件引用 imp…

论文概览 |《IJAEOG》2024.08 Vol.132(下)

本次给大家整理的是《International Journal of Applied Earth Observation and Geoinformation》杂志2024年08月第132期的论文的题目和摘要,一共包括88篇SCI论文!由于论文过多,我们将通过两篇文章进行介绍,本篇文章介绍第45--第8…

「数据结构详解·十五」树状数组

「数据结构详解一」树的初步「数据结构详解二」二叉树的初步「数据结构详解三」栈「数据结构详解四」队列「数据结构详解五」链表「数据结构详解六」哈希表「数据结构详解七」并查集的初步「数据结构详解八」带权并查集 & 扩展域并查集「数据结构详解九」图的初步「数据结构…

【sgFileLink】自定义组件:基于el-link、el-icon标签构建文件超链接组件,支持垃圾桶删除、点击预览视频/音频/图片/PDF格式文件

sgFileLink源代码 <template><div :class"$options.name"><el-link click.stop"clickFile(data)"><img :src"getSrc(data)" /><span>{{ getFileNameAndSize(data) }}</span></el-link><el-linkcl…

电机驱动模块L9110S详解

电机驱动模块是一种用于控制和驱动电机的设备&#xff0c;它能够将控制信号转化为适合电机操作的电流和电压。通过电机驱动模块&#xff0c;可以实现对电机的速度、方向等参数进行精确控制。 今天我们要介绍的 L9110S 电机驱动适合大学生、工程师、个人DIY、电子爱好者们学习和…

Unity 获取鼠标点击位置物体贴图颜色

实现 Ray ray Camera.main.ScreenPointToRay(Input.mousePosition); if (Physics.Raycast(ray, out RaycastHit hit)) {textureCoord hit.textureCoord;textureCoord.x * textureMat.width;textureCoord.y * textureMat.height;textureColor textureMat.GetPixel(Mathf.Flo…