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

vue实现pdf下载——html2canvas

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;页面已经…...

安装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 安装…...

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

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

网络数据库后端相关面试题(其三)

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

Hadoop之HDFS分布式文件系统

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

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

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

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 …...

数学公式编辑器(前端预研)

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

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

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

【库】nprogress 顶部进度条

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

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

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

web刷题记录(5)

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

Redis高并发高可用

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

【前端取不到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...

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

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

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

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

迷宫最短路径求解--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…...

SpringFramework总结

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

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

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

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…...

3步免费解锁付费内容:智能内容解锁工具使用指南

3步免费解锁付费内容&#xff1a;智能内容解锁工具使用指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息获取日益困难的今天&#xff0c;付费墙已经成为阻碍知识传播的主要障…...

超实数(Hyper-reals)的数学革命:从Hewitt到Robinson的探索历程

1. 超实数&#xff1a;一场颠覆传统数学认知的革命 想象一下&#xff0c;当你第一次学习实数时&#xff0c;老师告诉你数轴上的点与实数一一对应&#xff0c;没有任何空隙。这个看似完美的体系在20世纪中叶被一群数学家彻底颠覆了。超实数&#xff08;Hyper-reals&#xff09;的…...

League-Toolkit:基于LCU API的英雄联盟智能辅助工具

League-Toolkit&#xff1a;基于LCU API的英雄联盟智能辅助工具 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的MOBA游…...

GPEN图像修复新手入门:界面介绍与功能详解

GPEN图像修复新手入门&#xff1a;界面介绍与功能详解 1. 认识GPEN图像修复工具 你是否遇到过这样的情况&#xff1a;翻出老照片想分享给亲友&#xff0c;却发现照片已经泛黄、模糊甚至出现划痕&#xff1f;GPEN图像修复工具就是为解决这些问题而生的专业解决方案。这个由科哥…...

Yahoo Finance API 金融数据接口实战指南:从技术原理到商业价值落地

Yahoo Finance API 金融数据接口实战指南&#xff1a;从技术原理到商业价值落地 【免费下载链接】YahooFinanceApi A handy Yahoo! Finance api wrapper, based on .NET Standard 2.0 项目地址: https://gitcode.com/gh_mirrors/ya/YahooFinanceApi 一、价值定位&#x…...

【AI平台】n8n进阶指南:Docker环境下无缝更新与配置保留实战

1. 为什么需要无缝更新n8n&#xff1f; 如果你正在使用n8n这个强大的工作流自动化工具&#xff0c;肯定会遇到版本更新的问题。作为一个长期使用n8n的开发者&#xff0c;我深刻理解那种"既想用新功能又怕配置丢失"的矛盾心理。每次看到n8n后台的更新提示&#xff0c;…...

告别特征点!FAST-LIVO2的‘直接法’融合:如何用原始点云和图像块实现更快的SLAM?

FAST-LIVO2&#xff1a;直接法SLAM的革命性突破与工程实践指南 1. 直接法SLAM的技术演进与核心价值 当波士顿动力的Atlas机器人完成后空翻动作时&#xff0c;其核心定位系统正面临着与人类体操运动员相似的挑战——如何在高速运动中维持对环境的精确感知。这正是FAST-LIVO2这类…...

​答辩 PPT「懒人救星」实测:paperxie AI 一键把论文转成答辩稿,再也不用熬夜排版​

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AIPPThttps://www.paperxie.cn/ppt/createhttps://www.paperxie.cn/ppt/create paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AIPPT 谁本科答辩没栽在 PPT 上&#xff1f;万字论文…...

Qwen3-0.6B-FP8企业级部署教程:基于Dify打造AI应用平台

Qwen3-0.6B-FP8企业级部署教程&#xff1a;基于Dify打造AI应用平台 想快速搭建一个属于自己或团队的AI应用&#xff0c;但又觉得从零开发太复杂&#xff1f;今天&#xff0c;我们就来聊聊如何用Qwen3-0.6B-FP8这个轻量高效的模型&#xff0c;结合Dify这个强大的AI应用开发平台…...

SleeperX:如何彻底解决MacBook电源管理的3个核心痛点

SleeperX&#xff1a;如何彻底解决MacBook电源管理的3个核心痛点 【免费下载链接】SleeperX MacBook prevent idle/lid sleep! Hackintosh sleep on low battery capacity. 项目地址: https://gitcode.com/gh_mirrors/sl/SleeperX 你是否经历过这些场景&#xff1f;正在…...