html转成高清pdf,Javascript实现html转pdf高清版(提高分辨率)
网上一些关于js实现html转pdf的文章大部分最终转成的PDF都不够清晰,今天为大家介绍如何提高js实现html转pdf的清晰度
引入js文件
https://cdn.bootcss.com/jquery/3.4.1/jquery.js
https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js
https://cdn.bootcss.com/html2canvas/0.5.0-alpha2/html2canvas.min.js
注意事项:
1.生成的pdf中,dom元素间距异常;
2.提高分辨率后,生成的图片有偏差;
html语句:
...
JS代码:
download(){
var element = $("#demo"); // 这个dom元素是要导出pdf的div容器
var w = element.width(); // 获得该容器的宽
var h = element.height(); // 获得该容器的高
var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
var canvas = document.createElement("canvas");
var abs = 0;
var win_i = $(window).width(); // 获得当前可视窗口的宽度(不包含滚动条)
var win_o = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)
if(win_o>win_i){
abs = (win_o - win_i)/2; // 获得滚动条长度的一半
}
canvas.width = w * 2; // 将画布宽&&高放大两倍
canvas.height = h * 2;
var context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-offsetLeft-abs,-offsetTop);
// 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此
// translate的时候,要把这个差值去掉
html2canvas(element).then(function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else { // 分页
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('我的简历.pdf');
})
}
更多关于Javascript将html转成pdf的文章请大家点击下面的相关链接
您可能感兴趣的文章:JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
phantomjs导出html到pdf的方法总结
Nodejs中使用phantom将html转为pdf或图片格式的方法
纯js实现html转pdf的简单实例(推荐)
JavaScript+Java实现HTML页面转为PDF文件保存的方法
html转成高清pdf,Javascript实现html转pdf高清版(提高分辨率)相关推荐
- html5css3jquery应用之美 pdf,JavaScript之美 完整pdf扫描版[94MB]
JavaScript可以说是世界上*争议和被人误解*多的编程语言.很多人都图谋用其他语言取代它的Web语言之主的地位,但是他们非但没能撼动JavaScript的根基,还促使它不断进化并得以快速发展.为 ...
- windows下用Python把pdf文件转化为图片(png高清)
windows下python3实现PDF转png图片,高清!!!希望可以帮到大家 windows下用Python将pdf文件转化为图片(png高清) 不扯没用的,直接上代码 1.环境:windows( ...
- 【Word生成_带书签的高清pdf】【导出导入pdf书签】
目前,word文档转pdf,不管使用word自带导出还是借助外部工具(如Foxit pdf.Adobe Pdf等工具),高清pdf与带书签,二者不可兼得,这是一个非常令人头疼的问题. 经花费不少时间探 ...
- jspdf + html2canvas 实现html转pdf -----提高分辨率(高清版版本)
前提:跟着我一步一步,最终一定会成功!(本人已经实现该功能) 背景:需要做一个导出PDF的功能,网上找有很多,但是一般导出来的都是比较模糊的那种,下面这个是高清版的,导出的PDF都是几M,跟正常手动导 ...
- matlab保存高清图片png、svg、pdf等
在实际的使用过程中不同场景常常需要不同的图片格式. 如果直接在图窗中导出当然可以,但一个一个的导出有些麻烦,最方便的还是写成代码. 对于2020a及以后的版本,请使用exportgraphics函数. ...
- 怎样将pdf转化成jpg?pdf转高清图片的方法
pdf文件是我们非常熟悉的一种格式,因为它十分便携以及兼容性强的优点因此得到了十分广泛的应用,但是由于pdf文件的不可编辑性,所以在使用的时候经常需要将pdf转换为其他格式后再使用,今天给大家带来pd ...
- jsPDF(高清),html导出多页pdf(分享)
前言 遇到在html导出PDF的需求,在csdn找了很多关于PDF导出功能的文章,介绍了jsPDF.iText和wkhtmltopdf三种方式. 其中iText的使用对于中文还需要导入特定字体包,wk ...
- PDF怎么转换成WORD?3大方法助您PDF转Word!
还不知道PDF怎么转换成WORD吗,本文将提供完整的PDF转Word方案,包括离线.在线或者SDK API等各种方式,总有一款满足您的需求. 什么是PDF转Word? PDF是出版和图形领域的软件厂商 ...
- 【微信小程序云开发】使用云函数(node.js)实现多张图片转成pdf的功能,且pdf带水印
最近在做项目的时候,碰到一个功能需要多张图片转成pdf的功能,首先,在网上找了很多资料,都没有一个合适的. 后来,就自己动手使用云函数写了一个处理图片转成pdf的云函数,而且需带水印. 直奔主题,使用 ...
- CS5212AN设计Display to Vga 高清转接器产品|Display to Vga 高清1080P转接线产品
Display to Vga 高清转接器产品/Display to Vga 高清1080P转接线产品特点: DisplayPort为新一代影像显示接口技术的规格之一,可将笔记型计算机和消费电子设备 ...
最新文章
- 高级转录组分析和R语言数据可视化第12期 (线上线下同时开课)
- 【正一专栏】巴萨和曼城都那么强了还在买人续约
- PHP多种序列化/反序列化的方法 (转载)
- 李宁-2015年7月13日-个人文档
- Android官方开发文档Training系列课程中文版:多样屏幕之支持不同的屏幕尺寸
- java黄金连分数_蓝桥杯 | Java B组省赛真题练习——黄金连分数-Go语言中文社区...
- Luogu P2827 蚯蚓
- Spark常用算子讲解二
- 华为/华三:OSPF多区域配置
- Centos7 防火墙 ( firewalld ) 和 Selinux 一些简单操作命令
- 新公司入职56天后的面谈小结
- python爬虫html、parser_利用python HTMLParser标准库实现一个简单的爬虫
- Linux云服务器安装可视化图形界面
- oracle卸载干净步骤
- 贝壳财报图解:年营收808亿增长15% 经调整利润23亿
- Rancher安装部署
- Hibernate5
- WPF实现拍照截图功能(WPFMediaKit 调用摄像头和拍照)
- heigh,clientHeight , scrollHeight , offsetHeight介绍
- 葫芦岛php,葫芦岛php培训
热门文章
- 树莓派Pico开发版
- 如何批量注册域名?批量注册域名流程是什么
- 数显之家快讯:【SHIO世硕心语】2021,新的一年写给自己的5句话!
- EPP-常见问题总结
- 打听同事工资,我被离职了
- Java 知识点总结笔记(篇1)
- 工作三年的Java程序员该如何规划后续的职业发展?
- Could not resolve hostname github: Name or service
- [HttpServlet] Error occured when handling uri: /cat/s/router
- bais mintigation post-processing for individual and group fairness