vue通过插件实现PDF生成以及下载
时间:2020-06-10
本文章向大家介绍vue通过插件实现PDF生成以及下载,主要包括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
影响,导致高度不够,页面不能完全被截取.
原文地址:https://www.cnblogs.com/changx/p/13083874.html
- 洛谷 P1308 统计单词数【字符串+模拟】
- 【Java学习笔记之十四】Java中this用法小节
- Codeforces 839E Mother of Dragons【__builtin_popcount()的使用】
- 【Java学习笔记之十五】Java中的static关键字解析
- Codeforces 839D Winter is here【数学:容斥原理】
- Codeforces 839C Journey【DFS】
- Facebook的漏洞可以让攻击者在分分钟内重置用户账户密码
- 【Java学习笔记之十七】Java中普通代码块,构造代码块,静态代码块区别及代码示例分析
- 【机器学习笔记之六】Bagging 简述
- 洛谷 P1553 数字反转(升级版)【字符串+STL stack】
- C# 实现发送手机短信
- 软件测试人员必须掌握的Linux基本命令
- 【机器学习笔记之五】用ARIMA模型做需求预测用ARIMA模型做需求预测
- Capturing Packets in Linux at a Speed of Millions of PPS
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在Linux中使用history命令的方法
- Linux服务器部署JavaWeb项目完整教程
- centos 6 安装vsftpd与PAM虚拟用户的方法
- CentOS6.8中/英文环境切换教程图解
- centos7.6 安装Tomcat-8.5.39的方法
- ubuntu14.04安装jdk1.8的教程
- Linux nohup实现后台运行程序及查看(nohup与&)
- 详解Linux 服务管理两种方式service和systemctl
- CentOS6.5安装python3.7详细步骤
- Centos7.5配置IP地址的实现
- linux里daily_routine实例代码详解
- 类Linux环境安装jdk1.8及环境变量配置详解
- CentOS7yum安装PHP7.2的操作方法
- CentOS 7中 Apache Web 服务器安装配置教程
- Win10安装Linux系统的教程图解