Can I use window.print() to export a page to PDF automatically?

Question

I'm searching for methods to export my HTML div to a PDF format. My current lead is to use window.print() to send the page to print, making the destination 'Save as PDF', and continuing from there. It's not perfect, and I'm here to ask if it's possible to write code to automate the part where a user would click 'Save as PDF' and also the part where they name there file.

Ideally, all that happens is a user clicks a button to export, the 'Save as PDF' click happens behind the scenes, and the file is automatically named report.pdf. Is this possible to codify?

I am also open to any suggestions on other ways to export my HTML into a PDF format, however I cannot use either of the following libraries to aid me in this:

• jsPDF does NOT support CSS on its own, and therefore is out of the question.
• I am aware that jsPDF can be used in conjunction with rasterizeHTML or html2canvas, however both of these work by taking a screenshot of the page and appending said screenshot to the file. This means the page is unsearchable using CTRL+F, which is one of the use cases of my project.

Another option I have is to use the Xportability library, but as of right now I haven't been able to pass any stylesheets into the PDF generation call. Here is the code at fault that generates a PDF with all of my recorded data, but doesn't style with the provided 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>

How do I pass in the style sheet? I can manually add the style to every single element and it works like that, but that would be awful.

Answer 1

You can use Kendo UI pdf-exportcomponent to download the particular div elements.

Sample Code:

$(".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"
            });
        });
    });

for fileName you can give whatever the filename you want and it will save the file with that file name.

URL: PDF Export / Document Export