html2Canvas和jspdf导出长pdf

news2024/11/24 11:38:52

续使用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.width
          const contentHeight = canvas.height
          const pageData = canvas.toDataURL('image/jpeg', 1.0)
          const pdfWidth = (contentWidth + 10) / 2 * 0.75
          const pdfHeight = (contentHeight + 200) / 2 * 0.75
          const imgWidth = pdfWidth
          const 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.coloradmin.cn/o/2091347.html

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

相关文章

亦菲喊你来学机器学习(17) --DBSCAN聚类算法

文章目录 DBSCAN聚类算法基本概念算法步骤特点构建模型模型参数训练模型完整代码展示 总结 DBSCAN聚类算法 DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一种基于密度的空间聚类算法,它能够将具有足够高密度的区…

宿舍|基于SprinBoot+vue的宿舍管理系统(源码+数据库+文档)

宿舍管理系统 基于SprinBootvue的私人诊所管理系统 一、前言 二、系统设计 三、系统功能设计 系统功能实现 后台模块实现 管理员功能实现 学生功能实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍&…

10 个最佳网络爬虫工具和软件,零基础入门到精通,收藏这一篇就够了

据 Strait Research 称,数据提取的需求正在不断增加,预计到 2031 年将达到 18 亿美元。 使用最好的网络爬行工具启动您的数据提取项目,并告别烦人的爬行头痛。我们研究和测试了数百种免费和付费软件,然后为您提出了十种最佳网络爬…

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

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

LeetCode题练习与总结:单词搜索Ⅱ--212

一、题目描述 给定一个 m x n 二维字符网格 board 和一个单词(字符串)列表 words, 返回所有二维网格上的单词 。 单词必须按照字母顺序,通过 相邻的单元格 内的字母构成,其中“相邻”单元格是那些水平相邻或垂直相邻…

使用 scikit-learn 实战感知机算法

一 引言 感知机(Perceptron)是最早的人工神经网络模型之一,由 Frank Rosenblatt 在 1957 年提出。虽然它相对简单,但在处理线性可分问题时却非常有效。本文将介绍如何使用 Python 的 scikit-learn 库来实现感知机,并通…

SpringBoot SSM vue在线作业考试系统

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

2024最新最全:网络安全人士【必备的30个安全工具】

1.Wireshark Wireshark(前称Ethereal)是一个网络封包分析软件。网络封包分析软件的功能是截取网络封包,并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口,直接与网卡进行数据报文交换。 2.Metasploit Meta…

Qt窗口 菜单栏 QMenuBar和的使用及说明

目录 1. 创建QT工程2. Qt5中添加资源文件3. 在Qt图形化界面创建菜单栏各组件4. 为菜单栏添加的选项增加图标5. 将菜单栏增加的功能拖动到工具栏6. 点击运行按钮查看运行结果7. 为菜单栏和工具栏增加的按钮添加相应的槽函数 1. 创建QT工程 打开Qt Creator软件,选择菜…

卧室无主灯照明布局:打造温馨舒适的私密空间

在追求温馨舒适的居家环境中,卧室作为休憩与放松的私密空间,其照明设计显得尤为重要。无主灯设计以其灵活多变、氛围营造独特的特点,正逐渐成为卧室照明的热门选择。那么,如何在卧室中实现无主灯的最佳布局呢?今天&…

【Python实战因果推断】73_图因果模型8

目录 Adjusting for Selection Bias Conditioning on a Mediator Adjusting for Selection Bias 不幸的是,纠正选择偏倚绝非易事。在我们一直在讨论的例子中,即使有随机对照试验,ATE也无法识别,仅仅是因为你无法在对那些回应了…

【精选】基于Django开发的静思阁自习预约管理系统(全网最新项目,独一无二)

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

视频结构化从入门到精通——视频结构化技术应用难点

视频结构化技术应用难点 随着视频数据在智能安防、智能交通、零售分析等领域的广泛应用,视频结构化技术成为了提取视频信息的关键。然而,在实际应用中,这项技术面临着诸多挑战。本文将深入探讨这些难点,并提供可能的解决方案和未…

saas收银系统源码(附部分代码截图)

随着时代不断发展,很多连锁品牌不断涌现,门店数量也日益增多,但连锁品牌在选收银系统时,如果选择传统的SaaS模式合作,按门店数量、按功能模块收取服务费,门店数量如果多,每年也会是一笔不小的开…

SQL进阶技巧:近N指标如何精确计算并扩充?

目录 0 场景描述 1 数据准备 2 问题分析 3 小结 0 场景描述 假设表price 有三个字段 用户: user_id 日期:dt 订单金额 price,求每个用户的近N天的消费金额 近N指标的种类多,且日期跨度近期密,远期大。表price : 结果: 近N:rds(recent_days) dt user_id rds…

8月31日微语报,星期六,农历七月廿八

8月31日微语报,星期六,农历七月廿八,周末愉快! 一份微语报,众览天下事! 1、川渝地区正经历同期罕见高温,与高压天气系统和地形有关。 2、全国超六成GDP增量产自59城,深圳超京沪居…

缓存:浅谈双写导致的数据一致性问题

从理论上来说,给缓存设置过期时间,是保证最终一致性的解决方案。这种方案下,我们对存入缓存的数据设置过期时间,所有的写操作以数据库为准,对缓存操作只是尽最大努力更新即可。也就是说如果数据库写成功,缓…

爬虫入门urllib 和 request (一)

前言 在开始进行爬虫的知识之前,我们需要明白web网页是怎么工作的?浏览器工具是怎么使用的?反爬虫的手段手段是那些? 一.web请求全过程解析 我们浏览器在输入完网址到我们看到网页的整体内容, 这个过程中究竟发生了些什么? 我…

JavaEE 第21节 UDP数据报结构剖析

目录 前言报文结构1、源端口号&目的端口号2、UDP长度3、校验和概念校验和计算方法 前言 本篇文章会围绕UDP报文的结构,对此协议展开详细的讲解,比如报文中每个字段的作用、以及填写方式。 阅读完这篇文章,你会对UDP数据报结构有个透彻的…

不知道电脑驱动软件哪个好,试试这几款免费不限速的驱动安装软件

每一台电脑都需要安装相关的驱动才能保证设备的正常运行,然而,很多用户搜索下载的驱动安装软件不是捆绑各类软件就是限速下载或者需要开通会员。下面小编就来和大家分享几款免费且不限速的驱动安装软件,帮助大家找到最适合自己的驱动管理工具…