vue通过插件实现PDF生成以及下载
第一步: 安装插件
npm install --save html2canvas //将html转换成图片
npm install jspdf --save //将图片生成pdf
第二步: 在需要的地方引入插件
import html2Canvas from "html2canvas";
import JSPDF from "jspdf";
第三步: 使用插件生成PDF
HTML代码代码
<div id="pdfWrap">
//这是你要绑定的盒子,里面是你需要打印的内容
<div>
JS部分代码
printOut() {
let pdfDom = document.querySelector("#pdfWrap"); //这里绑定你要转换的页面
console.log(pdfDom.offsetHeight)
pdfDom.style.background = "#FFFFFF";
let _this = this;
let pdfPage = null;
html2Canvas(pdfDom,{
//开始截图,这里可以设置一些截图时的属性
logging: false,
//height:3000,
}).then((canvas)=>{
// 开始将图片转换为PDF
var pdf = new JSPDF("p", "mm", "a4") // A4纸,纵向
var ctx = canvas.getContext("2d")
console.log(canvas.height)
var a4w = 170; var a4h = 257 // A4大小,210mm x 297mm,四边各保留20mm的边距,显示区域170x257
var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
var renderedHeight = 0
while (renderedHeight < canvas.height) {
var page = document.createElement("canvas")
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页
// 用getImageData剪裁指定区域,并画到前面创建的canvas对象中
page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面,保留10mm边距
renderedHeight += imgHeight
if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容,添加一个空页
// delete page;
}
pdf.save('123.pdf')
})
},
如果HTML页面比较长,一定要注意你绑定的dom是不是能够完全显示,有没有被overflow
影响,导致高度不够,页面不能完全被截取.
vue通过插件实现PDF生成以及下载的更多相关文章
- 【jsPDF】jsPDF插件实现将html页面转换成PDF,并下载,支持分页
1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...
- 在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all
在js内生成PDF文件并下载的功能实现(不调用后端),以及生成pdf时换行的格式不被渲染,word-break:break-all 前天来了个新需求, 有一个授权书的文件要点击下载, 需要在前端生成, ...
- C# 生成pdf文件客户端下载
itextsharp.dll 下载:http://sourceforge.net/projects/itextsharp/ 程序需引用:itextsharp.dll,itextsharp.pdfa.d ...
- 赞!jsPDF – 基于 HTML5 的强大 PDF 生成工具
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档.使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了.浏览器兼容性: IE 10, Firefo ...
- vue.js及项目实战[笔记]— 03 vue.js插件
一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...
- vue中如何实现pdf文件预览?
今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索 ...
- jsPDF – 基于 HTML5 的强大 PDF 生成工具
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档. 使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了. 米扑科技项目用到了HHTML5生成PD ...
- 代码高亮插件Codemirror使用方法及下载
代码高亮插件Codemirror使用方法及下载 - 老男孩的日志 - 网易博客 代码高亮插件Codemirror使用方法及下载 2013-10-31 16:51:29| 分类: 默认分类 | ...
- 写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
随机推荐
- 排查jar包使用的第三方包并导出清单
找到jar包 cd /data/xx/lib/xxx/ 解压缩 unzip xxx.jar -d tempjarfile 进入lib目录 cd tempjarfile/BOOT-INF/lib 生产j ...
- PHP进阶玩法
1. 删除不必要的模块. PHP随带内置的PHP模块.它们对许多任务来说很有用,但是不是每个项目都需要它们.只要输入下面这个命令,就可以查看可用的PHP模块: # php - m 一旦你查看了列表, ...
- 后端统一处理返回前端日期LocalDateTime格式化去T,Long返回前端损失精度问题
一.前言 我们在实际开发中肯定会遇到后端的时间传到前端是这个样子的:2022-08-02T15:43:50 这个时候前后端就开始踢皮球了,!! 后端说:前端来做就可! 前端说:后端来做就可! 作为一名 ...
- virtio 驱动的数据结构理解
ps:本文基于4.19.204内核 Q:vqueue的结构成员解释: A:结构如下,解析附后: struct virtqueue { struct list_head list;//caq:一个vir ...
- 如何免费申请js.org二级域名
最近看到很多人都去申请了js.org的域名,我就来写个教程吧! (本教程只注重于申请域名,而不是如何使用Github) 看看成品:https://butterfly.js.org/ 官网是这么写的: ...
- 【manim】3b1b的"Almost" Fourier Transform复刻
最近在做Fourier Transform的内容,记录一下今天下午的成果. 本文代码全部自行编写,需要math and music项目完整工程可以在gayhub上获取.(现在还没弄完,就先不发了.) ...
- Python入门系列(四)别再傻傻分不清:列表、元组、字典、集合的区别
总结分析列表.元组.字典.集合的相同与区别之处,只有彻底分清之后,就会在应用的时候,得心应手. 四句话总结 列表是一个有序且可更改的集合,允许重复成员. 元组是一个有序且不可更改的集合,允许重复成员. ...
- Python入门系列(三)一学就会-基础数据类型
数据类型 您可以使用type()函数获取任何对象的数据类型. x = 5 print(type(x)) 数字类型 x = 1 # int y = 2.8 # float z = 1j # comple ...
- Linux虚拟机破解密码步骤
Linux破解密码 重启系统 到达logo界面快速 按 e 编辑当前条目 将光标移至以 linux 开头的行,此为内核命令行 在UTF-8(RHEL7):ro(RHEL8)后添加 rd.break ( ...
- Java 多线程:锁(三)
Java 多线程:锁(三) 作者:Grey 原文地址: 博客园:Java 多线程:锁(三) CSDN:Java 多线程:锁(三) StampedLock StampedLock其实是对读写锁的一种改进 ...