JavaScript生成PDF

最新推荐文章于 2024-05-10 10:01:01 发布
最新推荐文章于 2024-05-10 10:01:01 发布
阅读量2.8k 收藏 13
点赞数 2
分类专栏： 前端 文章标签： javascript js html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43321726/article/details/109891490
版权

废话不多说直接上代码

<!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">收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;据</div>
                        <div class="titleUdeLine"></div>
                    </div>
                </div>
                <div class="div2">NO：<span style="color: #9C5223;">1313215</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
            </div>
            <div class="date">
                <div class="deDiv1">
                    2019年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;07月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;03日
                </div>
                <div class="deDiv2">第&nbsp;&nbsp;&nbsp;&nbsp;201&nbsp;&nbsp;&nbsp;&nbsp;号</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;">
                        &nbsp;&nbsp;兹&nbsp;&nbsp;收&nbsp;&nbsp;到&nbsp;&nbsp; 李松山</td>
                    <td colspan="6" style="width: 50%;">
                        交&nbsp;&nbsp;来&nbsp;&nbsp;下&nbsp;&nbsp;列&nbsp;&nbsp;款&nbsp;&nbsp;项&nbsp;&nbsp;此&nbsp;&nbsp;据
                    </td>
                </tr>
                <tr>
                    <td align="center" rowspan="2" style="width: 60%;">
                        摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</td>
                    <td colspan="10" align="center" style="width: 10%;">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额</td>
                    <td rowspan="2" align="center" style="width: 30%;">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</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>
                            <div
                                style="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;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主管：鲁迅</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>

在这里插入图片描述
在这里插入图片描述

