基于html2canvas和jspdf将document DOM节点转换为图片生成PDF文件,并下载到本地


这里要用到html2canvas将document DOM节点转换为图片,并下载到本地_你挚爱的强哥的博客-CSDN博客前端用原生js编辑文件内容→创建生成文件(格式可以自定义)→下载文件_你挚爱的强哥的博客-CSDN博客。会自动创建一个html文件。https://blog.csdn.net/qq_37860634/article/details/131752136

jspdf插件的官网和GitHub了解下 

jsPDFGenerate professional PDFs easily with jsPDF, the open-source solution for PDF generation. Create event tickets, reports, certificates, and more in minutes with our intuitive interface.https://parall.ax/products/jspdfGitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.Client-side JavaScript PDF generation for everyone. - GitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.https://github.com/parallax/jsPDF安装先

npm install jspdf --save

引用 

import { jsPDF } from "jspdf";

 用例代码

<template><div><h1 style="font-size: 100px;">自定义下载PDF</h1><el-button type="primary" ref="btn" @click="downloadImg({ dom: $el, fileName: '自定义.pdf' })">下载当前网页为pdf</el-button></div>
</template>
<script>
import html2canvas from 'html2canvas'; // npm install --save html2canvas (官网:https://html2canvas.hertzen.com)
import { jsPDF } from "jspdf"; // npm install jspdf --save (官网:https://parall.ax/products/jspdf https://github.com/parallax/jsPDF)
export default {methods: {downloadImg({ dom, fileName = '', pdfWidth, pdfHeigth, } = {}) {html2canvas(dom).then(canvas => new jsPDF('l', 'pt', [pdfWidth || innerWidth, pdfHeigth || innerHeight]).addImage(canvas, 'PNG', 0, 0, canvas.width, canvas.height).save(fileName));},}
};
</script>

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

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

相关文章

解决 Qt 下载安装太慢的办法

Qt 现在新的版本都是采用在线安装&#xff0c;那速度实在是.... 找了一些方法&#xff0c;原理就是用 Fiddler 来代理&#xff0c;然后替换掉 url 成清华的镜像地址&#xff0c;这样就相当于直接从清华安装了&#xff0c;嘎嘎快 打开 Fiddler, 打开 Qt 安装程序&#xff0c;在…

安达发|某大厂使用APS计划排程真实成功案例

在很多群里、朋友圈、公众号上可以看到&#xff0c;很多精益咨询老师认为&#xff0c;不仅ERP不啥用&#xff0c;APS更是无聊之举&#xff0c;而且肯定是用不好的。但&#xff0c;事实上可能还真不是这样的。 一个深圳的客户&#xff0c;用了APS以后&#xff0c;不仅装配的齐套…

图论 并查集 模拟 位运算—题841、127、684、685、657、31、463、1356 C++实现与有向图 无向图 并查集总结

文章目录 841.钥匙和房间DFSBFS 127. 单词接龙684.冗余连接685.冗余连接II657. 机器人能否返回原点31.下一个排列463. 岛屿的周长解法1解法2 1356. 根据数字二进制下 1 的数目排序解法1解法2 注意点 图论&#xff1a;题841、127 并查集&#xff1a;题684、685 模拟&#xff1a;…

一百三十、海豚调度器——用DolphinScheduler定时调度HiveSQL任务

一、目标 用海豚调度器对Hive数仓各层数据库的SQL任务进行定时调度。比如&#xff0c;DWD层脱敏清洗表的动态插入数据、DWS层指标表的动态插入数据 二、工具版本 1、海豚调度器&#xff1a;apache-dolphinscheduler-2.0.5-bin.tar.gz 2、Hive&#xff1a;apache-hive-3.1.2…

完整的电商平台后端API开发总结

对于开发一个Web项目来说&#xff0c;无论是电商还是其他品类的项目&#xff0c;注册与登录模块都是必不可少的&#xff1b;注册登录功能也是我们在日常生活中最长接触的&#xff0c;对于这个业务场景的需求与逻辑大概是没有什么需要详细介绍的&#xff0c;市面上常见的邮箱注册…

PyCharm 常用快捷键

目录 1、代码编辑快捷键 2、搜索/替换快捷键 3、代码运行快捷键 4、代码调试快捷键 5、应用搜索快捷键 6、代码重构快捷键 7、动态模块快捷键 8、导航快捷键 9、通用快捷键 1、代码编辑快捷键 序号快捷键作用1CTRLALTSPACE快速导入任意类2CTRLSHIFTENTER代码补全3SHI…

关于你欠缺的NoSQL中的redis和mongoDB

文章目录 前言一、在string list hash结构中&#xff0c;每个至少完成5个命令&#xff0c;包含插入 修改 删除 查询&#xff0c;list 和hash还需要增加遍历的操作命令1、STRING类型2、List类型数据的命令操作&#xff1a;3、举例说明list和hash的应用场景&#xff0c;每个至少一…

数组的递归筛选

数组递归筛选 根据一个值筛选出来通过 includes 递归 const options [{name: "ikun",options: [{name: "YAY11",},],},{name: "YAY",}, ];function findValue(orgOptions,val) {let newArr1 []orgOptions.forEach(item>{if(item.options…

网络爬虫-网易易盾滑块验证码

首先打开易盾官网&#xff0c;依次单击“在线体验”和“滑块拼图”选项&#xff0c;出现如下图所示的滑块验证码&#xff0c;滑动后发现Network面板成功抓包。 如图所示 其中主要的加密参数可以看出来就是acToken以及cb 我们接着下断点往下走 我通过上图可以看到 acToken&#…

实例018 类似windows xp的程序界面

实例说明 在Windows XP环境下打开控制面板&#xff0c;会发现左侧的导航界面很实用。双击展开按钮&#xff0c;导航栏功能显示出来&#xff0c;双击收缩按钮&#xff0c;导航按钮收缩。下面通过实例介绍此种主窗体的设计方法。运行本例&#xff0c;效果如图1.18所示。 ​编辑…

适合小公司的自动化部署脚本

背景&#xff08;偷懒&#xff09; 在小小的公司里面&#xff0c;挖呀挖呀挖。快挖不动了&#xff0c;一件事重复个5次&#xff0c;还在人肉手工&#xff0c;身体和心理就开始不舒服了&#xff0c;并且违背了个人的座右铭&#xff1a;“偷懒”是人类进步的第一推动力。 每次想…

ROS:nodelet

目录 一、前言二、概念三、作用四、使用演示4.1案例简介4.2nodelet 基本使用语法4.3内置案例调用 五、nodelet实现5.1需求5.2流程5.3准备5.4创建插件类并注册插件5.5构建插件库5.6使插件可用于ROS工具链5.6.1配置xml5.6.2导出插件 5.7执行 一、前言 ROS通信是基于Node(节点)的…