npm install html2canvas
npm install jspdf
// 引入
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
const previewEl = document.getElementById('targetDom')
// 函数调用
this.savePdf(previewEl).then(res => {
})
// 函数实现
savePdf(html2canvasDom, downloadName = '下载文件') {
return html2canvas(html2canvasDom, {
// width: 1714,
// height: 200,
backgroundColor: '#fff',
useCORS: true, // 解决文件跨域问题
scale: window.devicePixelRatio * 2, // 按比例增加分辨率
dpi: 300
})
.then(canvas => {
const a4Width = 595.28
const a4Height = 841.89
// 可以上传后端或者直接显示
// 用于将canvas对象转换为base64位编码
var context = canvas.getContext('2d')
context.mozImageSmoothingEnabled = false
context.webkitImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false
let position = 0
// 生成的画布元素宽高
const canvasWidth = canvas.width
const canvasHeight = canvas.height
// 页面等比例缩放后宽高
const pageWidth = a4Width
const pageHeight = (a4Width / canvasWidth) * canvasHeight
// 返回图片dataURL,参数:图片格式和清晰度(0-1)
const jpeg = canvas.toDataURL('image/jpeg', 1.0)
// 第一个参数是纵横向,第二个参数是单位,第三个参数是生成pdf的大小,自定义pdf大小的话可以传入一个数组,eg:[164.14, 424.5]
// 方向默认竖直,尺寸ponits,格式a4 [595.28,841.89]
// const pdf = new JsPDF('', 'pt', [595.28, 841.89]/* [a4Width, a4Height] */)
const pdf = new JsPDF('', 'pt', [605.28, 841.89]/* [a4Width, a4Height] */)
// const pdf = new JsPDF('', 'pt', [this.contentWidth, 841.89]/* [a4Width, a4Height] */)
// const pdf = new JsPDF('', 'pt', 'a4'/* [a4Width, a4Height] */)
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围,无需分页
let height = pageHeight
if (height < a4Height) {
// 第三,四个参数是图片偏移位置,第五六个参数是生成的图片的宽高
pdf.addImage(jpeg, 'JPEG', 5, 5, pageWidth, pageHeight) // 从图片顶部开始打印
} else {
while (height > 0) {
pdf.addImage(jpeg, 'JPEG', 0, position, pageWidth, pageHeight)
height -= a4Height
position -= a4Height
// 避免添加空白页
if (height > 0) {
pdf.addPage()
}
}
}
pdf.save(`${
downloadName}.pdf`)
})
}
相关资料记录:
https://juejin.cn/post/7230757380820533303
文章浏览阅读6.7k次,点赞24次,收藏92次。小程序入门保姆级教程_微信小程序入门
文章浏览阅读559次。 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新和亮点,往往达不到毕业答辩的要求,这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求。为了大家能够顺利以及最少的精力通过毕设,学长分享优质毕业设计项目,今天要分享的是 **基于深度学习猫狗分类 **学长这里给一个题目综合评分(每项满分5分)难度系数:3分工作量:3分创新点:3分。_毕业设计可以用猫狗大战吗
文章浏览阅读4.4k次,点赞2次,收藏16次。写这篇文章的由来是因为后边要用这个工具,但是由于某些原因有部分小伙伴和童鞋们可能不会安装此工具,为了方便小伙伴们和童鞋们的后续学习和不打击他们的积极性,因为80%的人都是死在工具的安装这第一道门槛上,这门槛说高也不高说低也不是太低。所以就抽时间水了这一篇文章。_eclipse安装教程
文章浏览阅读4.1w次,点赞12次,收藏193次。小编为大家收集了11个web前端开发,大企业实战项目案例+5W行源码!拿走玩去吧!1)小米官网项目描述:首先选择小米官网为第一个实战案例,是因为刚开始入门,有个参考点,另外站点比较偏向目前的卡片式设计,实现常见效果。目的为学者练习编写小米官网,熟悉div+css布局。学习资料的话可以加下web前端开发学习裙:600加上610再加上151自己去群里下载下。项目技术:HTML+CSS+Div布局2)迅雷官网项目描述:此站点特效较多,所以通过练习编写次站点,学生可以更多练习CSS3的新特性过渡与动画的实_前端项目实战案例
文章浏览阅读73次。素数,不同的质数,各种各样的问题总是遇到的素数。以下我们来说一下求素数的一种比較有效的算法。就是筛法。由于这个要求得1-n区间的素数仅仅须要O(nloglogn)的时间复杂度。以下来说一下它的思路。思路:如今又1-n的数字。素数嘛就是除了1和本身之外没有其它的约数。所以有约数的都不是素数。我们从2開始往后遍历,是2的倍数的都不是素数。所以我们把他们划掉然后如...
文章浏览阅读532次,点赞9次,收藏14次。探索Keras DCGAN:深度学习中的创新图像生成项目地址:https://gitcode.com/jacobgil/keras-dcgan在数据驱动的时代,图像生成模型已经成为人工智能的一个重要领域。其中,Keras DCGAN 是一个基于 Keras 的实现,用于构建和训练 Deep Convolutional Generative Adversarial Networks(深度卷积生...
文章浏览阅读5.6k次,点赞8次,收藏62次。已经有了腾讯云服务器如何搭建网站?腾讯云服务器网以腾讯云服务器,借助宝塔面板搭建Web环境,然后使用WordPress博客程序搭建网站,大致分为三步,首先购买腾讯云服务器,然后在腾讯云服务器上部署宝塔面板,最后在宝塔面板上安装WordPress程序。_腾讯云建站
文章浏览阅读956次。WebSphere MQ6.0 for redhat4.6 setup分类: WebSphere 2010-04-12 14:45650人阅读 评论(0)收藏举报websphereredhatmanageribm消息中间件statisticsWebsphere MQ是IBM的商业消息中间件(Commercial Messaging Middlewar_websphere mq6.0下载
文章浏览阅读1.1w次,点赞11次,收藏49次。目录一、Bean 的生命周期二、代码演示三、主要步骤简述一、Bean 的生命周期 对于普通的 Java 对象,new 的时候会去创建对象,而当它没有任何引用的时候则被垃圾回收机制回收。相较于前者,由Spring IoC 容器托管的对象,它们的生命周期完全由容器控制。Spring 中每个 Bean 的生命周期如下:对于 ApplicationContext 容器,当容器启动结束后,实例化所有的 Bean。设置对象属性,即依赖注入,动态将依赖关系注入到对象中。紧接着,Spring 会检测该对象_spring bean的生命周期
文章浏览阅读94次。为什么logical==0?_matlab fat
文章浏览阅读302次。一. HTML标签分类1.根据标签个数分类。 单标签:只有一个标签。 <br>, <hr>,<img>,<meta>, 实现一个特定的功能。 双标签:既有开始标签,也有结束标签。 Html,head,Body,title,h1~h6,p,a,ul,li,ol,strong,em。2.根据标签特性分类(网页效果)。 2.1行属性..._ol是单标记还是双标记
文章浏览阅读1.6k次。应用程序在启动和运行的时候往往需要读取一些配置信息,配置基本上伴随着应用程序的整个生命周期,比如:数 据库连接参数、启动参数等。配置主要有以下几个特点:配置是独立于程序的只读变量配置对于程序是只读的,程序通过读取配置来改变自己的行为,但是程序不应该去改变配置配置伴随应用的整个生命周期配置贯穿于应用的整个生命周期,应用在启动时通过读取配置来初始化,在运行时根据配置调整行为。比如:启动时需要读取服务的端口号、系统在运行过程中需要读取定时策略执行定时任务等。配置可以有多种加载方式常见的有程序内部_基于配置是什么意思