纯前端预览并且导出pdf----js将table预览为pdf、并导出为pdf

首先看需求，页面上会渲染出一个表格，可以预览为pdf、并且导出为pdf：

当点击预览pdf按钮，则在iframe的地方预览：

点击导出pdf按钮，则导出这个table为pdf：

实现过程：

首先看看官网API，这个库可以将table导出为很多形式：

我主要说的是导出为pdf格式，要看看它的分支jsPDF-AutoTable的API介绍，用法和配置项很详细，主要看examples文件夹里面的示例：

//  html  样式就不写了，自行修改

<button id="download-btn" class="pure-button">导出 PDF</button>
<button id="preiew-btn" class="pure-button">预览pdf</button>

<!-- 预览区 注意加上宽高尺寸,  你可以开始隐藏它，点击预览再显示 -->
<div id="wrapper">
  <iframe id="output"></iframe>
</div>

<!-- table -->
<table id="basic-table" border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Email</th>
        <th>Country</th>
        <th>IP-address</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Donna</td>
        <td>Moore</td>
        <td>dmoore0@furl.net</td>
        <td>China</td>
        <td>211.56.242.221</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Janice</td>
        <td>Henry</td>
        <td>jhenry1@theatlantic.com</td>
        <td>Ukraine</td>
        <td>38.36.7.199</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Ruth</td>
        <td>Wells</td>
        <td>rwells2@constantcontact.com</td>
        <td>Trinidad and Tobago</td>
        <td>19.162.133.184</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Jason</td>
        <td>Ray</td>
        <td>jray3@psu.edu</td>
        <td>Brazil</td>
        <td>10.68.11.42</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Jane</td>
        <td>Stephens</td>
        <td>jstephens4@go.com</td>
        <td>United States</td>
        <td>47.32.129.71</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Adam</td>
        <td>Nichols</td>
        <td>anichols5@com.com</td>
        <td>Canada</td>
        <td>18.186.38.37</td>
    </tr>
    </tbody>
</table>





//  js

<script src="libs/jspdf.min.js"></script>
<script src="../dist/jspdf.plugin.autotable.js"></script>
<script>
    // 导出pdf
    document.getElementById('download-btn').onclick = function () {
        update(true);
    };
    // 预览
    document.getElementById('preiew-btn').onclick = function () {
        update()
    }

    function update(shouldDownload) {
        shouldDownload = shouldDownload || false;    // 预览还是导出
        var doc = new jsPDF('p', 'pt');          // 初始化示例，更多配置项看官网api
        doc.text("From HTML", 40, 50);           // 表title、距离左边距离、距离上边距离
        var res = doc.autoTableHtmlToJson(document.getElementById("basic-table"));        // 获取当前表格的数据
        doc.autoTable(res.columns, res.data, {startY: 60});    // 渲染数据，列、数据、距离上边距离，更多配置项看官网api

        if (shouldDownload) {
            doc.save('tableName.pdf');    // 导出名为tableName.pdf的文件
        } else {
            // doc.output('datauristring')：pdf预览的地址，一段base64地址 
            document.getElementById("output").src = doc.output('datauristring');
        }
    }
</script>

就酱~