Question

我正在寻找将HTML div导出为PDF格式的方法。我当前的线索是使用window.print()发送页面进行打印，将目标设置为“另存为PDF”，然后从那里继续。这不是完美的，我在这里问是否可以编写代码来自动执行用户单击“另存为PDF”的部分以及他们在其中命名文件的部分。

理想情况下，所有发生的事情是用户单击一个按钮进行导出，在后台单击“另存为PDF”，该文件自动命名为report.pdf。这可以编纂吗？

对于其他将HTML导出为PDF格式的方法，我也持开放态度，但是我不能使用以下两个库之一来帮助我：

jsPDF本身不支持CSS，因此是不可能的。
我知道jsPDF可以与rasterizeHTML或html2canvas结合使用，但是这两种方法都是通过截取页面的屏幕快照并将该屏幕快照附加到文件来实现的。这意味着无法使用CTRL+F来搜索该页面，这是我的项目的用例之一。

我的另一个选择是使用Xportability库，但是到目前为止，我还不能将任何样式表传递到PDF生成调用中。这是有问题的代码，该代码会用我所有的记录数据生成PDF，但不能使用提供的CSS设置样式：

<script id="finalReport" type="text/x-kendo-template">
    <h3 class="report-header">stub title</h3>
    <table class="report-table">
        <tr>
            <td>Report ID:</td>
            <td>stub</td>
        </tr>
    </table>
</script>

<style>
  .report-header {
        font-style: italic;
        font-weight: bold;
        text-align: left;
    }
</style>

<script id="main" type="text/javascript">
    function generateReport() {
        return xepOnline.Formatter.Format("finalReport", {
            render: 'download', pageWidth: '216mm', pageHeight: '279mm'
        });
    }
</script>

如何传递样式表？我可以手动将样式添加到每个元素中，并且可以像这样工作，但这太糟糕了。

Answer 1

您可以使用Kendo UI pdf-export组件来下载特定的div元素。

示例代码：

$(".export-pdf").click(function() {
        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($(".content-wrapper"))
        .then(function(group) {
            // Render the result as a PDF file
            return kendo.drawing.exportPDF(group, {
                paperSize: "auto",
                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
            });
        })
        .done(function(data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "HR-Dashboard.pdf",
                proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
            });
        });
    });

对于fileName，您可以提供所需的任何文件名，它将使用该文件名保存文件。

URL： PDF Export / Document Export

Answer 2

进入打印页面后，您可以通过选择目标按钮轻松地告诉文档以pdf格式打印

我可以使用window.print（）自动将页面导出为PDF吗？

2 个答案: