html2Canvas和jspdf导出长pdf

续使用html2canvas和jspdf导出pdf包含跨页以及页脚_jspdf.umd.min.js-CSDN博客我的这篇文章再写一种情况因为最近我也使用到了

具体的html2Canvas和jspdf的我就不说了,直接开始了,

在公共方法的文件夹中建立一个新的文件htmlToPdf.js用来写咱们得方法然后通过main.js让全局都能进行使用

具体代码我也贴一下吧,让同学们方便使用

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {install(Vue) {Vue.prototype.htmlToPdf = (name, title) => {var pdfId = document.querySelector('#' + name)setTimeout(() => {html2Canvas(pdfId, {allowTaint: true,useCORS: true,scale: 2, dpi: window.devicePixelRatio * 1}).then((canvas) => {const contentWidth = canvas.widthconst contentHeight = canvas.heightconst pageData = canvas.toDataURL('image/jpeg', 1.0)const pdfWidth = (contentWidth + 10) / 2 * 0.75const pdfHeight = (contentHeight + 200) / 2 * 0.75const imgWidth = pdfWidthconst imgHeight = (contentHeight / 2 * 0.75)const PDF = new JsPDF('', 'pt', [pdfWidth + 50, pdfHeight + 100])PDF.addImage(pageData, 'jpeg', 33, 33, imgWidth, imgHeight)PDF.save(title + '.pdf')})}, 1000)}}
}

然后main.js中引入

在页面中使用

当然id在谁身上就从截取就哪里的

在使用者个pdf生成与导出的过程中我遇见了一个问题就是我的数据量比较大在表格中也还有一些小的循环与赋值,导致我生成的pdf中后半部分有数据出现展示的和赋值不一样的情况

最后我也灭幼解决,幸好的生成是在查看中我通过判断提前把值都给生成好,不尽行循环赋值解决的,如果大家有知道的欢迎留言,共同学习

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot SSM vue在线作业考试系统

SpringBoot SSM vue在线作业考试系统 首页 图片轮播 作业信息 通知公告 登录注册 留言板 个人中心 我的收藏 后台管理 登录注册 个人中心 教师信息管理 学生信息管理 学院信息管理 专业信息管理 班级信息管理 作业信息管理 作业提交管理 通知公告管理 试卷管理 试题管理 系统…

关于LLC知识14

1、LLC必须工作在感性区 2、为了降低LLC进入容性区后MOS管的电流应力&#xff0c;必须要选择快管&#xff0c;对体二极管的反向恢复参数有要求&#xff1a;trr<200ns 3、对于上下管的死区时间不能太短&#xff0c;否则电容无法充放电完成&#xff0c;就无法实现ZVS导通 如…

Nginx简单的安全性配置

文章目录 引言I Nginx简单的安全性配置禁止特定的HTTP方法限制URL长度禁止某些用户代理限制请求速率连接限制禁止访问某些文件类型II 常见的安全规则防御CC攻击User-Agent过滤GET-URL过滤GET-参数过滤POST过滤(sql注入、xss攻击 )引言 Nginx本身并不具备复杂的防火墙规则定制…

LeetCode题集-1- 两数之和

这个题目是什么意思呢&#xff1f;简单来说就是在一个数组中找出两个元素&#xff0c;使其和为我们设定的值&#xff0c;并且每个元素只能用一次。 如下图具体示例&#xff1a; 到这里不知道你是否已经有解题思路了呢&#xff1f; 解法一&#xff1a;双层循环 我第一反应就是…

2024了,Neo4j能显示节点图片吗?

经过一番调研&#xff0c;答案是官方的是不能的.但有一个中文版可以显示网络图片作为节点背景 如通义千问说说&#xff1a; Neo4j 图数据库本身并不直接支持在节点中存储和显示图片。但是&#xff0c;你可以通过几种方式间接实现这一功能&#xff1a;1. 存储图片URL 最简单的…

【数据结构】关于哈希表内部原理,你到底了解多少???(超详解)

前言&#xff1a; &#x1f31f;&#x1f31f;本期讲解关于哈希表的内部实现原理&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;http://t.csdnimg.cn/7D225 &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 目录 &a…

6.2K star!推荐一款开源混沌工程测试平台:Chaos Mesh

1、Chaos Mesh 介绍 Chaos Mesh是一个开源的混沌工程平台&#xff0c;旨在帮助用户在生产环境中测试、验证和优化其应用程序的可靠性和稳定性。通过引入故障注入和混沌工程原则&#xff0c;Chaos Mesh可以模拟各种故障场景&#xff0c;如网络延迟、节点故障、磁盘故障等&#…

JavaWeb JavaScript ⑧ DOM编程

在光芒万丈之前&#xff0c;我们都要欣然接受眼下的难堪和不易&#xff0c;接受一个人的孤独和无助&#xff0c;认真做好眼前的每一件事&#xff0c;你想要的都会有 —— 24.8.29 一、什么是DOM编程 简单来说&#xff1a;DOM(Document obiect Model)编程就是使用document对象的…

