纯前端生成pdf----js动态获取后台数据生成pdf

最新推荐文章于 2024-05-23 14:28:15 发布

慢半拍、

最新推荐文章于 2024-05-23 14:28:15 发布

阅读量4k

点赞数

分类专栏： javascript PDF&&XLSX

本文链接：https://blog.csdn.net/huanhuan03/article/details/105813968

版权

javascript 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

PDF&&XLSX

5 篇文章 1 订阅

订阅专栏

先看效果如下，表格数据动态从后台返回：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple example</title>
</head>
<body>
    <button onclick="generate()">导出 pdf</button>
    <!-- pdf展示 -->
    <div style="height: 600px;">
        <iframe id="output" src="" frameborder="0" width="100%" height="90%"></iframe>
    </div>



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

    <script>
        var columns = ["ID", "Name", "Age", "City"]; // 表头
        var data = [        // tableDate
            [1, "Jonatan", 25, "Gothenburg"],
            [2, "Simon", 23, "Gothenburg"],
            [3, "Hanna", 21, "Stockholm"]
        ];
            
        var doc = new jsPDF('p', 'pt'); // 获取实例
        doc.autoTable(columns, data);   // 渲染table
        document.getElementById("output").src = doc.output('datauristring');   // 渲染pdf

        function generate() {   // 导出pdf
            doc.save("table.pdf");
        }
    </script>
</body>
</html>