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

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

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

Answer 2

您可以使用 Kendo UI pdf-exportcomponent 下载特定的 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 Export / Document Export