前端自动生成PDF(jsPDF autoTable)

最新推荐文章于 2024-06-18 09:36:48 发布

weixin_43237339

最新推荐文章于 2024-06-18 09:36:48 发布

阅读量4.7k

点赞数 2

文章标签：前端 PDF生成 jsPDF autotable

本文链接：https://blog.csdn.net/weixin_43237339/article/details/98473873

版权

环境：vscode live_server
本文介绍了jsPDF的常见用法，并讲述了笔者在实践过程中遇到的一些问题，一边记录一边分享给大家

导入 js文件

<script src="jspdf.min.js"></script>
<script src="jspdf.plugin.autotable.min.js"></script>

在绘制表格的时候可以选择三种主题，笔者的主题选择了 “plain” 即白色的背景和黑色的字体简洁，明快。
因不需要表头，且 title 和 value 在同一行内，所以笔者选择将 title 和 vaue 一同放在 body 内，效果如下图所示。

<html>
    <script src="jspdf.min.js"></script>
    <script src="jspdf.plugin.autotable.js"></script>
    <script type = "text/javascript">
        function generatePDF(){
            //新创建一个PDF对象
            var doc = new jsPDF('p', 'pt', 'a4');
            //设置文件样式  分为“blod” 加粗字体，“italic” 斜体，“bloditalic”加粗斜体
            doc.setFontStyle("bolditalic");
            //设置字体大小
            doc.setFontSize(16);
            //添加文本内容，并固定文本位置
            doc.text("hello world",40 , 80);
            //画一条横线，X从40~555 Y是180
            doc.line(40, 100, 555, 100);
            //绘制表格
            doc.autoTable({
                body:[["SPV:","aaa","Habitual Base:","aaa","Asset Type:","aaa"],
                    ["Asset Number:","aaa","Lease Commencement:","aaa","LOI Number:","aaa"],
                    ["Country of Registration:","aaa","Lease Expiry:","aaa"]
                ],
                //设置table的主题
                theme: "plain",
                //Y轴开始位置为200
                startY: 200
            })
            //生成PDF，PDF的文件名是test.pdf
            doc.save("test.pdf");
        }
    </script>
    <body onload="generatePDF()">
    </body>
</html>

生成的效果图:
生成PDF效果图
以上方法随着页面生成直接将生成的PDF下载下来，但是有没有什么办法可以先预览生成的PDF再进行下载呢？

 var string = pdf.output("datauristring");
		debugBase64(string);
    }
    /**
     * Display a base64 URL inside an iframe in another window.
     */
    function debugBase64(base64URL){
        var win = window.open();
        win.document.write('<iframe src="' + base64URL  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
    }

这段代码将文档转化成了Base64数据，并将数据写入到了新创建窗口的iframe框架内，这样做是为了避免将数据直接写入到窗口内，会导致chrome浏览器报错，安全问题。
jsPDF 不仅可以添加文字、表格，还可以添加图片

	function init() {
        getImageFromUrl('/webpage/com/app/web/system/sys/LOGO.png', generatePDF);
    }
    //通过url获取指定图片
    var getImageFromUrl = function (url, callback) {
        var img = new Image();

        img.onError = function () {
            alert('Cannot load image: "' + url + '"');
        };
        img.onload = function () {
            callback(img);
        };
        img.src = url;
    };
     function generatePDF(imgData){
            //新创建一个PDF对象
            var doc = new jsPDF('p', 'pt', 'a4');
            //设置文件样式  分为“blod” 加粗字体，“italic” 斜体，“bloditalic”加粗斜体
            doc.setFontStyle("bolditalic");
            //设置字体大小
            doc.setFontSize(16);
            //添加文本内容，并固定文本位置
            doc.text("hello world",40 , 80);
            //画一条横线，X从40~555 Y是180
            doc.line(40, 100, 555, 100);
            //添加图片
            doc.addImage(imgData, 'PNG', 470, 80, 80, 50,"hangge"); // 将图片使用别名"hangge"缓存起来
            //绘制表格
            doc.autoTable({
                body:[["SPV:","aaa","Habitual Base:","aaa","Asset Type:","aaa"],
                    ["Asset Number:","aaa","Lease Commencement:","aaa","LOI Number:","aaa"],
                    ["Country of Registration:","aaa","Lease Expiry:","aaa"]
                ],
                //设置table的主题
                theme: "plain",
                //Y轴开始位置为200
                startY: 200
            })
            //生成PDF，PDF的文件名是test.pdf
            doc.save("test.pdf");
        }

将你需要的标签的激活函数设置成init(),程序调用getImageFromUrl()函数，和generatePDF()函数，将图片数据化之后，添加在PDF中。

weixin_43237339

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
前端自动生成PDF(jsPDF autoTable)

环境：vscode live_server导入 js文件下载链接link<script src="jspdf.min.js"></script><script src="jspdf.plugin.autotable.min.js"></script><html> <script src="jspdf.min...
复制链接

扫一扫