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

vue实现pdf下载——html2canvas

news 文章来源：https://blog.csdn.net/weixin_42217154/article/details/139460442 2025/1/12 22:49:34

html2canvas 官方文档icon-default.png?t=N7T8https://html2canvas.hertzen.com/getting-started

html2canvas 的原理是通过遍历DOM树,将每一个HTML元素转化为Canvas对象,并叠加到一起形成一张完整的图片或者PDF文件。

1. 安装插件

npm install html2canvas jspdf --save

 2.使用（页面已经写好）

2.1 在页面引入html2canvas

  1. import html2Canvas from 'html2canvas'

  2. import JsPDF from 'jspdf'

2.2 创建下载pdf页面的方法

methods:{downloadPdf () {var title = "证书"html2Canvas(document.querySelector('#pdfDom'), {allowTaint: true}).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let PDF = new JsPDF('', 'pt', 'a4')if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')})}}

 2.3 页面调用下载方法

 最终实现效果

    原要下载的页面

2. 下载的pdf

 

相关文章：

vue实现pdf下载——html2canvas

html2canvas 官方文档https://html2canvas.hertzen.com/getting-started html2canvas 的原理是通过遍历DOM树,将每一个HTML元素转化为Canvas对象,并叠加到一起形成一张完整的图片或者PDF文件。 1. 安装插件 npm install html2canvas jspdf --save 2.使用&#xff08;页面已经…...

编程日记 2024/6/12 7:34:51

安装docker+mysql的一些坑

yum -y install docker 提示missing signature 参考这里 https://www.8a.hk/news/content/8235.html 卸载旧的docker sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine 安装…...

编程日记 2024/6/12 7:33:50

React Native采集数据离线存储、网络状态监控、加密上传、鉴权

在无网络环境下进行数据采集并在有网络时上传至服务器&#xff0c;同时确保数据的鉴权和加密&#xff0c;这一需求需要考虑多方面的实现细节。无论您选择原生开发还是使用React Native&#xff08;甚至Expo&#xff09;&#xff0c;以下是如何实现这一需求的具体步骤和建议。 …...

编程日记 2024/6/12 7:32:49

网络数据库后端相关面试题（其三）

18&#xff0c; 传输控制协议tcp和用户数据报协议udp有哪些区别 第一&#xff0c;tcp是面向字节流的&#xff0c;基本的传输单位是tcp报文段&#xff1b;而udp是面向报文的&#xff0c;基本传输单位是用户数据报。 第二&#xff0c; tcp注重安全可靠性&#xff0c;连接双方在…...

编程日记 2024/6/12 7:31:48

Hadoop之HDFS分布式文件系统

HDFS简介 Hadoop Distributed File System (HDFS): HDFS 是 Hadoop 的分布式文件系统，它设计用于存储大量数据，并提供 高吞吐率的数据访问，通过将数据分块存储在多个节点上，实现数据的冗余存储和容错。 HDFS重要概念 HDFS 通过统一的命名空间目录树来定位文件； 另外，它…...

编程日记 2024/6/12 7:30:47

插入删除单链表指定结点-偷天换日法

王道说下面的代码有BUG&#xff0c;比如当删除的结点p在最后一个元素时&#xff0c;p->nextNULL; So *q NULL; q->data就是错误的&#xff0c;我认为加个判断就行 加个判断即可 /*看着是删除q了&#xff0c;从结果上看就是把p删除了 偷天换日法*/ bool DeleteNode(LNod…...

编程日记 2024/6/12 7:29:46

MybatisPlus代码生成器使用案例

针对数据库中的实体类表&#xff0c;自动生成相关的pojo类&#xff0c;mapper&#xff0c;service等 1. Get-Started 基于mybatisplus&#xff0c;idea下载mybatisplus插件 sql文件 /*!40101 SET OLD_CHARACTER_SET_CLIENTCHARACTER_SET_CLIENT */; /*!40101 SET NAMES utf8 …...

编程日记 2024/6/12 7:28:45

数学公式编辑器（前端预研）

数学公式输入wangeditor&#xff1a; vue2使用wangeditor实现数学公式和富文本编辑器 mathjax文档&#xff1a;MathJax: 让前端支持数学公式 mathjax识别数学公式vue中使用mathjax识别latex数学公式 数学公式编辑器&#xff1a;&#xff08;少&#xff09; https://github.com…...

编程日记 2024/6/12 7:25:43

架构设计-如何安全地传输密码

java web 项目中经常会遇到登录或注册的场景，如果查看浏览器的 network 网络请求时，用户的密码以明文方式传输，会造成很多安全隐患，这就涉及到密码如何安全传输的问题。 数据加密的重要性不言而喻，通用的加密技术有 哈希散列、对称加密、非对称加密。 哈希散列 哈希散列是…...

编程日记 2024/6/12 7:18:33

【库】nprogress 顶部进度条

yarn add nprogress router文件 前置路由添加启动 后置路由添加关闭 router.beforeEach((to, from, next) > { NProgress.start() next() }) router.afterEach(() > { NProgress.done() }) App.vue 文件 引入样式 <script setup> import "nprogress/npro…...

编程日记 2024/6/12 7:17:32

15、架构-可靠通讯之服务安全

概述 我们已经了解了与具体架构形式无关的业界主流安全概念和技术标准&#xff08;如TLS、JWT、OAuth 2等概念&#xff09;&#xff0c;在上一章节探讨了与微服务运作特点相适应的零信任安全模型。在本节中&#xff0c;我们将从实践和编码的角度出发&#xff0c;介绍在微服务时…...

编程日记 2024/6/12 7:16:30

web刷题记录（5）

[羊城杯 2020]easycon 进来以后就是一个默认测试页面&#xff0c; 在这种默认界面里&#xff0c;我觉得一般不会有什么注入点之类的&#xff0c;所以这里先选择用御剑扫扫目录看看有没有什么存在关键信息的页面 扫了一半发现&#xff0c;很多都是和index.php文件有关&#xff0…...

编程日记 2024/6/12 7:15:29

Redis高并发高可用

1. 复制机制 在分布式系统中&#xff0c;为了解决单点问题&#xff0c;通常会将数据复制多个副本部署到其他机器&#xff0c;以满足故障恢复和负载均衡等需求。Redis提供了复制功能&#xff0c;实现了相同数据的多个Redis副本。复制功能是高可用Redis的基础&#xff0c;后面的…...

编程日记 2024/6/12 7:14:28

【前端取不到cookie的的原因】http-only

某条cookie有http-only属性时&#xff0c;下面两种方法都取不到&#xff0c;还是改需求吧&#xff0c;别取了 1、 npm install js-cookie --save import Cookies from js-cookie let cookieValue Cookies.get(name)2、document.cookie...

编程日记 2024/6/12 7:12:25

推荐 2 个 火火火火 的开源项目

推荐两个开源项目&#xff0c;一个能让你的小爱音响更聪明。另外一个可以让你简单的下载互联网网站上的视频、文件、富文本内容。 01 MiGPT: 让你的小爱音响更聪明 让你的小爱音箱更聪明&#xff0c;提高智能家居的互动性和个性化体验的开源利器&#xff01; MiGPT 将 ChatGPT …...

编程日记 2024/6/12 7:10:24

从0到100：找搭子小程序开发笔记(一)

背景调查 “找搭子”小程序&#xff1a;能够解决人们在社交、休闲和约会方面的需求&#xff0c;提供方便快捷的方式来找到合适的伴侣或活动伙伴。许多人在社交场合中感到焦虑或不安&#xff0c;因此他们更倾向于使用在线平台来认识新的朋友或搭子。有些人可能生活在一个较小或…...

编程日记 2024/6/12 7:09:23

迷宫最短路径求解--c++

【代码】 #include<iostream> #include<queue> #include<stack> using namespace std; #define ROW 8 #define COL 8 //测试迷宫数据 int maze[ROW][COL] {{0,0,0,1,0,0,0,0},{0,1,0,1,0,1,0,1},{0,1,0,0,0,1,0,1},{0,1,0,1,1,1,0,1},{0,1,0,1,1,0,0,0},{0…...

编程日记 2024/6/12 7:08:22

SpringFramework总结

一.SpringFramework介绍 (一)Spring 广义上的 Spring 泛指以 Spring Framework 为基础的 Spring 技术栈。 Spring 已经不再是一个单纯的应用框架&#xff0c;而是逐渐发展成为一个由多个不同子项目&#xff08;模块&#xff09;组成的成熟技术&#xff0c;例如 Spring Frame…...

编程日记 2024/6/12 7:07:21

品牌与产品：消费者决策的经济逻辑与品牌宣传的战略意义

在当今日益全球化的经济环境中&#xff0c;品牌与产品之间的关系对于企业的成功与否起着至关重要的作用。然而&#xff0c;在消费者做出购买决策时&#xff0c;他们到底是在选择产品本身&#xff0c;还是在选择附着在产品之上的品牌价值&#xff1f;同样&#xff0c;当客户选择…...

编程日记 2024/6/12 7:06:20

MFC四种方法编写多线程

本文以四个demo为例&#xff0c;对MFC的多线程进行学习。学习的过程中写了四个demo&#xff0c;将其做成笔记&#xff0c;发布在csdn上面。 mfc多线程demo1 volatile BOOL m_bRun; CEdit* edit; void ThreadFunc(){CTime time;CString strTime;m_bRun true;while(m_bRun){ti…...

编程日记 2024/6/12 7:05:19

VPN简介

一、VPN 概念定义 VPN&#xff0c;即虚拟专用网络&#xff08;Virtual Private Network&#xff09;&#xff0c;依靠ISP&#xff08;Internet Service Provider&#xff09;和NSP&#xff08;Network Service Provider&#xff09;在公共网络中建立的虚拟专用通信网络&#x…...

编程日记 2024/6/12 7:03:16

【C/C++】用C语言写一个数据仓库，存储和修改数据

这个代码实现了一个简单的数据仓库&#xff0c;其中数据被存储在一个3x3的二维数组中。用户可以通过控制台界面与这个数据仓库进行交互&#xff0c;可以选择查看数据或者修改数据。 基础版源码&#xff1a; #include <stdio.h>#define HOUSESIZE 3 int arr[HOUSESIZE][…...

编程日记 2024/6/12 7:00:13

YOLO v5与YOLO v8框图比较

1. 介绍 YOLO (You Only Look Once) 是一个用于目标检测的卷积神经网络模型&#xff0c;以其高精度、高速度和易用性著称。YOLO v5 是目前最流行的 YOLO 版本之一&#xff0c;而 YOLO v8 是 YOLO 的最新版本。 2. 原理详解 YOLO 系列模型的基本原理是将目标检测任务转化为图…...

编程日记 2024/6/12 6:59:12

Redis集群（5）

集群原理 节点通信 通信流程 在分布式存储系统中&#xff0c;维护节点元数据&#xff08;如节点负责的数据、节点的故障状态等&#xff09;是关键任务。常见的元数据维护方式分为集中式和P2P方式。Redis集群采用P2P的Gossip协议&#xff0c;这种协议的工作原理是节点之间不断…...

编程日记 2024/6/12 6:58:11

STM32H5 DAC 配置

STM32 H5 DAC的详细初始化过程可以分为以下几个步骤&#xff0c;以下是根据参考文章和相关资料整理的具体步骤和参数设置&#xff1a; 1、使能相关时钟&#xff1a; 使能GPIOA&#xff08;或其他对应DAC输出引脚的GPIO端口&#xff09;的时钟。这通常是通过调用RCC_APB2Perip…...

编程日记 2024/6/12 6:57:10

第十九节：暴力递归到动态规划

一 动画规划的概念 优化出现重复解的递归 一旦写出递归来&#xff0c;改动态规划就很快 尝试策略和状态转移方程是一码事 学会尝试是攻克动态规划最本质的能力 如果你发现你有重复调用的过程&#xff0c;动态规划在算过一次之后把答案记下来&#xff0c;下回在越到重复调用过程…...

编程日记 2024/6/12 6:55:08

服务器部署spring项目jar包使用bat文件，省略每次输入java -jar了

echo off set pathC:\Program Files\Java\jre1.8.0_191\bin START "YiXiangZhengHe-8516" "%path%/java" -Xdebug -jar -Dspring.profiles.activeprod -Dserver.port8516 YiXiangZhengHe-0.0.1-SNAPSHOT.jar 将set path后面改成jre的bin文件夹 START 后…...

编程日记 2024/6/12 6:54:06

2024备忘知识点

1. adb shell dumpsys package f |grep fin 过滤查找指纹服务 &#xff11;&#xff0e;　adsp write /sys/kernel/boot_adsp/boot 1 Please change replace dev_dbg into dev_err in kernel file adsp-loader.c. Then check whether "write /sys/kernel/boot_adsp/…...

编程日记 2024/6/12 6:53:05

JS基础与高级应用: 性能优化

在现代Web开发中&#xff0c;性能优化已成为前端工程师必须掌握的核心技能之一。本文从URL输入到页面加载完成的全过程出发&#xff0c;深入分析了HTTP协议的演进、域名解析、代码层面性能优化以及编译与渲染的最佳实践。通过节流、防抖、重复请求合并等具体技术手段&#xff0…...

编程日记 2024/6/12 6:49:00

Python | Leetcode Python题解之第145题二叉树的后序遍历

题目&#xff1a; 题解&#xff1a; class Solution:def postorderTraversal(self, root: TreeNode) -> List[int]:def addPath(node: TreeNode):count 0while node:count 1res.append(node.val)node node.righti, j len(res) - count, len(res) - 1while i < j:res…...

编程日记 2024/6/12 6:47:58

wordpress頂部公告插件/seo发外链工具

当我们的项目中有peerDependencies时&#xff0c;执行npm install会发现peerDependencies的依赖项并不会下载&#xff0c;如果一个个下载太过麻烦&#xff0c;因此推荐一个npm库npm-install-peers&#xff0c;可以直接下载。 npm install --save-dev npm-install-peersnpm scr…...

编程日记 2025/1/12 22:10:26

平顶山市建设局网站/百度竞价排名案例分析

标题: A Robust Laser-Inertial Odometry and Mapping Method for Large-Scale Highway Environments作者: Shibo Zhao, Zheng Fang, HaoLai Li, Sebastian Scherer1摘要我们提出了一种新的激光惯性里程计和建图方法,以实现大规模公路环境中的实时、低漂移和鲁棒的位姿估计.该方…...

编程日记 2025/1/12 21:29:54

公司网站建设工作总结/哈尔滨网络优化推广公司

MySQL 在修改表结构的时候可能会中断产品的正常运行影响用户体验&#xff0c;甚至更坏的结果&#xff0c;丢失数据。不是所有的数据库管理员、程序员、系统管理员都非常了解MySQL能避免这种情况。DBA会经常碰到这种生产中断的情况&#xff0c;当升级脚本修改了应用层和数据库层…...

编程日记 2025/1/12 20:59:48

扁平化设计网站欣赏/网络营销形式

C20(C 编程语言标准2020版)将是C 语言一次非常重大的更新&#xff0c;将为这门语言引入大量新特性。c20标准文档是官方目前最新文件&#xff0c;更新2020年。需要的朋友可下载试试&#xff01;此次更新看 C20 的 Big Four(四大新特性&#xff1a;概念、范围、协程和模块)以及核…...

编程日记 2025/1/12 16:31:48

网站关键词更换了/百度小说排行

夏天里适当做一些运动&#xff0c;非常有助于健康。运动过程中音乐的陪伴会让你充满动力。小米蓝牙耳机Line Free搭载全新的Qualcomm QCC5125蓝牙音频芯片&#xff0c;支持Qualcomm aptX™ Adaptive音频技术&#xff0c;带来更高质量的蓝牙音频体验。细腻触感 佩戴舒适小米Line…...

编程日记 2025/1/12 11:39:43

wordpress err_too_many_redirects/交换友情链接吧

【题目描述】https://www.luogu.com.cn/problem/P1048https://www.acwing.com/problem/content/description/425/【题目描述】 辰辰是个天资聪颖的孩子&#xff0c;他的梦想是成为世界上最伟大的医师。 为此&#xff0c;他想拜附近最有威望的医师为师。 医师为了判断他的资质&a…...

编程日记 2025/1/12 10:04:31