原生JS生成PDF文件、生成pdf功能

js实现生成pdf文件

这里我主要做个记录，之前写的现在忘得差不多了，所以直接上代码

先来HTML的代码，这里因为我用的HkCms框架所以{hkcms:adv name="tctotal"}像这些东西你们可以忽略，直接在自己定义的某个ID下面写上你的内容即可

<div id="wancheng" style="width: 39%;padding-left: 50px;padding-right:2% ; display: none; " >
					<div style="text-align: right; height: 100px; line-height: 100px; ">
						{hkcms:adv name="tctotal"}
							<span class="S18W400">{$item.url}：</span>
						{/hkcms:adv}
						<span id="zjg" style="display: inline-block;width: 120px; " class="S24W500">0￥</span>
					</div>
					<div id="printId" style="width: 100%;border-bottom: solid 2px #A0A0A0; padding: 10px; " class="each S22W500">
						{hkcms:adv name="pz_jg_sm"}
						<div>{$item.url}</div>
						<div>{$item.title}</div>
						<div>{$item.notes}</div>
						{/hkcms:adv}
						<!-- <div>配置</div>
						<div>说明</div>
						<div>价格</div> -->
					</div>
					<div id="accomplish" >
						
					</div>
				</div>

这里是js代码上面的那个是留白，里面怎么实现的太久了我忘记了，依稀记得是先将你得元素转换为图片然后再装为PDF

你们可以直接复制即可  但是要引入这两个文件我放到这里了，没设置要钱，如果需要vip或者什么的请私信我

https://download.csdn.net/download/weixin_56718509/87724599

<script src="/static/js/js/html2canvas.min.js"></script>
<script src="/static/js/js/jspdf.min.js"></script>
//留白
var whiteImg =
	'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk2QjIxRjMxMDY4RDExRUE5NEYyRUI4OUU5NEFDQzE5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk2QjIxRjMyMDY4RDExRUE5NEYyRUI4OUU5NEFDQzE5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTZCMjFGMkYwNjhEMTFFQTk0RjJFQjg5RTk0QUNDMTkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTZCMjFGMzAwNjhEMTFFQTk0RjJFQjg5RTk0QUNDMTkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAIAxUDAREAAhEBAxEB/8QASwABAQAAAAAAAAAAAAAAAAAAAAgBAQAAAAAAAAAAAAAAAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAARAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AKpAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//2Q==';
//打印
function printOut() {
	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
	let s=0
	let time = setInterval(()=>{
		if(document.documentElement.scrollTop==0){
			clearInterval(time)
            // 这里的#wancheng就是要生成PDF的内容
			html2canvas(document.querySelector('#wancheng'), {
				allowTaint: true,
				scale: 2 // 提升画面质量，但是会增加文件大小
			}).then(function(canvas) {
				console.log(canvas)
				let contentWidth = canvas.width
				let contentHeight = canvas.height
				let pageHeight = contentWidth / 592.28 * 841.89
				let leftHeight = contentHeight 
				let position = 0
				let imgWidth = 595.28
				let imgHeight = 592.28 / contentWidth * contentHeight
				let pageData = canvas.toDataURL('image/jpeg', 1.0)
				var PDF = new jsPDF('', 'pt', 'a4');
				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('download.pdf')
			})
			
		}
		
	},100)
	
}