重大内幕!揭秘数据“零丢失”,全靠它

2017年&#xff0c;某运营商设备扩容&#xff0c;误删80万用户数据… 2020年初疫情期间&#xff0c;某电商公司恶意删库事件&#xff0c;导致业务停机3天&#xff0c;公司赔付1.5亿元人民币 “链家程序员删库”事件&#xff0c;恶意删除公司 9TB 数据&#xff0c;造成公司财务…

鸿蒙HarmonyOS开发:如何灵活运用服务卡片提升用户体验

文章目录 一、ArkTS卡片相关模块二、卡片事件能力说明三、卡片事件的主要使用场景3.1、使用router事件跳转到指定UIAbility3.1.1、卡片内按钮跳转到应用的不同页面3.1.2、服务卡片的点击跳转事件 3.2、通过message事件刷新卡片内容3.2.1、在卡片页面调用postCardAction接口触发…

网络安全的历史

如今&#xff0c;网络安全几乎成为各大公司和利益相关者关注的焦点。但在早期&#xff0c;网络安全的概念非常模糊。 直到多年以后&#xff0c;由于网络攻击和危险实体威胁的频繁发生&#xff0c;网络安全的发展才受到重视。这些措施的发展成为了网络安全的演变。 网络安全起…

CentOS全面停服,国产化提速,央国企信创即时通讯/协同门户如何选型?

01. CentOS停服带来安全新风险&#xff0c; 国产操作系统迎来新的发展机遇 2024年6月30日&#xff0c;CentOS 7版本全面停服&#xff0c;于2014年发布的开源类服务器操作系统——CentOS全系列版本生命周期画上了句号。国内大量基于CentOS开发和适配的服务器及平台&#xff0c…

500Kg载重无线遥控履带式无人车技术详解

500Kg载重无线遥控履带式无人车是一种专为复杂环境与多样化任务设计的高科技产品&#xff0c;具备卓越的机动性、承载能力和无线遥控功能。以下是对其技术特点的详细解析&#xff1a; 一、技术特点 履带式驱动系统 地形适应性&#xff1a;采用履带式驱动&#xff0c;能够…

实时图像编辑大革新!Adobe发布TurboEdit:可以通过文本来编辑图像,编辑时间<0.5秒!

今天给大家介绍Adobe研究院新的研究TurboEdit&#xff0c;可以通过文本来编辑图像&#xff0c;通过一句话就能改变图像中的头发颜色、衣服、帽子、围巾等等。而且编辑飞快&#xff0c;<0.5秒。简直是图像编辑的利器。 相关链接 项目&#xff1a;betterze.github.io/TurboE…

问题-解决

1. 在collection中的SetTest4_Student上面 此时我想解决LinkedHashSet的自定义降序身高问题是现在不行了 难道只能在构造器里面完成吗 还是说明只能为int类型 Double.compare(o1.getHeight(),o2.getHeight()) 在这道题中我在使用为什么不通过 Map<String, Integer>…

视频结构化从入门到精通——图像算法类型介绍

视频结构化主要图像算法 1 认识“数组、矩阵和张量” 1.1 什么是维度 在图像算法中&#xff0c;“维度”这个概念非常重要&#xff0c;它描述了数据的结构和形状。在不同的上下文中&#xff0c;维度可能有不同的含义&#xff0c;但总体来说&#xff0c;它们都与数据的排列方式…

【WiFi主要技术学习2】

WiFi协议学习2 WiFi SPEC理解频段信道带宽协商速率安全与加密WiFi主要技术理解BP直接序列扩频(Direct Sequence Spread Spectrum,DSSS)BPSKQPSK正交幅度调制(Quadrature Amplitude Modulation,QAM)互补码键控(Complementary Code Keying,CCK)正交频分复用(Orthogonal…

基于mallat小波变换的图像分解和重建算法matlab仿真,对比不同分解层数图像重建质量

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a 3.部分核心程序 &#xff08;完整版代码包含详细中文注释和操作步骤视频&#xff09…

axios取消请求CancelToken的原理解析及用法示例

文章目录 一、axios的实例与请求流程二、CancelToken 的作用三、CancelToken 的实现原理四、取消请求的流程五、CancelToken用法六、利用拦截器取消请求1、axios请求拦截器2、axios响应拦截器3、利用路由导航守卫取消请求 一、axios的实例与请求流程 下图是axios实例属性的简图…

Java技术栈 —— Spark入门(三)之实时视频流

Java技术栈 —— Spark入门&#xff08;三&#xff09;之实时视频流转灰度图像 一、将摄像头数据发送至kafka二、Kafka准备topic三、spark读取kafka图像数据并处理四、本地显示灰度图像(存在卡顿现象&#xff0c;待优化) 项目整体结构图如下 参考文章或视频链接[1] Architectur…