Javascript实现html转pdf高清版（提高分辨率）

2024-11-27 09:45:39

网上一些关于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语句：

<div id="demo">
 ...
</div>

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的文章请大家点击下面的相关链接

Nodejs中使用phantom将html转为pdf或图片格式的方法

最近在项目中遇到需要把html页面转换为pdf的需求,并且转换成的pdf文件要保留原有html的样式和图片.也就是说,html页面的图片.表格.样式等都需要完整的保存下来. 最初找到三种方法来实现这个需求,这三种方法都只是粗浅的看了使用方法,从而找出适合这个需求的方案: html-pdf 模块 wkhtmltopdf 工具 phantom 模块最终使用了phantom模块,也达到了预期效果.现在简单的记录三种方式的使用方法,以及三者之间主要的不同之处. 1.html-pdf github:ht
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

本文实例讲述了JS实现的将html转为pdf功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>jsPDF插件</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="https://code.jq
纯js实现html转pdf的简单实例(推荐)

项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试
phantomjs导出html到pdf的方法总结

最近要为我们的文章服务做一个转pdf的功能.经过比较,我觉得phantomjs是转化比较好的.现在讲讲如何使用. 环境 centos x86_64 下载可以到官网下载: 官网或者wget也可以: wget -P /tmp/ https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2 安装 // 解压 tar xjf /tmp/phantomjs-2.1.1-linux-x86_64.
JavaScript+Java实现HTML页面转为PDF文件保存的方法

需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入 html2canvas.js html2canvas(document.body, { //截图对象 //此处可配置详细参数 onrendered: function(canvas) { //渲染完成回调canvas canvas.id = "mycanvas"; // 生成base64图片数据 var
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.生成的pd
全屏js头像上传插件源码高清版

本文实例为大家分享了全屏js头像上传插件源码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>ccp</title> <link href="Content/ccp.css" rel=&qu
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)

目录: 懒加载的意义(为什么要使用懒加载) 原理代码在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下. 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区
php imagecreatetruecolor 创建高清和透明图片代码小结

(PHP 4 >= 4.0.6, PHP 5) imagecreatetruecolor - 新建一个真彩色图像说明 resource imagecreatetruecolor ( int $x_size , int $y_size ) imagecreatetruecolor() 返回一个图像标识符,代表了一幅大小为 x_size 和 y_size 的黑色图像. 是否定义了本函数取决于 PHP 和 GD 的版本.从 PHP 4.0.6 到 4.1.x 只要加载了 GD 模块本函数一直存在,但
JavaScript中的各种宽高属性的实现

在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scrollHeight.availHeight.scrollLeft.scrollTop.style.height.innerHeight.outerHeight.scree.height等等......这么多,傻傻分不清也正常啊. 本文的目标: 理清js及jquery的各种width和height 对width和高度做一些实际的应用 window和document 首先我们来高清两个概念:
R语言绘图技巧导出高清图方法

上一次小仙同学分享了 facet violin plot的画法,最后还卖了个关子,给大家留了个悬念.科研文章的插图通常要求比较高,不仅要精准地展示出数据,选对图表类型,还需要简洁优美(?翻译成人话就是,同样的数据能不能多“卖”几分,就看图够不够高大上啦).小仙同学在画图的时候遇到的一个问题就是,RStudio直接导出的图,怎么这么不清晰?为什么教程里别人的图都那么清晰呢?这时候可能就有同学就会说,这还不简单,直接导出矢量图不就可以了吗? 我们来看下,RStudio可以导出的图片格式有这么几种,小
Python利用pywin32库实现将PPT导出为高清图片

目录一.安装库二.代码原理三.使用效果四.所有代码一.安装库需要安装pywin32库 pip install pywin32 二.代码原理 WPS高清图片导出需要会员,就为了一个这个小需求开一个会员太亏了,因此就使用python对ppt进行高清图片导出. 设置format=19即可: ppt.SaveAs(imgs_path, 19) 三.使用效果输入一个文件路径 path = 'D:\\自动化\\课件.pptx' 最后的效果: 会在路径下创建一个‘’课件‘’文件夹里面是所有转换
go语言读取json并下载高清妹子图片

学了一天golang,一边看文档一边写的go读取分析json并下载图片 json api为爱壁纸HD mac 1920x1200版本,高清妹子图总结:go+json=shit package main import ( "fmt" "io" "io/ioutil" "net/http" "os" "path/filepath" "strconv" //"e
go语言实现抓取高清图片

看到有很多python 的,然后写了个go 的,可以抓取高清图片 getp.go 复制代码代码如下: package main import ( "io/ioutil" "log" "net/http" "os" "regexp" "strconv" "strings" "sync"
JavaScript 抽奖效果实现代码数字跳动版

JavaScript实现的抽奖效果数字跳动版 .a1 {}{ position: relative; font-family: Verdana; font-size: 200px; color: #888888; } function Lottery() { var Nos = Math.round(Math.random() * (4999 - 1) + 1); var result = document.getElementById("layer1"); if (result !

Javascript实现html转pdf高清版（提高分辨率）

相关推荐

随机推荐