前端通过html2canvas+jspdf 生成PDF文件_原生js html2canvas+jspdf 生成的pdf文件上传-程序员宅基地

技术标签： jspdf PDF html2canvas bluebird 前端JS

JS通过html2canvas+jspdf 生成PDF文件

下载必要的JS文件
jspdf.debug.js：
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.jshttps://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js
html2canvas.js:
https://github.com/eKoopmans/html2canvas/tree/develop/dist
bluebird.js:
https://cdn.jsdelivr.net/bluebird/latest/bluebird.js
bluebird.js 这个文件是为了解决IE浏览器无法使用的补丁包。
将以上包导入页面中
html代码：

<body style="padding-top:30px; height:952px;width:1024px; background:#FFFFFF"  >
	<form  method="post">
		<input type="button" value="下载PDF" onClick="downImage();" style="width:100px;font-size:10px;">
		<a id="downPng">图片下载</a>
		<table style="margin: auto; width:750px;border-collapse: collapse;" id='content' >
			需要打印的内容
		</table>
	</form>
</body>

js代码：

function downImage(){
	const w = $('#content').outerWidth(),
        		h = $('#content').outerHeight();
	var imgWidth = 595.28;//A4纸宽度
    var imgHeight = 592.28/w * h;
	 html2canvas($("#content"), {
		allowTaint: true,//允许跨域
		taintTest: false,
		background:'#FFFFFF',//设置背景色，页面中有图片不设置这个图片周围会出现细线
		 width: w,
		 height: h,
		 dpi: 230,				//设置分辨率，数值越大图片越清晰，生成文件越大300以上就没啥区别了
	 	onrendered: function (canvas) {
		 var url = canvas.toDataURL("image/png",1.0);//一定不能设置JPEG！
		  //以下代码为下载此图片功能
		  var triggerDownload = $("#downPng").attr("href", url).attr("download", "图片名.png");
		 	//triggerDownload[0].click();//下载图片
			//@param  p :竖版   l:横版
			//@param  pt:单位长度像素，mm:毫米
			//@param  a4:纸张大小
			//@param   还有一个可选参数 press，压缩属性，查了各种API都没有详细介绍的，都一带而过，没整明白怎么用
			var pdf = new jsPDF('p', 'pt', 'a4');
			//@param  url:64文件流
			//@param  png:文件流后缀
			//@param 20 :PDF左间距，另一个20就是右间距了
			//@param imgWidth: PDF宽度，另一个就是高度
			pdf.addImage(url, 'png', 20, 20, imgWidth-40,imgHeight-40);
			//文件名
			pdf.save(id+'.pdf'); 
			
	   }
   });

这个还有分页功能，因为我没用到，所以没研究，等以后用到了再补充。有问题请留言。

本文链接：https://blog.csdn.net/yangwenxin_1/article/details/83109524

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

AGV小车导航控制研一《智能控制》课程文献阅读作业_四轮agv传递函数-程序员宅基地

文章浏览阅读1w次，点赞4次，收藏55次。摘要AGV（即自动导向小车）是一种集控制、定位、各种传感器技术于一体的设备。随着智能车技术的不断发展，智能车的应用范围和功能都将大为拓展，现已逐渐用于工业与民用领域。但是由于负载变化、使用环境条件恶劣等原因，在实际运用时AGV小车在定位及控制上依然有许多难点需要攻克。本文即针对上述难点，研究并设计了一种新型的驱动方式和控制系统，利用模糊控制与PID控制相结合的方法，在开机初期误差矫正快，后期平稳，可以迅速跟踪期望轨迹。在实验状态下，运行速度为1米每秒时，0.5米的误差约5秒即可消除，达到稳定状态。引言_四轮agv传递函数

Android XML文件使用-程序员宅基地

文章浏览阅读230次。转自：http://www.cnblogs.com/zhengtao/articles/1924940.html一、布局文件：在layout目录下，使用比较广泛；　　我们可以为应用定义两套或多套布局，例如：可以新建目录layout_land(代表手机横屏布局)，layout_port(代表手机竖屏布局)，系统会根据不同情况自动找到最合适的布局文件，但是在同一界面的两套不同布局文

std::thread和std::this_thread的详细说明-程序员宅基地

文章浏览阅读2.5k次，点赞3次，收藏13次。std::thread类来表示执行的各个线程。执行线程是实际上是执行一系列指令，可以在多线程环境中与其他此类序列同时执行，同时共享相同的地址空间。std::this_thread命名空间包含了对当前线程的一些基本操作，如获取当前线程id、休眠当前线程、让渡当前线程的时间片给其他线程等。_std::this_thread

jQuery 父元素选择器 parent() 和 parents()_jquery父元素选择器-程序员宅基地

文章浏览阅读7.7k次。jQuery的父元素选择器小编很少使用，但却看到不少web开发者们经常使用。小编个人是不太推荐使用父元素选择器的。因为如果是列表的情况下，在循环时可以将当前的索引绑定给需要点击的按钮，通过索引查找元素。本篇文章在小编不推荐的情况下，还是决定写一篇。先来一段 HTML结构代码<table class="table table-bordered" id="user..._jquery父元素选择器

杰理之MCLK 主时钟【篇】_mclk wclk 区别-程序员宅基地

文章浏览阅读84次。也称IIS系统时钟，一般是采样频率的256倍、512倍，384倍。假设采样率是48K，MCLK输出的时钟是采样的256倍，则MCLK会输出 48K*256 = 12.288MHz。_mclk wclk 区别

小白如何从零开始设计并开发一个微信小程序？-程序员宅基地

文章浏览阅读3k次，点赞45次，收藏10次。微信小程序官网：https://mp.weixin.qq.com/cgi-bin/wx微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/微信小程序API:https://developers.weixin.qq.com/miniprogram/dev/api/微信小程序开发的简要过程（包括制作、提交审核、发布、下载小程序码等）:1. 小程序原型设计开发前，最好先做个原型，把自己的需求理顺。我.

随便推点

【Win10】打开控制面板提示：操作系统当前的配置不能运行此应用程序-程序员宅基地

文章浏览阅读1.2w次，点赞2次，收藏19次。win10系统，打开控制面板，提示操作系统当前的配置不能运行此应用程序_操作系统当前的配置不能运行此应用程序

神经网络压缩剪枝量化嵌入式计算优化NCNN mobilenet squeezenet shufflenet_基于数据压缩的mec网络中系统能效的优化方法-程序员宅基地

文章浏览阅读1.1w次，点赞5次，收藏58次。性能提升方法本文github链接1. 小模型 mobilenet , 更精细模型的设计，紧致网络设计 mobilenet squeezenet shufflenet 123MobileNet逐通道卷积 + 普通点卷积 SqueezeNet 1∗1 和3∗3 卷积较少通道数量 ShuffleNet..._基于数据压缩的mec网络中系统能效的优化方法

高并发场景以及应对技巧-程序员宅基地

文章浏览阅读2.7k次。业务系统高并发（High Concurrency）限流：鉴于只有少部分用户能够秒杀成功，所以要限制大部分流量，只允许少部分流量进入服务后端。分流：负载就是问题，高并发问题。均衡就是解决手段。削峰：对于秒杀系统瞬时会有大量用户涌入，所以在抢购一开始会有很高的瞬间峰值。高峰值流量是压垮系统很重要的原因，所以如何把瞬间的高流量变成一段时间平稳的流量也是设计秒杀系统很重要的思路。实现削峰的常用的方法有利用缓存和消息中间件等技术。异步处理：秒杀系统是一个高并发系统，采用异步处理模式可以极大地提高系统并_高并发场景