JavaScript生成PDF
2024-05-12 15:41:57
废话不多说直接上代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Make PDF</title><style>.main {width: 960px;height: 480px;margin: 0px auto;margin-top: 20px;padding: 10px;display: flex;}.body {width: 95%;height: 480px;padding-top: 40px;}.title {width: 100%;height: 40px;display: flex;}.title .div1 {width: 60%;text-align: right;}.title .div1 .divCtn {width: 230px;height: 40px;float: right;}.title .div1 .divCtn .titleCtn {width: 230px;height: 30px;line-height: 30px;text-align: center;font-size: 25px;font-weight: bold;}.title .div1 .divCtn .titleUdeLine {width: 230px;height: 6px;border-bottom: solid 2px #9C5223;border-top: solid 2px #9C5223;}.title .div2 {width: 40%;text-align: right;height: 40px;line-height: 30px;font-size: 20px;font-weight: bold;}.date {width: 100%;height: 40px;display: flex;}.date .deDiv1 {width: 60%;height: 40px;line-height: 40px;text-align: right;font-size: 18px;}.date .deDiv2 {width: 40%;height: 40px;line-height: 40px;text-align: right;font-size: 18px;}.tempTr1 td {text-align: center;}table tr td {padding: 5px;}.tempTr2 td {height: 40px;text-align: center;}.end {width: 5%;height: 480px;}.buttonBox {width: 960px;height: 480px;margin: 0px auto;}.buttonBox button {padding: 5px;background-color: #888888;color: #FFFFFF;border: none;border-radius: 5px;cursor: pointer;}</style>
</head><body><!-- 需要打印的pdf页面放在这里 --><div class="main"><div class="body"><div class="title"><div class="div1"><div class="divCtn"><div class="titleCtn">收 据</div><div class="titleUdeLine"></div></div></div><div class="div2">NO：<span style="color: #9C5223;">1313215</span> </div></div><div class="date"><div class="deDiv1">2019年 07月 03日</div><div class="deDiv2">第 201 号</div></div><table border="1" style="width: 100%; border-collapse: collapse;"><tr class="tempTr2"><td colspan="6" style="border-right-color: #FFFFFF; width: 50%; text-align: left;"> 兹 收 到 李松山</td><td colspan="6" style="width: 50%;">交 来 下 列 款 项 此 据</td></tr><tr><td align="center" rowspan="2" style="width: 60%;">摘 要</td><td colspan="10" align="center" style="width: 10%;">金 额</td><td rowspan="2" align="center" style="width: 30%;">备 注</td></tr><tr class="tempTr1"><td>￥</td><td>百</td><td>十</td><td>万</td><td>千</td><td>百</td><td>十</td><td>元</td><td>角</td><td>分</td></tr><tr class="tempTr2"><td>天河小区5栋23楼3单元2019年1-6月份水电费</td><td>￥</td><td></td><td></td><td></td><td>6</td><td>5</td><td>3</td><td>2</td><td>8</td><td>3</td><td>支付方式：现金</td></tr><tr class="tempTr2"><td></td><td>￥</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class="tempTr2"><td></td><td>￥</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class="tempTr2"><td colspan="12" style=" text-align: left;">合计人民币（大写）陆仟伍佰叁拾贰元捌角叁分<div style="float: right; display: flex;"><div style="font-size: 20px;">￥：</div><divstyle="width: 180px; height: 30px; border-bottom: solid #000000 1px; text-align: center;">6532.83</div></div></td></tr></table><div style="width: 100%; display: flex; height: 40px;"><div style="width: 50%; height: 40px; line-height: 40px;"> 主管：鲁迅</div><div style="width: 50%; height: 40px; line-height: 40px;">经手人：周树人</div></div></div><div class="end"><div style="margin-top: 160px; text-align: center; height: 230px;width: 100%;">第<br />二<br />联<br />：<br />存<br />根</div></div></div><div class="buttonBox"><button onclick="pdfDo()">导出PDF</button></div>
</body>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script><script>function pdfDo() {var isDo = confirm("确定导出pdf页面");if (!isDo) { return; }var target = document.getElementsByClassName("main")[0];target.style.background = "#FFFFFF";html2canvas(target, {onrendered: 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_file_name.pdf");}})}
</script></html>
JavaScript生成PDF相关推荐
- 7款最佳jQuery和JavaScript的PDF查看器插件
在这篇文章中,我们将提供最好的PDF浏览器插件. 1. JavaScript的PDF阅读器(JavaScript PDF Reader : pdf.js) pdf.js 基于HTML5实现 在线演示 ...
- HTML怎么把文字分栏_JS将HTML生成PDF并下载
作者:grain先森链接:https://www.jianshu.com/p/4a550e07d50b 1. html2canvas 简介我们可以直接在浏览器端使用html2canvas,对整个或局部 ...
- 使用ABAP和JavaScript代码生成PDF文件的几种方式
ABAP 方法1:使用ABAP + Adobe Lifecycle Enterprise Service 详细步骤参考我的博客Convert word document into PDF via Ad ...
- 使用Select.HtmlToPdf 把html内容生成pdf文件
概述 .NET的SelectPdf Html到Pdf转换器-社区版是.NET的SelectPdf库中提供的功能强大的html到pdf转换器的免费版本. 转换器提供了许多强大的选项(将任何网页转换为pd ...
- php输出PDF的文件流_怎么用PHP在HTML中生成PDF文件
译文:使用PHP在html中生成PDF 译者:dwqs 利用PHP编码生成PDF文件是一个非常耗时的工作.在早期,开发者使用PHP并借助FPDF来生成PDF文件.但是如今,已经有很多函数库可以使用了, ...
- php源生生成pdf_TCPDF - 可生成PDF文档和条形码PHP库
TCPDF 用于生成PDF文档的开源PHP类 主要特点 基本功能不需要外部库: 所有标准页面格式,自定义页面格式,自定义边距和度量单位: UTF-8 Unicode和从右至左的语言: TrueType ...
- php html小项目,使用PHP把HTML生成PDF文件的几个开源项目介绍
这篇文章主要介绍了使用PHP把HTML生成PDF文件的几个开源项目介绍,本文罗列了FPDF.DomPDF.TCPDF等项目的特点,需要的朋友可以参考下 利用PHP编码生成PDF文件是一个非常耗时的工作 ...
- itext生成pdf paragraph 自动换行_reportlab高级制作多格式PDF和python的class和装饰器复习
1 说明 1.1 reportlab高级制作多格式PDF:即包含文字.表格.柱状图. 1.2 复习python的class和装饰器的高级基础知识. 1.3 列表转换字符串.读取txt文件等python ...
- iText和flying saucer结合生成pdf的技术
原博文地址 http://blog.csdn.net/shanliangliuxing/article/details/6833471 下面是我自己利用flying saucer技术生成pdf文档的实 ...
- Itext生成pdf文件,itext+Freemarker生成pdf,（中文空白解决）
来源:https://my.oschina.net/lujianing/blog/894365 1.背景 在某些业务场景中,需要提供相关的电子凭证,比如网银/支付宝中转账的电子回单,签约的电子合同等. ...
最新文章
- CV大咖齐聚于此，追忆一代宗师Thomas S. Huang为人、为师、为学
- 简单的小程序实现ATM机操作
- 【Android 应用开发】Android应用的自动更新模块
- python lambda map reduce_简单了解python filter、map、reduce的区别
- mysql udf提权hex_Mysql_UDF提权
- 7 种让 if / else 变得更加优雅的方式，你 pick 了吗？
- iPhone 15有望配备潜望式摄像头 供应商已宣布投资建厂
- mysql怎么保存视图_MySQL的视图和存储
- ASP.Net学习笔记003--网站和WebApplication的区别
- 一个td里 两个div重叠
- python os.access_Python用access判断文件是否被占用的实例方法
- excel自动排班表_18个施工进度计划横道图，Excel版自动生成表，操作简单明了
- RapidMiner
- UART串口通信协议详解
- 美国弗吉尼亚大学计算机科学,弗吉尼亚大学计算机科学系学位设置
- H5中段落自动空两格
- 用matlab实现电影推荐性能测试,优化标准测试函数及MATLAB代码
- MyCAT XA分布式事务
- 超全！常用的 70 个数据分析网址
- 财报汇总 | 可口可乐、埃森哲、圆通、海亮教育等9家企业发布业绩