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

 

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

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

相关文章

Stable Diffusion:多领域应用的创新引擎

一、引言 在当今数字化时代&#xff0c;人工智能技术的飞速发展为各个领域带来了前所未有的机遇和挑战。Stable Diffusion 作为一种先进的随机过程模型&#xff0c;以其独特的优势和广泛的应用潜力&#xff0c;成为了人工智能领域的研究热点。本文将深入探讨 Stable Diffusion…

git 的基本操作 Master and branch的版本合并 @ VS 1019

前言&#xff1a; 在VS 2019有git 的可视化管理,但&#xff0c;感觉微软其实就是在git上包了一层。版本冲突后&#xff0c;还是要靠git 的命令行代码搞。本文记录了一次&#xff0c;branch和master的版本合并的过程。作为&#xff0c;后续的参考。 【注意&#xff0c;这个是一…

【二进制部署k8s-1.29.4】十三、metrics-server的安装部署

文章目录 简介 一.metrics-server的安装 简介 本章节主要讲解metrics-server的安装&#xff0c;metrics-server主要是用于采集k8s中节点和pod的内存和cpu指标&#xff0c;在观察几点和pod的实时资源使用情况还是比较有用的&#xff0c;如果需要记录历史信息&#xff0c;建议采用…

运行编译openjdk12-33

编译环境 ubuntu20 Ubuntu里用户可以自行选择安装GCC或CLang来进行编译&#xff0c;但必须确保最低的版本为GCC 4.8或者CLang 3.2以上&#xff0c;官方推荐使用GCC 7.8或者CLang 9.1来完成编译。 源码 https://github.com/openjdk/jdk/tree/jdk-12%2B33 安装gcc sudo apt…

人工智能的未来发展前景:机遇与挑战

人工智能&#xff08;AI&#xff09;的发展在过去的几十年里取得了突飞猛进的成就&#xff0c;已经成为推动全球科技创新的关键动力之一。随着技术的不断进步和应用的日益广泛&#xff0c;AI的未来发展前景显得更加广阔&#xff0c;同时也面临一系列新的机遇和挑战。 技术革新…

使用neural_network_console训练模型并导出.nnb文件应用于索尼spresense

一.创建数据集 首先你需要一个csv标记的数据集 然后我们使用neural_network_console将数据集进行处理 dataset->create dataset->image 用户可以通过该界面选择源目录&#xff08;Source Dir&#xff09;&#xff0c;输出目录&#xff08;Output Dir&#xff09;&…

哈希表、HashMap\Map-1657. 确定两个字符串是否接近

题目链接及描述 1657. 确定两个字符串是否接近 - 力扣&#xff08;LeetCode&#xff09; 题目分析 今日看到这道题目&#xff0c;乍一看觉得非常熟悉&#xff0c;对于将一个字符串转换为另一个字符串的题目之前做过一些。分析题目&#xff0c;题目中所述就是两种操作&#xff…

ubuntu蓝牙连接问题

ubuntu蓝牙连接问题 ubuntu蓝牙连接问题1、安装驱动2、优化蓝牙配置文件3、解决 Failed to connect: org.bluez.Error.Failed ubuntu蓝牙连接问题 之前我发现电脑有蓝牙图标&#xff0c;且能打开关闭&#xff0c;就以为蓝牙默认已经配置好了&#xff0c;直到有一天我尝试连接我…

嵌入式软件跳槽求指导?

嵌入式软件行业的跳槽确实需要一些特定的策略和技巧。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 因为这个…

【设计模式】装饰器模式(结构型)⭐⭐

文章目录 1.概念1.1 什么是装饰器模式1.2 优点与缺点 2.实现方式3. Java 哪些地方用到了装饰器模式4. Spring 哪些地方用到了装饰器模式 1.概念 1.1 什么是装饰器模式 它允许用户在不修改现有对象的代码的情况下向对象添加新的功能&#xff1b;这种模式是通过创建一个包含该对…

前端面试题日常练-day53 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末 1. 在PHP中&#xff0c;以下哪个函数可以用于从一个数组的末尾删除一个元素并返回被删除的元素&#xff1f; a) array_pop() b) array_push() c) array_shift() d) array_unshift() 2. 在PHP中&…

列存在 OceanBase 数据库架构中的应用与演进

OceanBase 4.3 版本上线了列存功能&#xff0c;以满足实时分析的需求。 本文作为《特性解读&#xff1a;列存技术》的后续&#xff0c;将详细阐述列存技术在OceanBase数据库架构中的应用、发展历程&#xff0c;以及未来的趋势。 一、前言 1970 年&#xff0c;关系模型之父 Co…

LeakSearch:针对网络公开凭证的安全扫描与检测工具

关于LeakSearch 在红队演戏过程中&#xff0c;往往需要获取到针对目标域的访问权限。在这个过程中&#xff0c;很多红队人员会选择使用暴露在互联网上的代理服务器来实现目标域的访问&#xff0c;那么此时就需要在互联网上收集公开暴露的凭证信息。 对于蓝队来说&#xff0c;…

Playwright+Python+Pytest:基础方法二次封装简化及链式调用

引言 随着Web应用的日益复杂化&#xff0c;自动化测试成为了确保软件质量的关键环节。Playwright 是一个强大的自动化库&#xff0c;它支持在 Chromium、Firefox 和 WebKit 中运行自动化脚本。本文将介绍如何使用 Playwright 的 Python 同步 API 来简化点击和填充操作&#xf…

阿里云邮件推送配置教程:API配置的步骤?

阿里云邮件推送服务如何使用&#xff1f;如何配置邮件推送服务&#xff1f; 阿里云提供了强大的邮件推送服务&#xff0c;帮助企业高效地发送邮件通知、验证码、营销活动等。Aok将详细介绍阿里云邮件推送的配置教程&#xff0c;以及API配置的步骤&#xff0c;同时简要提及AokS…

数据流图要点和难点实际应用

数据流图(Data Flow Diagram,DFD)是一种图形化表示信息系统中数据流动和处理的方式。它主要用于描述系统如何接收输入数据,经过一系列的处理步骤,然后产生输出数据。数据流图在系统设计阶段特别有用,因为它可以帮助开发人员、业务分析师和其他利益相关者更好地理解系统的…

Python字符串数据类型之字符串

四、Python数据类型 4.1、Python内置数据类型 整型&#xff1a;int浮点型&#xff1a;float布尔类型&#xff1a;bool字符串&#xff1a;str二进制类型&#xff1a;bytes、bytearray复数&#xff1a;complex列表&#xff1a;list元组&#xff1a;tuple字典&#xff1a;dict a…

C#WPF控件Textbox绑定浮点型数据限制小数位方法

本文讲解C#WPF控件Textbox绑定浮点型数据限制小数位方法。 XAML中,使用StringFormat来格式化TextBox的文本 <Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.m…

【使用 uiautomator2 脚本进行波点音乐app自动化操作的教程】

本教程将指导您使用 uiautomator2 库编写脚本&#xff0c;实现自动化操作。如果您需要在设备断开连接或出现异常时重新连接设备并继续执行任务&#xff0c;这里有一份详细的代码示例和使用说明。 环境准备 安装 Python&#xff1a; 确保您的系统上安装了 Python&#xff08;推…

[数据集][目标检测]盲道检测数据集VOC+YOLO格式2173张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2173 标注数量(xml文件个数)&#xff1a;2173 标注数量(txt文件个数)&#xff1a;2173 标注…