pandaHe_Status
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生js实现生成PDF文件
04-25
原生js实现生成PDF文件 生成文件保存文件 两个文件 第一个 html2canvas.min.js 主要是实现将选择的元素转换成图片 第二个 jspdf.min.js 主要是实现生成PDF的主要文件 引入 <script src="/static/js/js/html2canvas.min.js"></script> <script src="/static/js/js/jspdf.min.js"></script>
如何在 JavaScript 中生成 PDF
迹忆客
07-07 6763
在本文中，我们将学习在 JavaScript 源代码中创建 PDF 的最佳库，以及如何在我们的 JavaScript 代码中使用该库。
推荐开源项目：pdfmake - 纯JavaScript的PDF文档生成库
最新发布
gitblog_00052的博客
05-10 526
推荐开源项目：pdfmake - 纯JavaScript的PDF文档生成库 项目地址:https://gitcode.com/bpampuch/pdfmake 在这个数字化的时代，我们经常需要生成或处理PDF文档。而pdfmake是一个卓越的开源项目，它允许在服务器端和客户端以纯JavaScript的方式生成PDF文档，无需依赖任何其他软件。 1、项目介绍 pdfmake是一个功能强大的库，能帮助...
【jspdf】前端html生成pdf的两种办法 以及 引入中文字体
qq_29184685的博客
04-24 1万+
【jspdf】前端html生成pdf的两种办法 以及 引入中文字体
如何使用jsPDF 生成 pdf 文档
boyla333的博客
05-26 1814
{“pdfImgName”:“施工流程图1”,“width”:40,“height”:40,“src”:“data:image/gif;{“pdfImgName”:“图片名称”,“width”:图片宽度,“height”:图片高度,“src”:“图片base64编码”}主页点击蓝色"配置模版"链接，即可跳转配置页面，用于增删改章节模版，右侧填完提交，再点上方 保存配置，就会把所有配置保存到本地。在模版中插入特定的的花括号{}包裹的内容可以插入图片和一些模版参数，下面分别是插入方法。
前端-js生成pdf文件
duangduang94的博客
04-20 9118
前端实现运用js将页面转化为pdf文件
证书生成器：使用JavaScript生成PDF证书
02-06
本文将详细介绍如何使用JavaScript技术来创建一个Web应用，生成PDF格式的证书。我们将主要关注两个关键库——PDF-lib.js和FileSaver.js。 **PDF-lib.js** PDF-lib.js 是一个纯JavaScript库，允许开发者在浏览器环境...
generate-pdf:使用jsPDF和ReactJS使用javascript生成PDF
05-03
本项目利用jsPDF库和ReactJS框架，结合JavaScript技术，实现了动态生成PDF的功能。接下来，我们将深入探讨这些知识点。 **jsPDF** 是一个开源的JavaScript库，它允许开发者在浏览器环境中生成PDF文件。jsPDF提供了...
jsPDF-AutoTable：jsPDF插件，用于使用JavaScript生成PDF表
02-04
用Javascript生成PDF表 这个jsPDF插件增加了通过解析HTML表或直接使用Javascript数据生成PDF表的功能。 查看或。 安装 通过执行以下操作之一来获取jsPDF和此插件： npm install jspdf jspdf-autotable 从github...
JavaScript代码生成PDF文件的方法
11-24
可以使用javascript生成PDF的类库–jsPDF,先下载jsPDF-0.9.0rc2下载地址：;请点这里 ,以下是完整实例代码: <!doctype> <html> <head> <title>jsPDF</title> <meta ...
PDF生成工具（Javascript）
12-24
以下我们将深入探讨JavaScript生成PDF的相关知识点。 首先，我们关注的核心库是`jspdf.js`，这是一个流行的JavaScript库，专门用于在浏览器环境中生成PDF。`jspdf`库提供了一系列方法，如`addPage`用于添加新页面，...
在线js生成pdf
kongzhonghu的专栏
12-19 1030
js生成pdf，通过一个html构建收据模板，并通过网页下载的例子展示js生成pdf的功能
前端使用jspdf生成PDF通过ajax传输后台生成PDF文件
热门推荐
csl125的博客
12-22 2万+
html需要引入 html2canvas.js 和jspdf.debug.js  &lt;script src="static/libs/jsPDF-master/dist/jspdf.min.js"&gt;&lt;/script&gt; &lt;script src="static/libs/jsPDF-master/dist/html2canvas.js"&gt;&lt;/script&g...
内卷时代下的前端技术-使用JavaScript在浏览器中生成PDF文档
葡萄城技术团队博客
09-08 4244
另外，对于原生的PDF文件来说，仅包含英文字体，不包含任何中文字体，因此当导出的内容中含有中文字体编码时，就会显示乱码，所以通常情况下，我们都需要为PDF进行字体注册操作。当然也会有一定的缺点，对于字体较多的文件，需要注册不同的字体，字体文件越大，占用的带宽就越大。具体如何转，可以找一些在线的文件转换器，不过在线的有可能会因为字体文件太大而崩溃，或者有能力的大佬可以自己写一个转换的工具。正如前面所说的，在国内，使用中文的报告是一件再常见不过的事，在计量检测等相关场景，特殊字符的使用也较多。
【PDF】前端生成pdf
qq_39404437的博客
07-14 5623
上一篇博客主要讲的是pdf文件转换成canvas，然后进行相关的画框截图操作。本篇博客主要讲html中dom如何生成pdf文件（前端生成pdf），后端生成pdf当然也可以，原理也是将html网页通过后端服务导出成pdf，然后css设置break-after:always;作为分页逻辑，但是我们不深入讲，这里着重讲前端生成pdf。
Vue生成PDF文件攻略：html2canvas与jspdf联手，中文乱码与自动换行难题攻克
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-13 5217
在做项目时有这么一个需求，需要将当前页面指定区域的内容导出pdf到本地。使用过程中遇到的问题及解决方法。需要一个支持中文的字体ttf文件，可以在网上下载，也可以使用本地window/font/路径下的文件。选择你本地的ttf文件，点击“Create”按钮，会生成一个js文件。上面乱码解决了，但是发现中文字不会自动换行。这个还需要进一步解决。如果是直接使用jsPDF生成pdf文件，中文是乱码。在导出多页的时候，希望在页面尾部添加页码。里面有个fontconverter目录。在页面中引入js文件。
如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件
LuckyWinty的博客
05-17 3078
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群英文 | https://medium.com/coding-beauty/javascript-convert-html-to-pdf-99851d36e1cd使用 jspdf 库，我们可以轻松地将任何 HTML 页面或表单转换为 ...
VUE使用JsPDF+html2Canvas实现前端生成PDF文件
MadSnail00的博客
12-12 677
vue，PDF文件导出，JsPDF+html2Canvas实现前端生成PDF文件
用javascript把网页生成pdf文件
03-21
```javascript // 引入jsPDF库 import jsPDF from 'jspdf'; // 创建一个新的PDF文档 const doc = new jsPDF(); // 获取要转换为PDF的HTML元素 const element = document.getElementById('myElement'); // 将HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值