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

Question

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

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

我也乐于接受有关将HTML导出为PDF格式的其他方法的任何建议，但是我不能使用以下两个库中的任何一个来帮助我：

• jsPDF本身不支持CSS，因此是jsPDF的。
• 我知道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您可以提供所需的任何文件名，它将使用该文件名保存文件。

网址： PDF导出/文档导出

Answer 2

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