当前位置: 首页 > news >正文

html2canvas+jsPDF实现前端导出pdf

html2canvas+jsPDF实现前端导出pdf

  1. 安装插件包
npm install jspdf
npm install html2canvas
  1. 引入插件
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
  1. 生成pdf
        const perCanvas = document.createElement('canvas');perCanvas.style.backgroundColor = '#fff'const context = perCanvas.getContext('2d');html2canvas(this.$refs.pdfContent, {scale: 4, //放大防止模糊dpi: 300 // 处理模糊问题}).then((canvas) => {const canvasData = canvas.toDataURL('image/jpeg', 1.0);// pdf的尺寸const pdfWidth = canvas.width;const pdfHeight = pdfWidth * 1.414;//切割后的canvas图片的宽高,就等于每页pdf的宽高perCanvas.width = canvas.width;perCanvas.height = pdfHeight;// 每张图片的高度:适当减少100,上下各留50页边距const perHeight = pdfHeight - 100;// 计算切割次数let splitCount = Math.ceil(canvas.height / perHeight);if (splitCount * perHeight < canvas.height) splitCount++;//创建img对象,加载完整的canvas图片const img = new Image();img.src = canvasData;//创建pdf对象//待图片加载完成setTimeout(() => {let pdf = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]);//切割canvas图片,贴到每一页pdf中for (let i = 0; i < splitCount; i++) {const startY = i * perHeight; // 起始y坐标// 清空画布context.clearRect(0, 0, perCanvas.width, pdfHeight);context.fillStyle = '#fff';context.fillRect(0, 0, perCanvas.width, pdfHeight);// 绘制当前切割区域的图片context.drawImage(img, 0, startY, perCanvas.width, perHeight, 0, 0, perCanvas.width, perHeight);const perCanvasData = perCanvas.toDataURL('image/jpeg', 1.0);pdf.addImage(perCanvasData, 'JPEG', 0, 50, perCanvas.width, perCanvas.height, '', 0);if (i < splitCount - 1) pdf.addPage();};let pdfBlob = pdf.output('blob');// pdf.save("content.pdf"); 执行此api会直接下载this.showpdf = falselet signBlob = new FormData() //把文件上传到后台signBlob.append('file', pdfBlob, ".pdf")//此处将signBlob上传即可}, 0)

相关文章:

html2canvas+jsPDF实现前端导出pdf

html2canvasjsPDF实现前端导出pdf 安装插件包 npm install jspdf npm install html2canvas引入插件 import html2canvas from html2canvas; import jsPDF from jspdf;生成pdf const perCanvas document.createElement(canvas);perCanvas.style.backgroundColor #fffconst …...

Paimon新版本核心特性和生产实践解读

最近Apche Paimon发布了最新版本0.7.0&#xff0c;在这个版本中&#xff0c;Paimon对一些新特性进行了增强。 Paimon在数据湖领域发展迅速&#xff0c;未来会在整个数据开发领域占有很重要的地位&#xff0c;今天我们来盘点一下当前能力的特点以及在生产环境中的使用情况。 Loo…...

Java设计模式-策略模式

策略模式1 概述2 结构3 案例实现4 优缺点5 使用场景6 JDK源码解析 策略模式 1 概述 先看下面的图片&#xff0c;我们去旅游选择出行模式有很多种&#xff0c;可以骑自行车、可以坐汽车、可以坐火车、可以坐飞机。 作为一个程序猿&#xff0c;开发需要选择一款开发工具&#x…...

vxe-table配合Export2Excel导出object类型数据{type,count}。表格数据呈现是利用插槽,导出只要count该怎么做

先贴一张数据来&#xff1a; 一、然后是vxe-grid的columns配置&#xff1a; 然后就正常用封装好的Export2Excel就行。 碰到一次在控制台报错&#xff1a; 没复现出来&#xff0c;大概就说是count咋样咋样。 以后碰到的话再说&#xff0c;各位要用的话也注意看看 二、或者 用js…...

Java面试题(主要分清区别!!!)

RequestBody和ResponseBody的区别&#xff1f; RequestBody&#xff1a;接收json或xml数据 ResponseBody的&#xff1a;返回json或xml数据 RestController和Controller的区别&#xff1f; Controller&#xff1a;默认返回的是jsp页面 RestController&#xff1a;返回的是一个js…...

OD_2024_C卷_200分_2、石头剪刀布【JAVA】【逻辑分析】

题目描述 石头剪刀布游戏有 3 种出拳形状&#xff1a;石头、剪刀、布。分别用字母A、B、C表示。 游戏规则&#xff1a; 出拳形状之间的胜负规则如下&#xff1a; A > B&#xff1b; B > C&#xff1b; C > A&#xff1b; “>” 左边一个字母&#xff0c;表示相对…...

矩阵求导笔记

文章目录 1. ML中为什么需要矩阵求导2. 向量函数与矩阵求导初印象3. YX 拉伸术3.1 f(x)为标量&#xff0c;X为列向量3.2 f(x)为列向量&#xff0c;X 为标量3.3 f(x)为列向量&#xff0c;X 为列向量 4. 常见矩阵求导公式4.1 Y A T X YA^TX YATX4.2 Y X T A X YX^TAX YXTAX 1…...

全量知识系统问题及SmartChat给出的答复 之19 关于演示模板

Q.60 可参考的演示模版 (word-def occupiedinterest 5type EBsubclass SEBtemplate (script $Demonstrateactor nilobject nildemands nilmethod (scene $Occupyactor nillocation nil))fill (((actor) (top-of *actor-stack*))((method actor) (t…...

Linux学习——线程的控制

目录 ​编辑 一&#xff0c;线程的创建 二&#xff0c;线程的退出 1&#xff0c;在子线程内return 2,使用pthread_exit(void*) 三&#xff0c;线程等待 四&#xff0c;线程获取自己的id值 五&#xff0c;线程取消 六&#xff0c;线程分离 一&#xff0c;线程的创建 在对…...

Rust常用特型之Drop特型

Rust常用特型之Drop特型.md在Rust标准库中&#xff0c;存在很多常用的工具类特型&#xff0c;它们能帮助我们写出更具有Rust风格的代码。 今天&#xff0c;我们主要学习Drop特型。 &#xff08;注&#xff1a;本文更多的是对《Programing Rust 2nd Edition》的自己翻译和理解&…...

嵌入式 Linux 学习

在学习嵌入式 Linux 之前&#xff0c;我们先来了解一下嵌入式 Linux 有哪些东西。 1. 嵌入式 Linux 的组成 嵌入式 Linux 系统&#xff0c;就相当于一套完整的 PC 软件系统。 无论你是 Linux 电脑还是 windows 电脑&#xff0c;它们在软件方面的组成都是类似的。 我们一开电…...

Makedown语法

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...

SQLite语句

1.重写SQLiteOpenHelper // 例. public class MySQLiteOpenHelper extends SQLiteOpenHelper {public MySQLiteOpenHelper(Nullable Context context, Nullable String name, Nullable SQLiteDatabase.CursorFactory factory, int version) {super(context, name, factory, ve…...

Spring揭秘:Aware接口应用场景及实现原理!

内容概要 Aware接口赋予了Bean更多自感知的能力&#xff0c;通过实现不同的Aware接口&#xff0c;Bean可以轻松地获取到Spring容器中的其他资源引用&#xff0c;像ApplicationContext、BeanFactory等。 这样不仅增强了Bean的功能&#xff0c;还提高了代码的可维护性和扩展性&…...

校园小情书微信小程序,社区小程序前后端开源,校园表白墙交友小程序

功能 表白墙卖舍友步数旅行步数排行榜情侣脸漫画脸个人主页私信站内消息今日话题评论点赞收藏 效果图...

从Pandas到Polars :数据的ETL和查询

对于我们日常的数据清理、预处理和分析方面的大多数任务&#xff0c;Pandas已经绰绰有余。但是当数据量变得非常大时&#xff0c;它的性能开始下降。 本文将介绍如何将日常的数据ETL和查询过滤的Pandas转换成polars。 图片 Polars的优势 Polars是一个用于Rust和Python的Data…...

Node.Js编码注意事项

Node.js 中不能使用 BOM 和 DOM 的 API&#xff0c;可以使用 console 和定时器 APINode.js 中的顶级对象为 global&#xff0c;也可以用 globalThis 访问顶级对象 浏览器端js的组成 Node.js中的JavaScript组成 相比较之下发现只有console与定时器是两个API所共有的&#xff…...

floodfill算法题目

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;在下面的题目中慢慢体会floodFill算法&#xff0c;虽然是新的算法&#xff0c;但是用的思想和前面的文章几乎一样&#xff0c;代码格式也几乎一样&#xff0c;但不要去背代码 图像渲染 https://leetcode.cn/problems/flood…...

AI相关的实用工具分享

AI实用工具大赏&#xff1a;赋能科研与生活&#xff0c;探索AI的无限可能 前言 在数字化浪潮汹涌而至的今天&#xff0c;人工智能&#xff08;AI&#xff09;已经渗透到我们生活的方方面面&#xff0c;无论是工作还是生活&#xff0c;都在悄然发生改变。AI的崛起不仅为我们带…...

K8s — PVC|PV Terminating State

在本文中&#xff0c;我们将讨论PV和PVC一直Terminating的状态。 何时会Terminting? 在以下情况下&#xff0c;资源将处于Terminating状态。 在删除Bounded 状态的PVC之前&#xff0c;删除了对应的PV&#xff0c;PV在删除后是Terminting状态。删除PVC时&#xff0c;仍有引用…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...