用jquery下载pdf的问题

Question

我正在尝试使用下面的代码下载带有 ajax 响应 html 的 pdf

var newPDFAction =  function () {
        $.ajax({
            type: "post",
            url: '{{ route("admin.getCustomerSalesRepTotal") }}',
            success: function(response){
                var doc = new jsPDF();
                var specialElementHandlers = {
                    '#editor': function (element, renderer) {
                        return true;
                    }
                };

                doc.fromHTML(response, 15, 15, {
                    'width': 170,
                        'elementHandlers': specialElementHandlers
                });
                doc.save('sample-file.pdf');
            }
        });
        
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

<button onclick="newPDFAction()" >Download Record</button>

在我的 ajax 响应中，我收到了带有表格的 html div

<div class="card" style="margin:20px; width:100%">
<div class="card-header">
    <img style="width:80px;" src="logo.png" />
</div>
<div class="card-body">
    <h3>Customer Sales Rep Sales Totals</h3>
    <table class="table table-borderless">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Total Sales</th>
                <th scope="col">Order Count</th>
                <th scope="col">Customer Account</th>
                <th scope="col">Customer Suff</th>
                <th scope="col">Sales Rep Id</th>
                <th scope="col">Sales Rep Last Name</th>
                <th scope="col">Sales Rep First Name</th>
                <th scope="col">Sales Rep State</th>
            </tr>
        </thead>
        <tbody>                                               
            <tr>
                <th>1000.0000</th>
                <td>2</td>
                <td></td>
                <td>0</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="card-footer">
    <span style="align:left">Created on: 25-01-2021</span>
</div>

但是当我运行此代码时，我收到以下错误jsPDF Warning: rendering issues? provide a callback to fromHTML!，它正在下载 pdf 中的空白文件，下载的 html 响应中没有内容

有人可以帮我吗？

Answer 1

我认为您需要将保存命令移动到fromHtml 回调中：

doc.fromHTML(response, 15, 15, {
  'width': 170,
  'elementHandlers': specialElementHandlers
}, function() {
  doc.save('sample-file.pdf');
});

检查一个适应的小提琴here